Горизонтальное выпадающее меню на CSS
Я уже когда-то писал о том, как сделать вертикальное выпадающее меню на CSS. В этой же статье я расскажу о том, как сделать горизонтальное выпадающее меню на CSS.
Привожу HTML-код:
<ul class="menu">
<li>
<a href="#">Главная</a>
</li>
<li>
<a href="#">Меню 1</a>
<ul>
<li>
<a href="#">Подменю 1</a>
</li>
<li>
<a href="#">Подменю 2</a>
</li>
<li>
<a href="#">Подменю 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Меню 2</a>
<ul>
<li>
<a href="#">Подменю4</a>
</li>
<li>
<a href="#">Подменю 5</a>
</li>
<li>
<a href="#">Подменю 6</a>
</li>
<li>
<a href="#">Подменю7</a>
</li>
<li>
<a href="#">Подменю 8</a>
</li>
</ul>
</li>
</ul>
И CSS-код:
ul.menu {
display: inline-block;
margin: 0;
padding: 0;
}
ul.menu li {
float: left;
list-style: none;
}
ul.menu li a {
display: block;
padding: 8px 20px 10px;
text-decoration: none;
}
ul.menu li ul {
display: none;
padding-left: 10px;
}
ul.menu li:hover ul {
display: block;
position: absolute;
}
ul.menu li:hover ul li {
float: none;
}
ul.menu li:hover ul li a {
padding: 6px 0 8px;
}
Безусловно, здесь дан чуть ли не минимум свойств. Чтобы это всё украсить, нужно менять стили. Что касается HTML-кода, то он идентичен и для горизонтального, и для вертикального меню.
Теперь у Вас не должно быть проблем с созданием горизонтального выпадающего меню на CSS.
Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup
-
Создано 06.03.2013 04:25:07
-
Михаил Русаков
Комментарии (28):
Скопировал код. Открыл в Браузере Internet Explorer 9 и... ничего не выпадает при наведении/нажатии
Ответить
<< Открыл в Браузере Internet Explorer 9 >> Это однако плохо, даже мой сайт в Internet Explorer 9 выглядит прилично, хотя вёрстка там просто ужассная, так как я не верстальщик, и не дизанер, то что уж говорить об этом шаблоне, над которым я мучался 3 недели, верхнее меню выпадающее, сейчас там просто нечему выпадать http://malinichev.ru/. Михаил, может будете писать не просто примеры в статьях, а полностью разбирать все приёмы, дизайн и принципы? Это касается только лишь вёрстки, просто вот вы пишите статьи про меню например, а при подключении на сайт всплывает куча багов, которые исправить не совсем просто, у меня иногда слаживается такое чувство, как будто вы нас учите только лишь исправлять ошибки в коде... А как же правильность написания, а как же грамотность, таже концекпция MVC, вы же про неё толком ничего не рассказали, а сделали бы статью про универсальную систему MVC для сайта в минимальных объёмах, и народ бы на эту статью повалили бы толпами, не говоря уже о поднятии рейтинга вашего сайта в ПС. Прислушивайтесь к нам всем, мы плохого не посоветуем если мы читаем ваши статьи с большим удовольствием. И запишите парочку видеоуроков про ооп, и вёрстку. Уж больно нужные темы... Это было моё мнение за последний год посещения вашего сайта ежедневно. Судите как хотите, хоть в бан ставьте, но моё мнение - это моё мнение. Прислушайтесь пожалуйста и вашему сайту будет огромное счастье
Ответить
Проверил в IE8 и IE9 - всё прекрасно работает.
Ответить
На хабре статья недавно появилась, очень интересная. Советую всем почитать http://habrahabr.ru/post/171905/
Ответить
Михаил, Подскажите. Как сделать чтобы при создании нового пункта меню оно появлялось сразу на всех страницах?
Ответить
Добавить его на все страницы вручную, либо надо создавать движок для сайта.
Ответить
Спасибо! А кроме движка есть другие варианты?
Ответить
Самый простой вариант был рассмотрен в этом курсе: http://srs.myrusakov.ru/html - где-то в последних уроках (9 или 10).
Ответить
Большое спасибо)
Ответить
Я слышал еще как-то можно через java script это сделать?
Ответить
Да, можно.
Ответить
ого, спасибо) код понятный и еще узнал про display: none;
Ответить
то как это сделать?
Ответить
Михаил, есть такая проблема. Под меню навигации находится контент-блок. При наведении мышью на пункт меню подменю всплывает, но часть его прячется под контентный блок. Как это исправить?
Ответить
Добавил z-index: 2; все нормально. Можно таким способом выводить блоки наружу?
Ответить
Можно.
Ответить
Доброго времени суток всем читателям! Тут кто-то спрашивал про создание меню на JavaScript'e. Есть программка для этого, называется Agama Web Menus. Для создания меню используются шаблоны в программе, которых вполне достаточно для вставки на любой сайт с различным оформлением. Вот есть вопрос к Михаилу по поводу того, как подключить созданное меню в этой программе? Меню создаётся в трёх файлах *.js , один из которых и отвечает за показ меню. Данный вопрос будет иметь продолжение, а именно: Если такое меню можно вставить через блок, то вопрос в следующем: При входе на сайт, незарегистрированный пользователь видит часть меню, а войдя под своим логином он увидит меню полностью. Вот как это реализовать?.
Ответить
Для создания меню надо использовать HTML+CSS, а не программы. Если понравился дизайн меню из этой программы, переверстайте его нормально и всё. А что касается вывода части меню, то тут надо делать проверку через if на авторизацию пользователя. И если он авторизован, то внутри if вывести дополнительные пункты, видимые только для авторизованного пользователя.
Ответить
Здравствуйте Михаил! Переверстать меню не получится, так как оно состоит из нескольких так сказать настроечно-управляющих блоков, в которых указаны используемые файлы-картинки отображающиеся в меню, используемые шрифты и координаты пунктов меню. Проще подключить меню целиком. Спасибо Вам за ответ.
Ответить
привет! у меня блок, внутри него таблица, в ней меню горизонтальное, на одной из кнопок - выпадающее меню при наведении мыши. Так вот когда появляется выподающее меню, то нижняя грань толи блока, толи таблицы оттягивается вниз, при этом ломая еще и фоновою картинку всей страницы. Как сделать чтоб поверх всего выскакивало. Пробовал z-index вообще не реагирует. мож че не так делаю. И это, Михаил у вас на вашем сайте снизу где надпись "Получать уведомление на E-mail об ответах на Ваш комментарий" на Google Chrome галочку не как не поставить он кнопку(checkbox) не видит, пришлось с другого браузера комментарий писать.
Ответить
Тут могут помочь position и z-index. Попробуйте их поменять, наблюдая за изменениями через firebug.
Ответить
Привет! Подскажите: есть горизонтальное меню с выпадающими подменю. И проблема: так как названия пунктов меню разной длины, выпадающее меню при hover выпадает и сдвигает остальные пункты главного меню чуть дальше вправо. Как сделать так, чтобы они оставались на своих местах? И второе: нужны разные padding для пунктов меню, если задавать через :nth-child(), то это свойство срабатывает и на пункты подменю соответствующей нумерации. Можно ли как-то задать свойство только для прямого n-ного child в документе? Или придётся прописывать style="padding..." атрибутом в нужных строках?
Ответить
Приведите пример ХОТЬ РАЗ как и куда это всё сохранять чтобы оно работало? Даже нельзя это проверить на практике, посмотреть визуально. Вы дали два куска кода И ВСЁ. Вот я создал index.html и my.css вписал в них эти два куска кода. Запускаю и естественно выполняется только первый файл.
Ответить
Не получилось создать новый уровень выпадающего списка. В HTML прописал, внутри очередного <li> (уровня ПодМЕНЮ), новый <ul> с ячейками <li>.Это понятно. Оно отобразилось. Но в SCC не понял как правильно прописать свойства для вновь добавленных элементов списка. Попробовал скопировать свойства для li ul и сделать новый класс для вновь созданного списка с ячейками по аналогии с предыдущими, но не работает или работает совсем не корректно. Михаил, не могли бы Вы привести пример как прописать для уровня подМЕНЮ дополнительное выпадающее меню. Спасибо.
Ответить
Михаил, приветствую.. Правильно я понимаю что между "Подменю" можно убрать <li> и </li>. Код от этого же ничего не теряет? К примеру: ...<ul> <li> <a href="#">Подменю 1</a> <a href="#">Подменю 2</a> <a href="#">Подменю 3</a> </li> </ul>...
Ответить
убрал display: inline-block; - ничего не изменилось
Ответить
на странице http://myrusakov.ru/css-submenu.html ни слово что оно вертикальное, может стоит добавить?
Ответить
Здравствуйте! Подскажите, пожалуйста, как в выпадающем меню сделать активную кнопку, допустим, чтобы кнопка"главная" всегда была выделенной?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.