static_rocket_468x60.jpg

Выпадающее меню на HTML и CSS

выпадающее меню

Выпадающее меню можно сделать на CSS не используя скрипты и модули. Просто дописываем несколько строк в CSS файл и готово. Несмотря на простоту меню будет достаточно универсальным. Стили подходить под произвольное количество уровней вложенности. Хоть два хоть десять уровней. Код при этом остаётся тем же. В статье описаны три вида меню, но если вы только начинаете разбираться в вёрстке советую читать сначала. Так будет проще понять.

  1. Вертикальное выпадающее меню
  2. Горизонтальное выпадающее меню с одним уровнем вложенности
  3. Горизонтальное меню с несколькими уровнями вложенности

Сначала сделаем HTML разметку для меню. Принято делать меню списком. Это не стандарт просто так сложилось. 

  1. <ul class="nav">
  2.   <li><a href="#">пункт 1</a>
  3.     <ul>
  4.       <li><a href="#">пункт 1.1</a></li>
  5.       <li><a href="#">пункт 1.2</a></li>
  6.     </ul>
  7.   </li>
  8.   <li><a href="#">пункт 2</a>
  9.     <ul>
  10.       <li><a href="#">пункт 2.1 многа букаф</a></li>
  11.       <li><a href="#">пункт 2.2</a>
  12.         <ul>
  13.           <li><a href="#">пункт 2.2.1</a></li>
  14.           <li><a href="#">пункт 2.2.2</a></li>
  15.         </ul>
  16.       </li>
  17.     </ul>
  18.   </li>
  19.   <li><a href="#">пункт 3</a></li>
  20.   <li><a href="#">пункт 4</a></li>
  21.   <li><a href="#">пункт 5</a></li>
  22. </ul>

HTML файл мы больше трогать не будем. Все дальнейшие изменения производятся только за счёт CSS. Первое что нам нужно сделать - скрыть вложенные пункты.

ul.nav li ul {display: none;}

Ещё нужно убрать маркеры но это дело вкуса.

ul.nav li {list-style: none;}

Чтобы вложенные пункты появлялись при наведении на родительский пункт используем псевдокласс :hover, при этом нужно сделать так что бы появлялись только пункты первого уровня вложенности. Для этого используем знак >

ul.nav li:hover > ul {display: block;} 

В этой строчке заключается вся магия нашего выпадающего меню, поэтому разберём её подробнее. Благодаря псевдоклассу :hover, при наведении курсора на пункт меню, он же элемент списка li, для первого вложенного списка ul значение display станет block. Так открывается первый уровень вложенности. Если на этом уровне есть пункты содержащие подпункты, то при наведении на них также откроется только один вложенный уровень.

С основной механикой разобрались. Осталось переопределить место где будут появляться вложенные пункты. Для этого воспользуемся свойством position: absolute. При таком позиционировании отсчёт координат ведётся от края окна браузера если только для родительского элемента не задано свойство position с значением fixed, relative или absolute. В этом случае отсчёт ведётся от края родительского элемента.

Вертикальное выпадающее меню

Используя свойство position мы переместим вложенные пункты в право на расстояние равное ширине меню. В рассматриваемом способе есть одно ограничение. При позиционировании нам придётся жёстко задать ширину. С другой стороны вертикальное меню размещается в сайдбаре ширина которого заранее определена, поэтому привязка к ширине не должна вызвать проблем.

  1. /* Вертикальное выпадающее меню*/
  2. body{
  3.   background: #DCDCDC;
  4. }
  5. /*блок меню*/
  6. ul{
  7.   margin: 0;
  8.   padding: 0;
  9. }
  10. ul.nav li {
  11.   background: #B3B3FF;
  12.   border: 1px solid #FFFFFF;
  13.   list-style: none;
  14.   width: 150px;         /*ширина блока меню*/
  15. }
  16. ul.nav li a {
  17.   text-decoration: none;
  18.   display: block;
  19.   padding: 5px 5px 5px 15px;
  20. }
  21. ul.nav li ul {
  22.   display: none;	/*скрываем вложенные пункты*/
  23. }
  24.  
  25. /*Выпадающее меню*/
  26.  
  27. ul.nav li:hover {
  28.   /* позиционирование вложенных элементов
  29.    * будет расчитыватьться относительно
  30.    * родительского элемента
  31.    */
  32.   position: relative;
  33.   background: yellow;
  34. }
  35. ul.nav li:hover > ul {
  36.   display: block;
  37. }
  38. ul.nav li:hover ul{
  39.   position: absolute;
  40.   top: 0;       /*Задаём координаты для вложенных пунктов*/
  41.   left: 150px; /*меню раскрывается вправо*/
  42. }

