Главная » Создание сайтов » Верстка » Выдвижное меню с помощью css

Выдвижное меню с помощью css

vidvig-menu, выдвижное меню, выдвижное меню с помощью html

Большинство людей (те которые не умеют делать такое меню), рыскают по всему интернету и пытаются найти сайт с таким меню. Потом начинают искать исходный код, чтобы понять как это делается. Я предлагаю вашему вниманию статью где будет показан пример самого просто меню. И так начнем..

Делаем структуру меню. Что будет главной ссылкой, а какие к нему приделанные. Вот моя:
<ul>
<li>Ссылки
<ul>
<li>Ссылка 1</li>
<li>Ссылка 2</li>
</ul>
</li>
</ul>

  • Ссылки
    • Ссылка 1
    • Ссылка 2

Со структорой разобрались, но это не то что вы хотели? Давайте для начала превратим их понастоящему в ссылки. Я думаю здесь затруднений не будет. Потому как, нет ничего проще чем добавить тег <a>. Все, ссылки есть, все есть. Осталось сделать выдвижное меню. Я привду пример на основе общего класса, т. е. не будет выделять личное имя. Я думаю вы сами с этим справитесь ;).

И так, вводим класс. Возмем к примеру dropnav. И теперь преобразовываем нашу структуру с сылками:
<ul id="dropnav">
<li><a href="http://bitby.net/news/vydvizhnoe-menyu-s-pomoschiyu-css/">Ссылки</a>
<ul>
<li><a href="http://bitby.net/#">Ссылка 1</a>
</li>
<li><a href="http://bitby.net/#">Ссылка 2</a>
</li>
</ul>
</li>
</ul>

Как видим, изменилась только первая строчка. Но в самом браузере (или где вы смотрите результат кода) ничего не изменилось. Дабавляем вот такой код в css:
#dropnav li {
float:left;
list-style:none;
}

После добаления, убралась только точка перед «Ссылки». Теперь преобразуем ссылки, для этого опять же (и в дальнейшем только туда) в классы прописываем код:
#dropnav li a {
display: block;
text-decoration: none;
padding: 4px 17px 4px 17px;
}
#dropnav li ul li a {
display: block;
text-decoration: none;
line-height:18px;
}

Вот и приобразовались наши ссылки, но результат все ровно не тот. Делаем дальше..

Прячем наши подссылки:
#dropnav li ul {
position: absolute;
left: -999px;
width:150px;
padding: 0;
background: #f0f0f0;
}

Задаем параметры вида наших подссылок:
#dropnav li li {
width: 150px;
overflow:hidden;
}

Параметры ссылок я думаю вы сами напишите с помощью вот такой вот строки:

#dropnav li li a {[свойство ссылок]}

Вот мы и подошли к финальной части. Делаем выдвиг подссылок. Для это вставляем код css:
#dropnav li:hover ul, #dropnav li li:hover ul, #dropnav li li li:hover ul, #dropnav li.sfhover ul, #dropnav li li.sfhover ul, #dropnav li li li.sfhover ul {
left:auto;
}
#dropnav li:hover, #dropnav li.sfhover {
background: #ddd;
}

Видимо вам надоели мои слова, которые я все вкручивал вам на уши. Смотрим весь код css:
#dropnav li {
float:left;
opacity:0.9;
}
#dropnav li a {
display: block;
text-decoration: none;
padding: 4px 17px 4px 17px;
}
#dropnav li ul li a {
display: block;
text-decoration: none;
line-height:18px;
}
#dropnav li ul {
position: absolute;
left: -999px;
width:150px;
padding: 0;
background: #f0f0f0;
}
#dropnav li li {
width: 150px;
overflow:hidden;
}
#dropnav li:hover ul, #dropnav li li:hover ul, #dropnav li li li:hover ul, #dropnav li.sfhover ul, #dropnav li li.sfhover ul, #dropnav li li li.sfhover ul {
left:auto;
}
#dropnav li:hover, #dropnav li.sfhover {
background: #ddd;
}

Вот вы и сделали выдвижное меню. Можно даже сказать не выдвижное, а раскрывающиеся ;). Графики я много не использовал. Ну да ладно..

Я привел пример с css, так как на JS  многие жалуются. Есть вопросы или заметили ошибку, пишите в комментариях.

С уважением, Vasilenko Ivan!

Комментарии — 23 комментария

  1. #9639 WebMast в 9:55, 29 апреля 2010:

    Ответить | Цитировать

    Правильно. Давно пора бы уже…

  2. #9640 WebMast в 10:00, 29 апреля 2010:

    Ответить | Цитировать

    Кстати, Roosso, научить ослика понимать это меню достаточно просто. Нужно всего лишь указать для ослика понятия hover для всех элементов. Погуглите…

  3. #9641 Roosso в 10:04, 29 апреля 2010: (подписался)

    Ответить | Цитировать

    Я знаю )) Мне не это меню нужно, я на сайт попал ища разные решения всяких меню, думал у кого нить попадется мне нужный пример =)
    Причину смерти ослика видел =)))

  4. #10647 Nadya в 11:34, 23 октября 2010: (подписался)

    Ответить | Цитировать

    очень интересный пример!!
    Но не могли бы Вы выложить вариант такого же меню, но вертикального???

  5. #10648 Nadya в 11:36, 23 октября 2010: (подписался)

    Ответить | Цитировать

    дело в том, что у меня реализовано подобное меню, но я не могу понять,как реализовано выделение элементов подменю вместе с элементом родительского меню…

    🙁

  6. Nadya, ждите в ближайшее время статью.

  7. Притензий нет Всё норм!
    У вопрос. Как убрать глюк с IE6?
    Сделал вадвижное меню вертикальное запускаю через Оперу, Гадзилу — всё норм, а через ишака ничего неполучается(меню есть, но невыдвигается)!

  8. #50113 лера в 14:14, 29 мая 2015:

    Ответить | Цитировать

    слушайте я нуб, но кто-нибудь может мне объяснить,как связать css и html.я не понимаю как писать код с css.

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting