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

Вторник, Октябрь 21, 2008 11:09 Евгений Жлобо
Рубрики: CSS, html, Дизайн

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  многие жалуются. Есть вопросы или заметили ошибку, пишите в комментариях.

Вы можете оставить ответ, или trackback с Вашего собственного сайта.
Теги: , , , , , ,

18 комментариев “Выдвижное меню с помощью css”

  1. Сергей М. сообщил:

    Октябрь 22nd, 2008 22:51

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

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


  2. WebMast сообщил:

    Октябрь 23rd, 2008 8:02

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

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


  3. Moodman сообщил:

    Февраль 25th, 2009 13:48

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

    Делал так:

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

    .

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


  4. WebMast сообщил:

    Февраль 25th, 2009 20:01

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


  5. хехе сообщил:

    Июнь 13th, 2009 16:17

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


  6. WebMast сообщил:

    Июль 13th, 2009 8:00

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


  7. Alex M. сообщил:

    Июль 16th, 2009 9:30

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


  8. WebMast сообщил:

    Июль 17th, 2009 11:08

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


  9. hetpe3b сообщил:

    Сентябрь 30th, 2009 14:56

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

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


  10. WebMast сообщил:

    Сентябрь 30th, 2009 17:15

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

    Вот схема:

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

    |-podlink1-|

    |-podlink2-| |-podpodlink1-|

    |-podlink3-| |-podpodlink2-|

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


  11. Айрат сообщил:

    Октябрь 23rd, 2009 12:56

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


  12. WebMast сообщил:

    Октябрь 24th, 2009 18:55

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


  13. Roosso сообщил:

    Апрель 29th, 2010 3:13

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

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

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

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


  14. WebMast сообщил:

    Апрель 29th, 2010 7:28

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


  15. Roosso сообщил:

    Апрель 29th, 2010 9:32

    =)

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

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

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


  16. WebMast сообщил:

    Апрель 29th, 2010 9:55

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


  17. WebMast сообщил:

    Апрель 29th, 2010 10:00

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


  18. Roosso сообщил:

    Апрель 29th, 2010 10:04

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

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


Оставить комментарий

Я не робот!

« css свойство background
Гимны дизайнеров »