Вот что должно получиться в результате. демка

вертикальное выпадающее меню

Горизонтальное выпадающее меню

Для горизонтального меню мы будем так же применять позиционирование но есть несколько нюансов. Что бы сделать меню горизонтальным используем свойство float. Меню будет раскрываться вниз значит при позиционировании нужно учитывать высоту. Для начала сделаем меню с одним уровнем вложенности. Вложенное меню также будет горизонтальным. Для этого вложенное меню позиционируем относительно списка а не родительского пункта и задаём для него ширину.

  1. /*Горизонтальное выпадающее меню с одним уровнем вложенности*/
  2.  
  3. body{
  4.   background: #DCDCDC;
  5. }
  6.  
  7. /* Блок меню*/
  8.  
  9. ul{
  10.   margin: 0;
  11.   padding: 0;
  12. }
  13. ul.nav li {
  14.   background: #B3B3FF;
  15.   border-right: 1px solid #FFFFFF;
  16.   float: left; /*делаем меню горизонтальным*/
  17.   height: 30px;
  18.   list-style: none;
  19. }
  20. ul.nav li a {
  21.   text-decoration: none;
  22.   display: block;
  23.   padding: 5px 5px 5px 15px;
  24. }
  25. ul.nav li ul {
  26.   display: none;	/*скрываем вложенные пункты*/
  27. }
  28. ul.nav li:hover {
  29.   background: yellow;
  30. }
  31. /*Выпадающее меню*/
  32. ul.nav {
  33.   position: relative;
  34.   background: #B3B3FF;
  35.   height: 30px;
  36.   width: 600px;
  37. }
  38. ul.nav li:hover > ul {
  39.   background: #D0E0FF;
  40.   border-top: 1px solid white;
  41.   display: block;
  42.   width: 600px;
  43.   position: absolute;
  44.   top: 30px;
  45.   left: 0;
  46. }

Вот что получиться в итоге демка.

горизонтальное выпадающее меню

Многоуровневое горизонтальное выпадающее меню

Созданное в предыдущем пункте меню также может быть многоуровневым но выглядит оно при этом не очень. На мой взгляд многоуровневое меню должно открываться следующим образом - первый уровень вниз остальные вправо. Здесь, в отличии от предыдущего горизонтального меню, вложенные пункты позиционируем относительно родительского пункта и задаём для них ширину. Ширина нам нужна для второго и последующих уровней вложенности. В этом меню мы возьмём понемногу от предыдущих и немного добавим нового.

  1. /*Горизонтальное выпадающее меню a*/
  2.  
  3. body{
  4.   background: #DCDCDC;
  5. }
  6.  
  7. /* Блок меню*/
  8. ul{
  9.   margin: 0;
  10.   padding: 0;
  11. }
  12. ul.nav li {
  13.   background: #B3B3FF;
  14.   border-right: 1px solid #FFFFFF;
  15.   float: left; /*делаем меню горизонтальным*/
  16.   height: 30px;
  17.   list-style: none;
  18. }
  19. ul.nav li a {
  20.   text-decoration: none;
  21.   display: block;
  22.   padding: 5px 5px 5px 15px;
  23. }
  24. ul.nav li ul {
  25.   display: none;	/*скрываем вложенные пункты*/
  26. }
  27. ul.nav { /*задаём высоту и ширину меню*/
  28.   background: #B3B3FF;
  29.   height: 30px;
  30.   width: 600px;
  31. }
  32.  
  33. /*Выпадающее меню*/
  34.  
  35. ul.nav li:hover {
  36.   background: yellow;
  37.   position: relative;
  38. }
  39. ul.nav li:hover > ul {
  40.   border-top: 1px solid white;
  41.   display: block;
  42.   position: absolute;
  43.   top: 30px; /*первый уровень меню раскрывается вниз*/
  44.   left: 0;
  45. }
  46. /*Второй и последующие уровни вложенности*/
  47. ul.nav li ul li{
  48.   border-bottom: 1px solid white;
  49.   height: auto;
  50.   width: 150px;
  51. }
  52. ul.nav li:hover ul li ul{
  53.   position: absolute;
  54.   top: 0;
  55.   left: 150px; /*второй и последующие уровни расскрываются вправо*/
  56. }

