Главная » Создание сайтов » Верстка » Выдвижное меню с помощью 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. #69 Сергей М. в 22:51, 22 октября 2008:

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

    Ужас, а эти 0px и «1px 1px 1px» убрать нельзя? Наследованием от text-decoration избавиться?

    Пример хорош, но больно избыточен и некрасив :/

  2. #70 WebMast в 8:02, 23 октября 2008:

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

    Убрал ненужное!!!

    Некрасив в каком плане? В плане сообщения или самом меню?

  3. #497 Moodman в 13:48, 25 февраля 2009:

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

    Не получилось у меня.

    Делал так:

    создал два файла: html и css. Прописал путь ко второму в первом:

    .

    Что я сделал не так?

  4. #499 WebMast в 20:01, 25 февраля 2009:

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

    Moodman, извини, но я не смогу тебе помочь. Точка оззночает что ты отсылал код, а он обрабатывается у нас в блоге. Для Открывания ковычки сделай так — & lt; (< ). Для закрывания так - & gt; (>). Незабудь убрать пробелы...

  5. #1639 хехе в 16:17, 13 июня 2009:

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

    а какже 6й ослик а?

  6. #2499 WebMast в 8:00, 13 июля 2009:

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

    Хм, 6 осликом мало кто пользуется и я принципиально не верстаю под него.

  7. #2632 Alex M. в 9:30, 16 июля 2009:

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

    Зря, 6-й ослик используется только впуть и его нужно учитывать.

  8. #2661 WebMast в 11:08, 17 июля 2009:

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

    Alex, здесь наше мнение разойдется.

  9. #6456 hetpe3b в 14:56, 30 сентября 2009:

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

    Спасибо большое за статью)

    А такой вопрос: если я хочу, чтобы у меня из под-меню «Ссылка 1», например, вправа еще раскрывалось, как бы, под-под-меню, как нужно сделать? Пытался эксперементировать, но, именно, чтобы вправо выдвигалось меню, не получается.

  10. #6463 WebMast в 17:15, 30 сентября 2009:

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

    hetpe3b, для подменю, задай left со значением как у родителя ширина.

    Вот схема:

    |--link1---|-|--link2--|-|--link3--|

    |-podlink1-|

    |-podlink2-| |-podpodlink1-|

    |-podlink3-| |-podpodlink2-|

    Podpodlink задай left со значением как ширина у podlink.

  11. #7447 Айрат в 12:56, 23 октября 2009:

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

    а картинками возможно делать или только блоки с фоновыми цветами?

  12. #7475 WebMast в 18:55, 24 октября 2009:

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

    Возможно... Картинки либо задаются всему меню, либо каждой ячейке. Зависит от дизайна...

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

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

    Ненавижу 6ой ослик!!!

    Но в коммерческих проектах его приходится учитывать. На своих сайтах, всегда ставлю заглушку, блокирующую осла и предлагающие его заменить на Gecko.

    Это был крик =)

    Просто позавидовал принципиальности автора =))) Тоже хочу =)

  14. #9636 WebMast в 7:28, 29 апреля 2010:

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

    Моя принципиальность родилась изнутри =). Иногда так сильно раздражает его баг, что нафиг удаляешь ИЕ : ).

  15. #9638 Roosso в 9:32, 29 апреля 2010: (подписался)

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

    =)

    Мне выпадающее меню для сайта нужно было, я пол ночи провозился пытаясь вылизать код, что бы работал в осле. Для всех остальных браузеров за 15 минут накатал. К утру плюнул написал скрипт опознавания браузера и по распознанию переброс на страницу с с ссылками на оперу, фф, сафари... Достал осел...

    Кстати, если интересно: ie6funeral.com

    Google уже заявил что больше не поддерживает в своих серивисах шестой ослик. Про остальные пока молчит... ;) Вообщем гугловские сайты (ютуб, гугля и пр.) отключат весь jquery для 6ого =)

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

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

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

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

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

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

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

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

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

    Причину смерти ослика видел =)))

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

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

    очень интересный пример!!

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

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

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

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

    :- (

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

  22. Притензий нет Всё норм!

    У вопрос. Как убрать глюк с IE6?

    Сделал вадвижное меню вертикальное запускаю через Оперу, Гадзилу — всё норм, а через ишака ничего неполучается(меню есть, но невыдвигается)!

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

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

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

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting