Большинство людей (те которые не умеют делать такое меню), рыскают по всему интернету и пытаются найти сайт с таким меню. Потом начинают искать исходный код, чтобы понять как это делается. Я предлагаю вашему вниманию статью где будет показан пример самого просто меню. И так начнем...
Делаем структуру меню. Что будет главной ссылкой, а какие к нему приделанные. Вот моя:
<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 многие жалуются. Есть вопросы или заметили ошибку, пишите в комментариях.
Ужас, а эти 0px и «1px 1px 1px» убрать нельзя? Наследованием от text-decoration избавиться?
Пример хорош, но больно избыточен и некрасив :/
Убрал ненужное!!!
Некрасив в каком плане? В плане сообщения или самом меню?
Не получилось у меня.
Делал так:
создал два файла: html и css. Прописал путь ко второму в первом:
.
Что я сделал не так?
Moodman, извини, но я не смогу тебе помочь. Точка оззночает что ты отсылал код, а он обрабатывается у нас в блоге. Для Открывания ковычки сделай так — & lt; (< ). Для закрывания так - & gt; (>). Незабудь убрать пробелы...
а какже 6й ослик а?
Хм, 6 осликом мало кто пользуется и я принципиально не верстаю под него.
Зря, 6-й ослик используется только впуть и его нужно учитывать.
Alex, здесь наше мнение разойдется.
Спасибо большое за статью)
А такой вопрос: если я хочу, чтобы у меня из под-меню «Ссылка 1», например, вправа еще раскрывалось, как бы, под-под-меню, как нужно сделать? Пытался эксперементировать, но, именно, чтобы вправо выдвигалось меню, не получается.
hetpe3b, для подменю, задай left со значением как у родителя ширина.
Вот схема:
|--link1---|-|--link2--|-|--link3--|
|-podlink1-|
|-podlink2-| |-podpodlink1-|
|-podlink3-| |-podpodlink2-|
Podpodlink задай left со значением как ширина у podlink.
а картинками возможно делать или только блоки с фоновыми цветами?
Возможно... Картинки либо задаются всему меню, либо каждой ячейке. Зависит от дизайна...
Ненавижу 6ой ослик!!!
Но в коммерческих проектах его приходится учитывать. На своих сайтах, всегда ставлю заглушку, блокирующую осла и предлагающие его заменить на Gecko.
Это был крик =)
Просто позавидовал принципиальности автора =))) Тоже хочу =)
Моя принципиальность родилась изнутри =). Иногда так сильно раздражает его баг, что нафиг удаляешь ИЕ : ).
=)
Мне выпадающее меню для сайта нужно было, я пол ночи провозился пытаясь вылизать код, что бы работал в осле. Для всех остальных браузеров за 15 минут накатал. К утру плюнул написал скрипт опознавания браузера и по распознанию переброс на страницу с с ссылками на оперу, фф, сафари... Достал осел...
Кстати, если интересно:
Google уже заявил что больше не поддерживает в своих серивисах шестой ослик. Про остальные пока молчит...
Вообщем гугловские сайты (ютуб, гугля и пр.) отключат весь jquery для 6ого =)
Правильно. Давно пора бы уже...
Кстати, Roosso, научить ослика понимать это меню достаточно просто. Нужно всего лишь указать для ослика понятия hover для всех элементов. Погуглите...
Я знаю )) Мне не это меню нужно, я на сайт попал ища разные решения всяких меню, думал у кого нить попадется мне нужный пример =)
Причину смерти ослика видел =)))