Вот так будет выглядеть наше многоуровневое меню демка.

Горизонтальное многоуровневое меню

оценить статью: 
Средняя: 4.9 (42 оценок)

Комментарии

25
Аватар пользователя Юрий

Юрий ср, 04/02/2014 - 16:35

Спасибо огромное! 
Задолбался я иcкать решение простое до нельзя, что бы было только нужное и больше ничего лишнего. 
А то раздуют css непонятно чем. Здесь же все просто и локанично... 

СпасибО! 

Аватар пользователя Надежда Давыдова

Надежда Давыдова сб, 04/12/2014 - 11:54

Интересно, а для Вордпресс такое решение не подходит? Довольно просто все изложено, сделать сможет любой. Отличные советы, без лишней "шелухи"!

Аватар пользователя Oleg

Oleg сб, 04/12/2014 - 13:32

HTML + CSS в чистом виде, поэтому должно подойти для любого сайта. Специально писал с минимумом оформления, чтобы не перегружать CSS.

Аватар пользователя Юлия

Юлия вс, 05/04/2014 - 08:57

Очень полезная информация. Когда такое меню хотела реализовать у себя на блоге, то пришлось обращаться к веб-мастеру. А теперь могу сесть и потихоньку реализовать такую задумку сама. Подписалась на Ваш блог. Буду изучать.

Аватар пользователя Oleg

Oleg вс, 05/04/2014 - 09:41

Возникнут вопросы обращайтесь. Чем смогу помогу.

Аватар пользователя Михаил

Михаил сб, 09/20/2014 - 12:28

Что-то мой комментарий не виден - дублирую:

===========
Спасибо, но у меня (под Инт.Экспл-8) меню не выпадает. Т.е. не работает строка "ul.nav li:hover ul {display: block;}"
Подскажите, в чем дело?

Есть пожедания по изложению материала:

-хорошо бы в этой строке (ul.aaaaa li:hover ul {display: block;}) растолковать, какая ее часть отвечает за "выпадение меню", а какая - за скрывание пунктов более глубокого уровня вложенности

-хорошо бы в примерах каждую строку снабжать комментарием, что она делает.

-в частности, неясно, зачем нужна строка "<div class="block-menu">

-перед этой строкой стоят 2 строки, видимо, не относящиеся к делу (<a href="/html">Домой</a><br /> и <a href="/html/drop_down_menu">Посмотреть вертикальное меню</a>). У человека, незнакомого с новым материалом (то есть, как раз для того, для которого вы писали), уходит время на осознание того, что эти строки для выпадающего меню не нужны. Или все-таки нужны?

-в хеддере в вашем примере имеются 3 строки. Из них только одна относится к теме (задает имя ЦСС-файла), а 2 другие - нет. Это также осложняет освоение материала. Тем более, что на моем компьютере такой хеддер вообще приводит к некорректному отображению текста, поскольку мне нужно ставить не  "utf-8", а "Windows-..."

-в примере неясно, что слова "style.css", "block-menu" и "nav" - это не ключевые слова, а названия, задающиеся пользователем. Я выяснял это экспериментально

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

Аватар пользователя Oleg

Oleg сб, 09/20/2014 - 23:50

Самый объёмный коммент!!!
Коментарии проходят только после модерации поэтому вы и не увидели свой коммент сразу.
Постараюсь ответить на всё. Начнём с вопросов зачем здесь это. Таки да две ссылки просочились с рабочего варианта.
Насчёт не корректного отображения текста. Вы смогли прочитать и откоментить эту страницу при том что кодировка у неё такая же как и у примера в посте.
Данный пост не предназначен для абсолютных новичков и был написан по желанию подписчиков. Если объяснять абсолютно всё то нужно будет рассказать про классы и идентификаторы, блоки, позиционирование, псевдоселекторы, каскад и прочее. Довольно большая статья получиться и что самое главное бесполезная.
ul.nav li:hover > ul {display: block;} будет показывать ранее скрытый пункт. Если разбирать по буквам то(здесь параллельно смотрим на код ) при наведении на пункт меню(ul.nav li) сработает :hover и первый вложенный список >ul будет виден за счёт того что значение display сменит значение с none на block.

Аватар пользователя Oleg

Oleg пт, 10/17/2014 - 18:12

Поправил статью с учётом ваших замечаний. Про кодировку честно говоря забыл что виндовс сохраняеи файлы в windows-1251 Тут два варианта или как вы заметили указать форточную кодировку в файле или изменить кдировку файла например в Notepad++.

Спасибо за критику приходите к нам ещё

Аватар пользователя Евгений

Евгений вс, 05/04/2014 - 16:55

Меню некоректно отображается в safari IE Mozila Firefox не подскажите в чем может быть проблема?

Аватар пользователя Oleg

Oleg вс, 05/04/2014 - 23:48

Только что проверил в IE и FireFox всё работает как надо. Можно подробнее в чём проблема

Аватар пользователя Максим

Максим ср, 08/20/2014 - 16:11

попробуйте заменить в head полностью строчку с meta на <meta http-eqiv="Content-type" content="text/html;charset="utf-8">

Аватар пользователя Алексий

Алексий вс, 10/12/2014 - 01:45

Все понятно, но если сделать меню справа в блоке, а выпадающие пункты влево (далее код) :

<html>
<head>
<style>

ul, li {
    margin:0;
    padding:0;
    list-style-type:none; 
}
 

#menu {
    display:block;
    float: right;
        
}
 

#menu > li {
    display:inline-block;
    position:relative;
}
 

#menu > li > ul {
    display:none; 
}
#menu > li > ul > li > ul {
    display:none;
}
 

#menu > li:hover > ul {
    display:block;
    float:left;
}
#menu > li > ul > li:hover > ul {
    display:block;
    float:left;
}

</style>
</head>
<body>
<ul id="menu">
    <li><a href="#">МЕНЮ</a>
        <ul>
            <li><a href="#">Раздел1</a></li>
            <li><a href="#">Раздел2</a></li>
            <li><a href="#">Раздел3</a>
             <ul>
            <li><a href="#">Подраздел1</a></li>
            <li><a href="#">Подраздел2</a></li>
            <li><a href="#">Подраздел3</a></li>
            <li><a href="#">Подраздел4</a></li>
            <li><a href="#">Подраздел5</a></li>
            <li><a href="#">Подраздел6</a></li>
            <li><a href="#">Подраздел7</a></li>
        </ul>
        </li>
        </ul>
    </li>
  </ul>
</body>
</html>

, то при наведении на раздел 3 выпадает список с подразделами, однако пункты раздел 1 и раздел 2 тоже уезжают влево на уровень подразделов. Как не бился не могу исправить...

Аватар пользователя Oleg

Oleg вс, 10/12/2014 - 19:29

Дело в том что при срабатывании :hover вложенным пунктам присваивается свойство float:left и как следствие подразелы прижимаются к левой границе а с права их обтекает раздел. это приводит к увеличению ширины блока меню. Смотрим дальше. К пунктам разделов также применено float:left следовательно они прижимаются  к левой границе, но после раскрытия подпунктов она сдвинулась влево соответственно и пункты также сдвигаются влево.

Если открывать меню влево применяя float то нужно быть готовым к тому что вся вёрстка сдвинется влево. Это не произойдёт если делать выпадающее меню через позиционирование как описано в статье.

 

Аватар пользователя serg_rc

serg_rc пн, 01/12/2015 - 14:40

Уважаемый OLEG, подскажите - можно-ли сделать так, чтобы после выбора какого-то пункта подменю все "выпавшие" подменю сворачивались и оставался только самый верхний уровень ?

Аватар пользователя Oleg

Oleg пн, 01/12/2015 - 21:25

Описание в статье меню сворачиваются при клике или если убрать курсор. Если Вы имеете ввиду менюшки которые разворачиваются по клику то здесь нужен Javascript и это отдельная тема о которой расскажу в одной из ближайших статей.

Если же вас интересует чистый HTML/CSS то можно попробовать через инпуты но это больше похоже на шаманство и на "чистый" ни как не тянет.

Аватар пользователя serg_rc

serg_rc ср, 01/14/2015 - 22:45

Да в том-то и дело, что сворачивается меню, описанное в статье (по крайней мере то, которое в демке) только если убрать курсор. А в том случае, когда кликаешь по какому-то пункту, но курсор не сдвигаешь - с меню ничего не происходит, оно так и остается развернутым. В своем проекте я частично решил проблему - меняю css-свойство visibility: visible/hidden туда-сюда. Частично потому, что нормально это работает только в браузерах на WebKit. В Mozilla и IE меню исчезает и снова появляется, если не сдвигать курсор с места. Я просмотрел много вариантов меню - и пока не нашел ниодного варианта, устроившего-бы меня - чаще всего после выбора пункта меню происходит переход на другую страницу и толгда менб естественно пропадает. А если перехода на новую страницу нет после выбора пункта меню так и остается, пока не сдвинешь курсор за его пределы..

Аватар пользователя Oleg

Oleg чт, 01/15/2015 - 16:55

На мой взгляд единственный выход это Javascript.  Например повесить на клик добавление к пункту меню ID для которого в стилях прописать visibility: hidden. Чтобы вернуть меню в исходное состояние удаляем добавленный ID после того как пользователь уберёт курсор и произойдёт событие mouseout

Аватар пользователя Puncher

Puncher сб, 10/22/2016 - 21:41

Спасибо, очень толковая статья! Наконец-то попал на нормальную статью и смог всё настроить! Само меню немного изменил (можете посмотреть у меня на блоге), то сама идея ваша. Ещё раз спасибо, а то все такую ерунду нерабочую пишут.

Аватар пользователя Сергей

Сергей чт, 11/17/2016 - 12:28

Здравствуйте! Спасибо большое за статью! У меня тоже возник такой вопрос: В случае когда много уровней то последние списки вылазят за пределы окна. Как сделать чтобы при достижении правой границы окна, следующий уровень перешол как бы на новую строку.
Вот скриншот: http://joxi.net/5mdz8aMClznWA1.
И ещё как сделать чтобы списки были одинковой высоты. Если высота какого-то списка будет больше чем у остольных, то чтобы и остальные списки применили такую высоту. У li:hover я задал и свойство z-index: 2 чтобы отображались поверх второго блока. Спасибо! Жду Вашего ответа!

Аватар пользователя Oleg

Oleg чт, 11/17/2016 - 16:00

На вашем месте я бы не стал переносить пункт меню. Для пользователя не очевидно что новый подпункт открывается в другом месте. Ещё один момент. Для клика на этот пункт ему придётся перевести курсор, hover перестанет работать меню свернётся. Я бы на вашем месте сделал первый уровень открывающимся вниз, между основными пунктами меню.

Чтобы списки подстраивались по высоте... Даже не знаю как такое сдеать на css

Аватар пользователя Сергей

Сергей чт, 11/17/2016 - 16:24

Спасибо за ответ!

Аватар пользователя ezdun

ezdun вт, 11/29/2016 - 11:43

Подскажите, пожалуйста, как изменить цвет текста в вертикальном меню?

Аватар пользователя Oleg

Oleg вт, 11/29/2016 - 21:05

за цвет текста отвечает свойство color. Добавьте его для ul.nav li a

  1. ul.nav li a {
  2.   color:'здесь вписываем цвет';
  3. }

 

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