Вертикальное меню выпадающее меню на css: Вертикальное меню на CSS с выпадающим подменю по клику на плюсик


27.02.1973 Facebook Twitter LinkedIn Google+ Разное


Содержание

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

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

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

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

<ul>
  <li><a href="#">пункт 1</a>
    <ul>
      <li><a href="#">пункт 1.1</a></li>
      <li><a href="#">пункт 1.2</a></li>
    </ul>
  </li>
  <li><a href="#">пункт 2</a>
    <ul>
      <li><a href="#">пункт 2.
1 многа букаф</a></li> <li><a href="#">пункт 2.2</a> <ul> <li><a href="#">пункт 2.2.1</a></li> <li><a href="#">пункт 2.2.2</a></li> </ul> </li> </ul> </li> <li><a href="#">пункт 3</a></li> <li><a href="#">пункт 4</a></li> <li><a href="#">пункт 5</a></li> </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 мы переместим вложенные пункты в право на расстояние равное ширине меню. В рассматриваемом способе есть одно ограничение. При позиционировании нам придётся жёстко задать ширину. С другой стороны вертикальное меню размещается в сайдбаре ширина которого заранее определена, поэтому привязка к ширине не должна вызвать проблем.

/* Вертикальное выпадающее меню*/
body{
  background: #DCDCDC;
}
/*блок меню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border: 1px solid #FFFFFF;
  list-style: none;
  width: 150px;         /*ширина блока меню*/
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}

/*Выпадающее меню*/

ul.nav li:hover {
  /* позиционирование вложенных элементов
   * будет расчитыватьться относительно
   * родительского элемента
   */
  position: relative;
  background: yellow;
}
ul.nav li:hover > ul {
  display: block;
}
ul.nav li:hover ul{
  position: absolute;
  top: 0;       /*Задаём координаты для вложенных пунктов*/
  left: 150px; /*меню раскрывается вправо*/
}

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

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

/*Горизонтальное выпадающее меню с одним уровнем вложенности*/

body{
  background: #DCDCDC;
}

/* Блок меню*/

ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border-right: 1px solid #FFFFFF;
  float: left; /*делаем меню горизонтальным*/
  height: 30px;
  list-style: none;
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}
ul.nav li:hover {
  background: yellow;
}
/*Выпадающее меню*/
ul. nav {
  position: relative;
  background: #B3B3FF;
  height: 30px;
  width: 600px;
}
ul.nav li:hover > ul {
  background: #D0E0FF;
  border-top: 1px solid white;
  display: block;
  width: 600px;
  position: absolute;
  top: 30px;
  left: 0;
}

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

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

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

body{
  background: #DCDCDC;
}

/* Блок меню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border-right: 1px solid #FFFFFF;
  float: left; /*делаем меню горизонтальным*/
  height: 30px;
  list-style: none;
}
ul. nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}
ul.nav { /*задаём высоту и ширину меню*/
  background: #B3B3FF;
  height: 30px;
  width: 600px;
}

/*Выпадающее меню*/

ul.nav li:hover {
  background: yellow;
  position: relative;
}
ul.nav li:hover > ul {
  border-top: 1px solid white;
  display: block;
  position: absolute;
  top: 30px; /*первый уровень меню раскрывается вниз*/
  left: 0;
}
/*Второй и последующие уровни вложенности*/
ul.nav li ul li{
  border-bottom: 1px solid white;
  height: auto;
  width: 150px;
}
ul.nav li:hover ul li ul{
  position: absolute;
  top: 0;
  left: 150px; /*второй и последующие уровни расскрываются вправо*/
}

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

Плавно открывающееся меню с помощью CSS. Вертикальное выпадающее меню на css: как его сделать

От автора: всех приветствую. Почему-то выпадающее меню у веб-мастеров ассоциируется со скриптами, но уже давно сделать такую навигацию можно абсолютно спокойно на чистом css.

Причем такое меню будет ничем не хуже. Сегодня я вам покажу, как создать в css выпадающее меню. Поделюсь, так сказать, рецептом.

План урока и разметка нашего меню

В общем-то, сначала определимся с тем, как будем создавать само меню. В html5 стандартным способом считается создавать его в контейнере nav с помощью маркированного списка. Давайте именно так и сделаем. Маркеры мы позже уберем с помощью css, в меню они нам совершенно не нужны.

Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.

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

Собственно, вот она, вся разметка:

Пункт1

Подпункт

Подпункт

Подпункт

Пункт2

Подпункт

Подпункт

Подпункт

Пункт3

Подпункт

Подпункт

Подпункт

Пункт4

Подпункт

Подпункт

Подпункт

Я понимаю, что она огромна. В этом-то и проблема вложенных списков, что требуется писать много кода. Но учитывайте тот факт, что мы делаем 4 основных пункта и для каждого будет выпадающее меню.

Собственно, я задал всей навигации идентификатор nav, а всем вложенным спискам – стилевой класс second, чтобы понимать, что они являются вложенными.

Отлично, разметка у нас готова, можно посмотреть на результат:

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

Пишем css-стили

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

*{ margin: 0; padding: 0; }

margin : 0 ;

padding : 0 ;

#nav{ height: 70px; } #nav ul{ list-style: none; }

#nav{

height : 70px ;

#nav ul{

list — style : none ;

Теперь нам нужно, собственно, решить, каким будет наше меню. Горизонтальным или вертикальным? Я предлагаю сначала сделать горизонтальное и посмотреть все на его примере. Для этого нужно написать такие стили:

#nav > ul > li{ float: left; width: 180px; position: relative; }

#nav > ul > li{

float : left ;

width : 180px ;

position : relative ;

Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.

Но вы, конечно, можете делать по-другому, в согласии со своей задумкой. Вы можете сделать так, чтобы все пункты были в одну строчку.

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

Для чего позиционирование? Оно необходимо для того, чтобы потом абсолютно позиционировать вложенные списки. Если вы изучали позиционирование в css, то наверняка знаете, что если задать блоку относительное позиционирование, то все элементы в нем можно будет позиционировать абсолютно внутри именно этого блока, а не всего окна браузера.

Тем временем, вот что у нас уже получилось:

По этому скриншоту вы можете уже представить себе примерный результат. Конечно, нам еще предстоит красиво оформить пункты, чтобы глаза не умоляли о пощаде при просмотре навигации.

#nav li a{ display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; } #nav li a:hover{ background: #2F718E; }

#nav li a{

display : block ;

background : #90DA93;

border : 1px solid #060A13;

color : #060A13;

padding : 8px ;

text — align : center ;

text — decoration : none ;

#nav li a:hover{

background : #2F718E;

Во-первых, сами ссылки нужно сделать блочными. Это необходимо для того, чтобы работали внутренние отступы и корректно применялись все свойства. Далее указываю цвета фона, текста, параметры рамки, внутренние отступы и выравнивание текста по центру. Наконец, отменяю подчеркивание ссылок.

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

Заметьте, что в данном случае мы не использовали знак >, поэтому указанные правила применятся ко всем ссылкам, в том числе и тем, что находятся во вложенных пунктах. Итак, теперь имеем следующее:

Отлично, но ведь вы понимаете, что подпункты не должны быть видно, они должны раскрываться при наведении на нужный пункт. Без этого наше меню похоже на таблицу. Что ж, самое время спрятать вложенные пункты.

#nav li .second{ display: none; position: absolute; top: 100%; }

#nav li . second{

display : none ;

position : absolute ;

top : 100 % ;

Во-первых, скрываем полностью вложенные списки. Во-вторых, задаем им абсолютное позиционирование и координату top: 100%. Это означает, что выпадающее меню будет отображаться четко под основным пунктом, которому принадлежит, четко под 100% высоты этого пункта.

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

Реализуем выпадение

Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:

#nav li:hover .second{ display: block; }

#nav li:hover .second{

display : block ;

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

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

#nav li li{ width: 180px; }

#nav li li{

width : 180px ;

Все, проблема решена:

Все работает отлично. При наведении на основной пункт появляется соответствующее ему выпадающее меню. Если убрать курсор в сторону – оно пропадает. Если перевести курсор на сами вложенные пункты, то можно будет по ним кликнуть и перейти в нужный раздел сайта. Таким образом, мы сделали с вами очень простое и легкое выпадающее меню абсолютно без скриптов.

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

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

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

Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:

#nav li .second{ display: none; position: absolute; left: 100%; top: 0; }

#nav li .second{

display : none ;

position : absolute ;

left : 100 % ;

top : 0 ;

То есть необходимо прописать две координаты вместо одной. Во-первых, в случае с горизонтальной навигацией я говорил, что по задумке пункты вложенных меню должны отображаться под основными пунктами. В случае с вертикальным меню это не подходит – пункты должны отображаться сбоку.

Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.

Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.

Горизонтальное меню с несколькими уровнями

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

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

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

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

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

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

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

В частности, неясно, зачем нужна строка «

Большой обзор красивых многоуровневых меню с codepen / Хабр

Хабр, привет!

На Сodepen появляется много хороших решений от разных специалистов, и я считаю, что лучшие из них нужно собирать в одном месте. Поэтому 2 года назад начал сохранять у себя на компьютере интересные скрипты по разным тематикам.

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

В этом обзоре мы рассмотрим многоуровневые меню.

Flat Horizontal Navigation

Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy

Material Nav Header w/ Aligned Dropdowns

Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
 
Smooth Accordion Dropdown Menu

Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ
 
Pure CSS Dark Inline Navigation Menu

Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
 
Pure CSS3 Mega Dropdown Menu With Animation

Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs
 
CSS3 Dropdown Menu

Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg
 
Simple Pure CSS Dropdown Menu

Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW
 
Bootstrap 3 mega-dropdown menu

Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
 
Flat Navigation

Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN
 
3D nested navigation

Горизонтальное меню с очень крутой анимацией без js!
http://codepen.io/devilishalchemist/pen/wBGVor
 
Responsive Mega Menu — Navigation

Горизонтальное адаптивное меню.  Выглядит неплохо, но мобильная версия немного «хромает». Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc
 
Pure Css3 Menu

Оригинальное меню. С простым и чистым кодом без js. Применяйте для «вау» эффектов.
http://codepen.io/Sonick/pen/xJagi
 
Full CSS3 Dropdown Menu

Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi
 
Css3 only dropdown menu

Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb
 
Dropdown Menus

Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa
 
Pure CSS DropDown Menu

Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH
 
Pull Menu — Menu Interaction Concept

Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ
 
Make Simple Dropdown Menu

Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb
 
Pure CSS dropdown [work for mobile touch screen]

Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR
 
Dropdown Menu

Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq
 
CSS 3 Dropdown Menu

Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR
 
KVdKQJ (автор очень долго думал над названием)

Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ
 
CSS3 Menu Dropdowns (особенное решение)!

Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz
 
П. С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.

Вертикальное выпадающее меню для блога|Простые советы.

<style type=»text/css»>  <!—

/* CSS Document */

ul#menu-v,

ul#menu-v li,

ul#menu-v ul {

  margin: 0;

  border: 0 none;

  padding: 0;

  width: 260px;

  list-style: none;

}

ul#menu-v:after {

  clear: both;

  display: block;

  font: 1px/0px serif;

  content: «.»;

  height: 0;

  visibility: hidden;

}

ul#menu-v li {

  float: left;

  display: block !important;

  display: inline;

  position: relative;

  border:#ddcca2 1px solid;

}

ul#menu-v li ul li {

border:none;

border-bottom:#991500 2px solid;

}

/* Root Menu */

ul#menu-v a {

  padding: 0 6px;

  display: block;

  background: #ebe0c7;/цвет коробки/

  color: #991500;/цвет названия рубрик/

  font: bold 12px/28px Verdana, Arial;

  text-decoration: none;

  height: auto !important;

  height: 1%;

}

ul#menu-v a:hover,

ul#menu-v li:hover a,

ul#menu-v li. iehover a {

  background: #991500;

  color: #ebe0c7;

}

/* 2nd Menu */

ul#menu-v li:hover li a,

ul#menu-v li.iehover li a {

  background: #ebe0c7;

  color: #991500;

  border:#ddcca2 1px solid;

}

ul#menu-v li:hover li a:hover,

ul#menu-v li:hover li:hover a,

ul#menu-v li.iehover li a:hover,

ul#menu-v li.iehover li.iehover a {

  background: #991500;

  color: #ebe0c7;

  border:#ebe0c7 1px solid;

}

ul#menu-v ul,

ul#menu-v ul ul,

ul#menu-v ul ul ul {

  display: none;

  position: absolute;

  top: 0;

  left: 240px;

}

ul#menu-v li:hover ul ul,

ul#menu-v li:hover ul ul ul,

ul#menu-v li.iehover ul ul,

ul#menu-v li.iehover ul ul ul {

  display: none;

}

ul#menu-v li:hover ul,

ul#menu-v ul li:hover ul,

ul#menu-v ul ul li:hover ul,

ul#menu-v li. iehover ul,

ul#menu-v ul li.iehover ul,

ul#menu-v ul ul li.iehover ul {

  display: block;

}

—>  </style>

<ul id=»menu-v»>

    <li><a href=»#»>Вертикальное</a>

        <ul>

          <li><a href=»#»>Ссылка 1</a></li>

          <li><a href=»#»>Ссылка 2</a></li>

        </ul>

    </li>

    <li><a href=»#»>CSS</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>

        </ul>

    </li>

    <li><a href=»#»>Меню</a>

        <ul>

          <li><a href=»#»>Ссылка 1</a></li>

          <li><a href=»#»>Ссылка 2</a></li>

        </ul>

    </li>

</ul>

                                                                                                                                                         

«Умное» раскрывающееся вертикальное меню на jquery за 2 минуты

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

Допустим, у нас есть такое праймари меню:

  • Топ 100
  • Графика
    • Абстракция
    • Кино
    • Компьютерная графика

Задача.
При нажатии на пункт меню, который не имеет подменю, должна открываться новая страница (как в обычном меню). А если пункт меню имеет подменю, то страница не должна открываться, а должно выезжать подменю. Надо написать «умный» скрипт, который будет за этим следить.

Решение
Сначала выводим в нужное нам место праймари меню. Можно через блок, можно через page.tpl.php, кому как удобнее. Я обычно вывожу вторым способом:

<?php if ($primary_links): ?>
  <div id = "menu"><?php print menu_tree('primary-links'); ?></div>
<?php endif; ?>

В общем, вывели меню. Для него подойдёт следующий css:

div#menu ul {
  padding: 0;
}
 
div#menu ul li {
  display: block;
  border-bottom: 1px solid #211f1b;
  margin-bottom: 5px;
  padding: 0;
}
 
div#menu ul li a {
  color:#211F1B;
  display:block;
  font-family:Verdana;
  font-size:18px;	
  font-weight:bold;
  padding:5px 0;
}
 
div#menu ul li a:hover,
div#menu ul li a. active,
div#menu ul li a:active {
  color: #005693;
  text-decoration: none;	
  outline: none;
}
 
div#menu ul ul {
  display: none; /* собственно, самое важное :) */
}	
 
div#menu ul ul li {
  border: none;
  margin: 0;
}
 
div#menu ul ul li a {
  font-size: 11px;	
  padding-left: 20px;
}
 
div#menu ul ul li a:hover,
div#menu ul ul li.active-trail a {
  background: #b7b7b7;
  color: #fff;
}
 
div#menu ul ul li.active-trail ul li a {
  background: #fff;
  color: #000;
}

Теперь осталось создать скрипт, который будет раздвигать пункты меню, имеющие подменю. Создаём файл menu.js и добавляем туда такой текст:

$(document).ready(function() {
  $('div#menu>ul>li>a').click(function() {
    if ($(this).parent().find('ul').length) {
      $(this).parent().find('ul').slideToggle(200);				
      return false;
    }
  });
});

Подключаем наш скрипт в шаблон. Чистим кэш. Проверяем, наслаждаемся.

Таким же образом можно сделать и горизонтальное меню, слегка поменяв css.

Создание меню html / css

Основы верстки

Чаще всего меню создается на основе не упорядоченных списков ul. В каждый пункт li вкладывается гиперссылка a.

Можно создавать меню и на основе блоков div, таблиц table или списков определений dl.
Но традиционной является конструкция ul.

Код простейшего меню будет выглядеть так:

<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>
</ul>
×
Примечание

В процессе разработки удобно указывать адрес гиперссылки — #/. Во-первых, она никуда не ведет, а во-вторых — не происходит перехода к началу страницы.

Целью гиперссылки будет соответствующая страница вашего сайта или внешняя ссылка. Адрес внутренней страницы может быть как абсолютным, так и относительным. Внешней ссылки — только абсолютный. (Если забыли — смотрите Абсобютные и относительные ссылки).

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

Поэтому предварительно нужно создать файл, например my-menu.css, и подключить его. 

<!-- Подключение таблицы стилей -->
 
<!DOCTYPE html>
<html>
<head>
     ...
     <title>Создание меню</title>
     <link rel="stylesheet" href="css/MAIN.css" type="text/css" />
     <link rel="stylesheet" href="css/my-menu.css" type="text/css" />
     ...
</head>
<body>
...
</body>
</html>

Позже код можно будет перенести в общий файл, а этот удалить (или отключить).

Как прописываются стилевые правила для меню

Необходимо создать классы, и прописывать стили уже для них. Потому что если задавать стили непосредственно для тегов, например:

/* Не желательно! */
ul li a {color: #f00;}

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

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

Например, можно создать класс .menu_color, который будет отвечать за цветовое оформление. В дальнейшем это значительно упростит работу по изменению цветового оформления меню.

Каким тегам нужно присваивать классы

Хороший вопрос. Для начала, неплохо создать дополнительный контейнер-обертку и присвоить класс ему.

Да, это дополнительная разметка, но оформлять меню будет гораздо удобнее. Кроме того, если в качестве контейнера использовать не div, а nav, то верстка будет более семантической (осмысленной) и удобной для поисковых систем (ПС), что является несомненным плюсом. Второй класс присваиваем тегу ul.

<nav>
  <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>
  </ul>
</nav>

Почему именно так?

Присвоение класса .menu_color тегу nav дает больше возможности для оформления, чем присовение его тегу ul, а класс .my_menu отвечает только за разметку меню и никакого отношения к содержащему контейнеру иметь не должен.

При этом всегда надо держать в уме, что навигационный блок находится в определенном внешнем блоке сайта и его местоположение и некоторые свойства, например связанные с внешними отступами или направлением выпадения подменю (подробнее об этом в материале «Выпадающее меню») зависят от внешних классов глобальной разметки сайта.

Какие имена должны быть у классов

Осмысленные. В идеале, любое имя класса должно давать представление об объекте и назначении. В приведенном выше примере используются классы nav.menu_color и ul.my_menu.

Первый отвечает за цветовое оформление всех элементов и, в тоже время, дает понять что относится к меню.
Второй идентифицирует список как собственно меню.

×
Внимание!

Старайтесь выбирать имена для классов не только внятные, но и уникальные. В противном случае они могут конфликтовать с уже существующими классами.

Имеено по-этому я выбрал класс .my_menu, так как на сайте уже есть класс .menu со своими стилями. 

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

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

Например, за цветовое оформление у нас отвечает класс .menu_color

/* === Группа цветового оформления === */
 
/* Цвет фона менд */
.menu_color {
  background: gray;
}
/* Оформление пункта меню */
.menu_color > ul > li > a {
  background: transparent;
  color: #f5f5f5;
}
...
/* === Группа разметки основного меню === */ 
 
/* Сброс и установка стилей по умолчанию */
.my_menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Разметка для пункта меню */
.my_menu li a {
  display: block;
  margin: 0;
  padding: 12px 20px;
  text-decoration: none;  
}

Т.е. все стили, определяющие цветовое оформление того или иного элемента меню, должны быть привязаны к классу .menu_color, а стили отвечающие за разметку — соответственно .my_menu.

При необходимости, для тега nav также можно добавить дополнительный класс, чтобы не залезать на территорию «цветового оформления» . ..

Обычно выводится в одной из боковых колонок сайта. Чаще выполняет функции дополнительной навигации, реже — главное меню сайта.

Простое вертикальное меню

Исходный html-код меню будет выглядеть так:

<nav>
  <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>
  </ul>
</nav>

Кроме основных классов, рассмотренных в предыдущем материале, добавлен класс li.active для активного пункта (ссылка на текущую страницу).

Сброс и установка стилей по умолчанию

Файл my-menu.css

/* Убираем маркеры и отступы */
.my_menu {
  list-style:none;
  margin:0;
  padding:0;
}
.my_menu li {
  margin:0;
  padding:0;
  position:relative;
}
/* Общие правила для пунктов меню */
. my_menu li a {
  display:block;
  margin:0;
  padding:12px 20px;
  text-decoration: none;
}
/*Наведение на активный пункт меню - курсор обычный */
.my_menu li.active > a:hover {
  cursor: default;
}

Цветовое оформление

×
Примечание

На практике не обязательно применять все стили, достаточно лишь некоторые. Например при наведении иногда достаточно изменение только цвета ссылки или добавить подчеркивание.

/* === Цветовое оформление menu_color === */
.menu_color {
  background:#555;
}
/* Оформление пункта */
.menu_color > ul > li > a {
  color:#999;
  background: rgba(0, 0, 0, 0);
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.1);
}
/* Активный пункт */
.menu_color > ul > li.active > a,
.menu_color > ul > li.active > a:hover {
  color:#fff;
  background:rgba(0, 0, 0, 0.4);
}

Пояснения:

  • Если возникнет необходимость к определенным пунктам меню добавить подпункты, т. е. сделать меню многоуровневым, то конструкция .menu_color > ul > li > a позволит ограничить применение стилей только к пунктам меню первого уровня. Для подменю можно будет прописать другие стили оформления.
  • Использование прозрачности при задании цвета фона — background: rgba(0, 0, 0, 0.1). Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона меню, фон активного пункта и подсветка пунктов при наведении изменятся автоматически. Впрочем, ничто не мешает вам задать понравившиеся цвета явно. 
×
Замечание

Цвет фона меню задавать не обязательно, если он наследуется от родительского блока.

Разделители пунктов

/* Разделитель пунктов меню */
.menu_color > ul > li + li > a {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

Повторяем тот же трюк с использованием rgba. Цвета для верхней границы и тени заданы полупрозрачными — черный 15% прозрачности и белый 10% соответственно.

Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона, то цвет рамки и тени изменится автоматически!

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

Изначально любое меню нужно создавать как многоуровневое!

В последние годы реально-многоуровневые меню уходят в прошлое. Двух уровней, обычно, вполне достаточно, остальные — оформляются отдельным дополнительным меню.

HTML-код 2-х уровневого меню:

<nav>
    <ul>
        <li><a href="#/">пункт 1</a></li>
        <li><a href="#/">родительский пункт 2</a>
            <ul>
                <li><a href="#/">дочерний подпункт 1</a></li>
                <li><a href="#/">дочерний подпункт 2</a></li>
            </ul>
        </li>
        <li><a href="#/">пункт 3</a></li>
        <li><a href="#/">пункт 4</a></li>
        <li><a href="#/">пункт 5</a></li>
    </ul>
</nav>

Добавлены классы li. parent — родительский тег, содержащий подменю, и ul.sub-menu — вложенный список выпадающего меню.

Цветовое оформление

/* Оформление sub-menu */
.menu_color .sub-menu {
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
}
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
  color: #555;
  background: rgba(0, 0, 0, 0);
}
/* Офррмление подпунктов при наведении */
.menu_color .sub-menu li a:hover{
  color: #fff;
  background: #555;
}
/* Разделитель для пунктов sub-menu */
.menu_color .sub-menu > li + li > a {
  border-top: 1px solid #fff;
  box-shadow: 0 -1px 0 #ddd;
  padding-left: 40px  /* Добавляем отступ для подпунктов */
}

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

Позиционирование и скрытие

Позиционирование осуществляется относительно родительского li.parent. (Именно для этого при сбросе и установке для него было задано position: relative;)

/*Общие*/
. my_menu .sub-menu {
  display: none;
  position: absolute;
  top: 0;
  min-width: 200px;
  z-index: 9999;
} 

Вывод

В зависимости от расположения основного меню (левая/правая боковая колонка), подменю может выпадать как вправо, так и влево. Поэтому для определения стилевых правил используем класс родительского блока .sidebar_left (В исходном html-коде класс не указан, т.к. к коду меню отношения не имеет). 

/* Вывод */
.my_menu .parent:hover .sub-menu {
  display: block;
  top: 4px;
}
/* со смещением вправо */
.sidebar_left .my_menu .parent:hover .sub-menu {
  left: 100%;
  margin-left: -10px;
}
×
Информация

Если у родительского блока нет класса, или он применяется как к правой так и к левой колонкам — нужно этот класс добавить к тегу nav.menu_color.sidebar_left.

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

/* Смещение влево */
.sidebar_right .my_menu .parent:hover .sub-menu {
  right: 100%;
  left: auto;
  margin-right: -5px;
}

Простая анимация

Что мы будем анимировать. В данном случае, эффекты довольно простые:

Переопределение существующих стилей:

/* Оформление пункта */
.menu_color >  ul >  li >  a {
  color: #999;  
  background: rgba(0, 0, 0, 0);
 
  /* добавляем код */
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
 
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
   color: #555;
   background: rgba(0, 0, 0, 0);
 
  /* добавляем код */
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
 

А вот с плавным появленем подменю проблема …

Дело в том, что использовать display: none; для того чтобы скрыть подменю нельзя — анимация работать не будет. Поэтому рассмотрим другой способ.

Скрытие подменю. Вариант 2

Альтернативным способом является смещение меню в исходном состоянии за пределы экрана + полная прозрачность.

/* Переопределение sub-menu*/
.my_menu .sub-menu {
  display: block; /* переопределено */
  position: absolute;
  top: 0;
  width: 200px;
  z-index: 9999;
 
  /* Добавить */
  opacity: 0;
  -webkit-transition: opacity .5s, top .7s;
  -moz-transition: opacity .5s, top .7s;
  -o-transition: opacity .5s, top .7s;
  transition: opacity .5s, top .7s;
}
/* Смещение за экран */
.my_menu .sub-menu {
  left: -3000px;
}
/* Переопределяем эффект отображения при наведении*/
.my_menu .parent:hover > .sub-menu {
  display: block;
  top: 4px;
 
  /* Добавить */
  opacity: 1;
}

Раздвижное меню-аккордеон 

×
Несколько слов вступления

В данном примере рассмотрена технология создания аккордеон-меню, раскрывающегося по hover.

Я бы не рекомендовал без необходимости использовать такое меню на сайте. Элементы страницы не должны жить своей жизнью (хлопающие как простыни на ветру подменю, раскрывающиеся аккордеоны, если его не аккуратно задеть мышкой …

Аккордеон должен раскрываться по click, а это уже JS. А рассмотрение javascript выходит за рамки раздела HTML/CSS…

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

Добавлен класс my_accordion к классу родительского контейнера, а класс .sub-menu заменен на .sub-accordion-menu. Можно было бы не заменять, а просто переопределить, но это усложнит пример для понимания.

<nav>
    <ul>
        <li><a href="#/">пункт 1</a></li>
        <li><a href="#/">родительский пункт 2</a>
            <ul#/">дочерний подпункт 1</a></li>
                <li><a href="#/">дочерний подпункт 2</a></li>
            </ul>
        </li>
        <li><a href="#/">пункт 3</a></li>
        <li><a href="#/">пункт 4</a></li>
        <li><a href="#/">пункт 5</a></li>
    </ul>
</nav>
/* === Группировка классов === */
 
/* Убираем маркеры и отступы */
. my_menu, .sub-menu, 
.sub-accordion-menu {
  list-style:none;
  margin:0;
  padding:0;
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover,
.my_menu .parent .sub-accordion-menu li a:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.1);
}
/* Разделитель пунктов меню */
.menu_color > ul > li + li > a,
.menu_color .sub-accordion-menu li > a {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}
 
 

После этого добавим стили, для закрытого и раскрытого аккордеона:

/* === Закрытый ===*/
.sub-accordion-menu {
  display: block;
  position: static;
  width: auto;
  overflow: hidden;
  border: none;
  margin: 0!important; 
  max-height: 0;   /* Скрываем выпадающее подменю */
  transition: max-height 1s;  /* Задержка раскрытия */
}
/* === Открытый ===*/
.sub-accordion-menu {
  max-height: 1000px;
}
.sub-accordion-menu > li > a {
  padding-left: 40px;  /* Добавляем отступ для подпунктов */
}

Примечание.
Почему было использовано свойство max-height, а не height? Потому что мы не знаем высоту раскрывающегося подменю, а при использовании значения height: auto — анимация не срабатывает.

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

По структуре горизонтальное меню ни чем не отличается от вертикального, html-код одинаковый. Теоретически, получить горизонтальное меню из вертикального можно заменой/добавлением класса содержащего контейнера.

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

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

За основу возьмем код вертикального выпадающего меню и заменим классы:

<nav>
  <ul>
    <li><a href="#/">punkt 1</a></li>
    <li><a href="#/">dropdown</a>
      <div>
        <ul>
          <li><a href="#/">sub punkt 1</a></li>
          <li><a href="#/">sub punkt 2</a></li>
        </ul>
      <div>
    </li>
    <li><a href="#/">punkt 3</a></li>
    <li><a href="#/">active</a></li>
    <li><a href="#/">punkt 5</a></li>
  </ul>
</nav>

Разметка

/* === Разметка основного меню === */
. hz-bar ul {
 list-style: none;
 margin:0;
 padding:0;
}
.hz_menu > li {
 float: left;
 margin:0;
 padding:0;
 position:relative;
}
.hz_menu li a {
 display:block;
 margin:0;
 padding:15px 20px;
 text-decoration: none;
}
Что было сделано:
  1. Сброс стилей по умолчанию для тега ul
  2. Создание горизонтального меню, путем присвоения тегам li, содержащим пунткы основного меню, свойства float: left
  3. Установка отступов для пунктов меню
Пояснения:

Конструкция .hz_menu > li распространяется только на пункты основного меню и не затрагивает выпадающее, в то время как .hz_menu li a задается для всех пунктов. Некоторые свойства, специфичные для подменю, будут переопределены в дальнейшем.

Разметка выпадающего меню

/* === Разметка выпадающего подменю === */
.dropdown_menu {
 display: block;
 position: absolute;
 left: -3000px;
 top: 100%;
}
. dropdown_menu > ul {
 border: 1px solid;
 margin-top: 10px;  /* отступ от основного меню */
 padding: 10px 1px;
 min-width: 140px;
 opacity: 0;
 transition: opacity .5s; /* анимация прозрачности */
}
.dropdown_menu li a {
 white-space: nowrap; /* если не очень длинные заголовки */
 z-index: 9999;
 padding: 10px 20px;
}
.parent_dropdown:hover .dropdown_menu {
 left: 0px;
}
.parent_dropdown:hover .dropdown_menu ul {
 opacity: 1;
}

Рассмотрим некоторые особенности:

  • Как было видно из html-кода, выпадающее меню обернуто в дополнительный контейнер div.dropdown_menu. Для чего? В принципе, можно вполне обойтись и без него, но эта обертка дает некоторые дополнительные возможности оформления. В частности, возможность задать отступ от основного меню.
    Если задать отступ непосредственно для тега ul без обертки, при перемещении курсора от основного пункта к подпункту hover-эффект прервется и подменю пропадет … Дополнительный контейнер обеспечивает, в данном случае, отсутствие разрыва.
  • Для подпункт определено правило white-space: nowrap. Дело в том что абсолютно позиционированное подменю имеет максимальную ширину родительского пункта, и, соответственно, текст подпунктов будет переноситься на новую строку. Это не очень удобно при коротких названиях основных пунктов.
    Данное правило предотвращает перенос. Как альтернатива (дополнение), минимальная ширина подменю была задана явно.

Оформление

Перед тем как заняться цветовым оформлением, необходимо добавить еще несколько стилевых правил разметки. Я специально перенес их в офомление, чтобы был понятнее смысл.

Если основному контейнеру назанчить цвет фона, то мы его не увидим по одной простой причине:

Теги li, которым присвоено float: left, выпадают из основного потока, их для основного контейнера как-бы не существует, поэтому он «схлопывается» и имеет высоту 0. Соответственно, никакого цветового оформления мы не увидим.

Решение

/* Предотвращаем схлопывание */
.hz-bar:after {
 content: '';
 display: table;
 clear: both;
}

Теперь контейнер будет вести себя более дружелюбно и можно его оформлять

/* === Оформление меню === */
.menu_bordo {
 background: #7D0000;
}
.menu_bordo .hz_menu > li > a {
 color: #DBE6B7;
}
.menu_bordo .hz_menu > li > a:hover {
 color: #fff;
}
.menu_bordo .hz_menu .active a{
 box-shadow: inset 0 15px 15px rgba(0, 0, 0, 0.2);
 color: #fff;
 cursor: default;
}

Здесь все достаточно очевидно. Единственное, cursor: default, следовало бы перенести в разметку, чтобы не привязывать к классу цветового оформления.

Для выделения активного пункта меню была применена тень.

/* === Оформление выпадающего подменю === */
.menu_bordo .dropdown_menu > ul {
 background: #fff;
 border-color: #ddd;
}
.menu_bordo .dropdown_menu > ul > li > a {
 color: #555;
}
.menu_bordo .dropdown_menu > ul > li > a:hover {
 background: #7D0000;
 color: #fff;
}

На этом цветовое оформление можно считать завершенным. Теперь с легкостью можно подкорректировать цветовую гамму, или создать несколько классов для разных вариантов оформления.

Дополнительно

Необязательные стилиевые правила. Первое задает вертикальные разделители между пунктами (аналогично вертикальному меню), второе — дополнительный маркер для родительского пункта.

/* Дополнительно. Разделители пунктов + маркер */
.hz_menu > li + li > a {
 border-left: 1px solid rgba(255, 255, 255, 0.1);
 box-shadow: -1px 0 0 rgba(0, 0, 0, 0.15);
}
.parent_dropdown > a:after {
 display: inline-block;
 padding: 1px 0 0 3px;
 content: "\25BC ";
 font-size: 10px;
 vertical-align: top;
}

Здесь вы можете скачать Код примера горизонтального меню

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

Навигация в виде выпадающего меню может применяться при большом количестве ссылок, для экономии места на странице. Выпадающее вертикальное меню корректно отображается в браузерах Firefox, Opera и Internet Explorer. Автор меню мне неизвестен, поэтому и ссылки на оригинал не имеется.

<!—[if gte IE 5.5]>
<script language=»JavaScript» src=»nav-h.js» type=»text/JavaScript»></script>
<![endif]—>

Скачать JavaScript

<ul>
<li><a href=»index.html»>Главная</a></li>
<li><a href=»templates.html»>Шаблоны, рецепты +</a>
<ul>
<li><a href=»templates.html»>Шаблоны, заготовки +</a>
<ul>
<li><a href=»temp1.html»>Шаблон 1</a></li>
<li><a href=»temp2.html»>Шаблон 2</a></li>
<li><a href=»temp3.html»>Шаблон 3</a></li>
<li><a href=»temp4.html»>Шаблон 4</a></li>
<li><a href=»temp5.html»>Шаблон 5</a></li>
<li><a href=»temp6.html»>Шаблон 6</a></li>
<li><a href=»temp7. html»>Шаблон 7</a></li>
<li><a href=»temp8.html»>Шаблон 8</a></li>
</ul>
</li>
<li><a href=»faq.html»>Рецепты HTML</a></li>
<li><a href=»faq-css.html»>Рецепты CSS</a></li>
</ul>
</li>
<li><a href=»#»>Менюшки +</a>
<ul>
<li><a href=»#»>Вертикальные +</a>
<ul>
<li><a href=»menu1.html»>Вертикальное меню 1</a></li>
<li><a href=»menu2.html»>Вертикальное меню 2</a></li>
<li><a href=»menu3.html»>Вертикальное меню 3</a></li>
<li><a href=»menu4.html»>Вертикальное меню 4</a></li>
<li><a href=»menu5.html»>Вертикальное меню 5</a></li>
</ul>
</li>
<li><a href=»#»>Горизонтальные +</a>
<ul>
<li><a href=»menu6. html»>Горизонтальное меню 1</a></li>
<li><a href=»menu7.html»>Горизонтальное меню 2</a></li>
<li><a href=»menu8.html»>Горизонтальное меню 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=»/gb»>Гостевая книга</a></li>
<li><a href=»submit.html»>Контакт</a></li>
</ul>

ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}

ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: «.»;
height: 0;
visibility: hidden;
}

ul#navmenu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
}

ul#navmenu-v a {
border: 1px solid #FFF;
border-right-color: #527337;
border-bottom-color: #527337;
padding: 0 6px;
display: block;
background: #A2C585;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%;
}

ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li. iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li:hover li a:hover,
ul#navmenu-v li:hover li:hover li:hover a,
ul#navmenu-v li.iehover li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li:hover li:hover li a,
ul#navmenu-v li.iehover li. iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li:hover li:hover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
background: #648B43;
color: #FFF;
}

ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}

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

Введение

 

В этой статье объясняется, как создать вертикальное раскрывающееся меню с помощью CSS и HTML.

 

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

 

Его вывод будет примерно таким:

 

 

Теперь мы увидим процедуру создания такого выпадающего меню.

 

Этап 1

 

Прежде всего, добавьте таблицу стилей и форму или HTML-страницу.

 

Затем на странице HTML или веб-форме .NET добавьте «Div» и назовите его «divMenu».

 

После создания Div нам нужно добавить список элементов и еще один список в этих элементах, поэтому окончательный код будет примерно таким:

  1.     
    •     
    •     
    • Дом1    
    •     
            
      •         
      • Homea
      •     
      •         
      • Домашняя страница
      •     
      •         
      • Homec
      •     
      •     
          
    •         
    •     
    •     
    • Дом2    
    •             
            
      •         
      • Home
      •     
      •         
      • Дом
      •     
      •         
      • Homef
      •     
      •     
    •     
    •     
    • Дом3    
    •             
            
      •         
      • Homeg
      •     
      •         
      • Хомэ
      •     
      •         
      • Хомэй
      •     
      •     
    •     
    •     
    • Главная4
    •     
    •     
    • Главная5    
    •             
            
      •         
      • Homej
      •     
      •         
      • Хомек
      •     
      •         
      • Гомель
      •     
      •     
    •     
    •     
    • Главная6
    •     
        

Этап 2

 

Прямо сейчас ваш код не более чем этот:

 

 

Итак, чтобы он выглядел красиво и интересно, мы внесем изменения в таблицу стилей, которую мы добавили ранее.

 

Добавьте этот код в свою таблицу стилей:

  1. #divMenu, ul, li, li li {  
  2.     маржа: 0;
  3.     заполнение: 0;
  4. }  
  5.    
  6. #divMenu {  
  7.     ширина: 150 пикселей;
  8.     высота: 27 пикселей;
  9. }  
  10.    
  11. #divMenu ул  
  12. {  
  13.      line-height: 25px;
  14. }  
  15.    
  16.     #divMenu li {  
  17.         стиль списка: нет;
  18.         должность: родственник;
  19.         фон: #641b1b;
  20.     }  
  21.    
  22.         #divMenu li li {  
  23.             стиль списка: нет;
  24.             должность: родственник;
  25.             фон: #641b1b;
  26.             слева: 148 пикселей;
  27.             верх: -27px;
  28.         }  
  29.    
  30.    
  31.     #divMenu ul li a {  
  32.         ширина: 148 пикселей;
  33.         высота: 25 пикселей;
  34.         отображение: блок;
  35.         text-decoration: none;
  36.         text-align: center;
  37.         семейство шрифтов: Georgia,’Times New Roman’, serif;
  38.         color:#ffffff;
  39.         border:1px solid #eee;
  40.     }  
  41.    
  42.     #divMenu ul ul {  
  43.         позиция: абсолютная;
  44.         видимость: скрыта;
  45.         верх: 27 пикселей;
  46.     }  
  47.    
  48.     #divMenu ul li:hover ul {  
  49.         видимость: видимый;
  50.     }  
  51.    
  52.     #divMenu li:hover {  
  53.         цвет фона: #945c7d;
  54.     }  
  55.    
  56.     #divMenu ul li:hover ul li a:hover {  
  57.         цвет фона: #945c7d;
  58.     }  
  59.    
  60.     #divMenu a:hover {  
  61.         начертание шрифта: жирный;
  62.     }

Здесь я использовал идентификатор

, другими словами «divMenu».

 

Теперь все изменится, и ваша продукция будет совсем другой и интересной.

 

Выход

 

Решено с помощью CSS! Выпадающие меню | CSS-трюки

CSS становится все более мощным, и благодаря таким функциям, как сетка CSS и настраиваемые свойства (также известные как переменные CSS), мы наблюдаем появление действительно креативных решений.Некоторые из этих решений сосредоточены не только на том, чтобы сделать Интернет красивее, но и на том, чтобы сделать его более доступным и улучшить стилизацию доступных интерфейсов. Я определенно здесь для этого!


Распространенным шаблоном UI , который мы видим в Интернете, являются раскрывающиеся меню. Они используются для отображения связанной информации по частям, не перегружая пользователя кнопками, текстом и параметрами. Где-то мы часто видим их внутри заголовков или областей навигации на веб-сайтах.

Поиск в Google по запросу «раскрывающееся меню» дает множество примеров.

Давайте посмотрим, сможем ли мы создать одно из этих меню с помощью одного лишь CSS.Мы создадим список ссылок в навигационном компоненте, например:

.
  <навигационная роль="навигация">
  <ул>
    
  • Один
  • Два
  • Три
  • Теперь предположим, что нам нужно выпадающее подменю на втором элементе навигации. Мы можем сделать то же самое здесь и включить список ссылок в этот элемент списка:

      <навигационная роль="навигация">
      <ул>
        
  • Один
  • Два <ул>
  • Sub-1
  • Sub-2
  • Sub-3
  • Три
  • Теперь у нас есть двухуровневая система навигации. Чтобы содержимое было скрыто и отображено, когда мы хотим, чтобы оно было видимым, нам нужно применить некоторые CSS. Все свойства стиля были удалены из следующего примера для ясности взаимодействия:

      ли {
     дисплей: блок;
     продолжительность перехода: 0,5 с;
    }
    
    ли: наведите {
      курсор: указатель;
    }
    
    уль ли уль {
      видимость: скрытая;
      непрозрачность: 0;
      положение: абсолютное;
      переход: все 0,5 с легкости;
      поле-верх: 1re;
      слева: 0;
      дисплей: нет;
    }
    
    ул ли: наведите курсор > ул,
    уль ли уль:наведите {
      видимость: видимая;
      непрозрачность: 1;
      дисплей: блок;
    }
    
    уль ли уль ли {
      ясно: оба;
      ширина: 100%;
    }  

    Теперь раскрывающееся меню подменю скрыто, но будет отображаться и становиться видимым при наведении указателя мыши на соответствующий родительский элемент на панели навигации.С помощью стиля ul li ul у нас есть доступ к этому подменю, а с помощью стиля ul li ul li у нас есть доступ к отдельным элементам списка внутри него.

    Проблема

    Это начинает выглядеть так, как мы хотим, но мы еще далеки от завершения. Веб-доступность — ключевая часть разработки вашего продукта, и прямо сейчас у вас будет прекрасная возможность поднять эту тему. Добавление role="navigation" — хорошее начало, но для того, чтобы панель навигации была доступна, нужно иметь возможность перемещаться по ней (и фокусироваться на нужном элементе в разумном порядке), а также иметь экран читатель точно читает вслух то, на что направлено внимание.

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

    Теперь важно отметить, что теоретически вы сосредоточены на этом другом элементе, и что программа чтения с экрана сможет проанализировать это, прочитав Sub-One , но пользователи клавиатуры не смогут увидеть, что происходит, и будут потерять след.

    Причина, по которой это происходит, заключается в том, что, пока мы стилизуем зависание родительского элемента, как только мы перемещаем фокус с родительского элемента на один из элементов списка в этом родительском элементе, мы теряем этот стиль. Это имеет смысл с точки зрения CSS, но это не то, что нам нужно.

    К счастью, есть новый псевдокласс CSS, который даст нам именно то, что мы хотим в данном случае, и он называется :focus-within .

    Решение:

    :фокус внутри

    Псевдоселектор :focus-within является частью спецификации селекторов CSS уровня 4 и указывает браузеру применять стиль к родителю, когда какой-либо из его дочерних элементов находится в фокусе.Таким образом, в нашем случае это означает, что мы можем перейти к Sub-One и применить стиль :focus-within вместе со стилем :hover родителя и увидеть, где именно мы находимся в раскрывающемся списке навигации. В нашем случае это будет ul li:focus-within > ul :

    .
      ул li: hover > ул,
    ul li: фокус внутри > ul,
    уль ли уль:наведите {
      видимость: видимая;
      непрозрачность: 1;
      дисплей: блок;
    }  

    Сладко! Оно работает!

    Быстрый обход! Если вы поддерживаете только современные браузеры, CSS, которые мы видели до сих пор, вполне подойдут.Но вы должны знать, что когда любой браузер не понимает часть селектора, он отбрасывает весь селектор. Поэтому, если вы хотите поддерживать IE 11, вы не можете смешивать часть :focus-within .

      /* Этот составной селектор будет по-прежнему работать в IE 11, потому что :focus-within не смешивается */
    ул ли: наведите курсор > ул,
    уль ли уль: парить,
    уль ли уль: фокус {
      видимость: видимая;
      непрозрачность: 1;
      дисплей: блок;
    }
    
    /* IE 11 этого не получит, но, по крайней мере, меню верхнего уровня будут работать */
    ul li: фокус-внутри > ul {
      видимость: видимая;
      непрозрачность: 1;
      дисплей: блок;
    }  

    Теперь, когда мы переходим ко второму пункту, всплывает наше подменю, и когда мы переходим через подменю, видимость остается! Теперь мы можем добавить наш код, чтобы включить состояния :focus вместе с :hover , чтобы предоставить пользователям клавиатуры те же возможности, что и пользователям мыши.

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

      а:наведение,
    фокус {
      ...
    }  

    Но в этом случае, поскольку мы применяем стили наведения на основе родительского элемента li , мы снова можем использовать :focus-within , чтобы получить тот же вид при переходе через табуляцию. Это потому, что мы не можем на самом деле сфокусировать на li (если мы не добавим tabindex="0" ). На самом деле мы фокусируемся на ссылке ( a ) внутри него. :focus-within позволяет нам по-прежнему применять стили к родителю li при фокусировании на ссылке (чертовски круто!):

      li:парить,
    li: фокус внутри {
      ...
    }  

    На этом этапе, поскольку мы применяем стиль фокусировки, мы можем сделать то, что обычно не рекомендуется (удалить стиль этого синего контурного кольца фокусировки). Мы можем сделать это по:

      li:фокус-внутри {
      контур: нет;
    }  

    Приведенный выше код указывает, что когда мы фокусируемся на элементах списка по ссылке ( a ), не применяйте контур к элементу ссылки ( a ).Это довольно безопасно писать таким образом, потому что мы стилизуем исключительно состояние наведения, а в браузерах, которые не поддерживают :focus-within , ссылка все равно получит кольцо фокусировки. Теперь наше меню выглядит так:

    Окончательное меню с использованием состояний :focus-inin , :hover и настройка исчезновения кольца фокусировки

    Что насчет АРИИ?

    Если вы знакомы со специальными возможностями, возможно, вы слышали о метках и состояниях ARIA. Вы можете использовать их в своих интересах, чтобы одновременно создавать раскрывающиеся списки такого типа со встроенной доступностью! Здесь вы можете найти отличный пример Хейдона Пикеринга. При включении разметки ARIA ваш код будет выглядеть примерно так:

      <навигационная роль="навигация">
      <ул>
        
  • Один
  • Два
  • Три
  • Вы добавляете aria-haspopup="true" к родителю выпадающего меню, чтобы указать альтернативное состояние, и включаете aria-label="submenu" в само выпадающее меню (в данном случае наш список с class="dropdown" .

    Эти свойства сами по себе дадут вам функциональность, необходимую для отображения выпадающего меню, но недостатком является то, что они работают только с включенным JavaScript.

    Предупреждение о поддержке браузера

    Говоря о предостережениях, давайте поговорим о поддержке браузера. В то время как :focus-within действительно имеет довольно хорошую поддержку браузера , важно отметить, что Internet Explorer и Edge не поддерживаются, поэтому ваши пользователи на этих платформах не смогут видеть навигацию.

    Desktop
    Chrome Firefox IE Край Safari
    60 52 Нет 79 10,1
    Mobile / Tablet
    97 90.43
    Android Chrome Android Firefox Android iOS Safari
    97 95

    Окончательным решением здесь будет использование как разметки ARIA, так и CSS :focus-within , чтобы обеспечить надежное раскрывающееся меню для ваших пользователей.

    Если вы хотите использовать эту функцию в будущем, проголосуйте за нее в Edge User Voice! И проголосуйте за :focus-ring , пока вы это делаете, чтобы мы могли стилизовать это кольцо фокусировки и создать красивый интерактивный веб-опыт для всех 😀

    Подробнее о

    : focus-within и A11Y

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

    Ранее на этой неделе я искал простое руководство по горизонтальному выпадающему меню только с CSS, предназначенное для новичков в CSS.И я не смог найти его, так что вот как построить это меню….

    Я собираюсь сделать это в два этапа:

    Создание простого горизонтального меню — без раскрывающегося списка

    Прежде чем мы перейдем к раскрывающимся спискам, давайте просто отсортируем часть горизонтального меню. Начнем с html-разметки, которая представляет собой стандартный неупорядоченный список. Пусть у нас будет четыре пункта меню:

     <ул>
    
  • Элемент 1
  • Элемент 2
  • Элемент 3
  • Элемент 4
  • В этом нет ничего захватывающего. Теперь давайте посмотрим на css:

    .
     ул#горизнав{
    маржа: 0;
    заполнение: 0;
    тип стиля списка: нет;
    высота: 32px
    }
    
    #горизонт ли{
    плыть налево;
    ширина: 150 пикселей
    }
    
    #горизнав ли а{
    дисплей:блок;
    ширина: 150 пикселей;
    высота строки: 30 пикселей;
    выравнивание текста: по центру;
    белый цвет;
    текстовое оформление: нет;
    цвет фона:#EA9531;
    граница: 1px сплошной белый
    }
    
    #horiznav li a:hover{
    цвет:#333333
    }
     

    См. комментарии в css для объяснения.Главное, что делает меню горизонтальным, — это плавающий элемент

  • . Этот код дает нам это:

    Добавление раскрывающегося списка

    Теперь добавим раскрывающийся список. Элементы раскрывающегося списка включены как дополнительные элементы

  • Элемент 3 <ул>
  • Элемент 3.1
  • Элемент 3.2
  • Элемент 3.3
  • Элемент 4 <ул>
  • Элемент 4.1
  • Элемент 4.2
  • Элемент 4.3
  • Правильно, теперь CSS. Нам нужно сделать несколько дополнений — отмечены красным:

    ул#горизонт, #горизонт ул{
    маржа: 0;
    заполнение: 0;
    тип стиля списка: нет;
    высота: 32px
    }
    
    #горизонт ли{
    плыть налево;
    ширина: 152 пикселя;
    должность: родственник
    }
    
    #горизнав ли а{
    дисплей:блок;
    ширина: 150 пикселей;
    высота строки: 30 пикселей;
    выравнивание текста: по центру;
    белый цвет;
    текстовое оформление: нет;
    цвет фона:#EA9531;
    граница: 1px сплошной белый
    }
    
    #horiznav li a:hover{
    цвет:#333333
    }
    
    #горизонт ли ул{
    дисплей:нет;
    положение: абсолютное;
    слева:0;
    верх: 32px
    }
    
    #horiznav li: hover ul {
    дисплей: блок
    }
    
    #horiznav li ul a{
    цвет фона: # FFB33B
    } 

    См. пояснения в комментариях к коду.Удивительно малое количество css, на самом деле. Выпадающие списки обычно скрыты и появляются при наведении курсора на родительский элемент

  • . Итак, это дает нам (то же самое, что и вверху страницы):

    .

    Вы увидите, что использование абсолютного позиционирования приводит к тому, что раскрывающийся список появляется поверх всего остального на странице — это то, что нам нужно. И это прекрасно работает практически во всех популярных сегодня браузерах. В частности, я тестировал в IE7, IE8, FF3, Chrome, Opera9, Opera 10, Safari4. Вы заметите, что чего-то не хватает.Никаких призов за угадывание браузера, вызывающего дополнительные трудности…

    Работа с раскрывающимся списком в IE6

    IE6 не поддерживает :hover, за исключением элементов . Таким образом, без дополнительного кода наш красивый выпадающий список вообще не будет работать в IE6. К счастью, есть решение под названием csshover, которое вы найдете здесь вместе с инструкциями по его использованию. Я лично считаю, что версия 2 этого программного обеспечения является наиболее надежной.

    Добавление анимации с помощью jQuery

    Чтобы добавить анимацию — затухание, слайды и т. д. — взгляните на мой плагин jQuery здесь, который позволяет использовать более сложную анимацию для пользователей javascript, сохраняя при этом подход css для тех, у кого его нет.

    выпадающих списков · Bootstrap

    Переключение контекстных наложений для отображения списков ссылок и многого другого с помощью плагина раскрывающегося списка Bootstrap.

    Обзор

    Выпадающие списки — это переключаемые контекстные наложения для отображения списков ссылок и многого другого. Они сделаны интерактивными с помощью прилагаемого плагина JavaScript с раскрывающимся списком Bootstrap. Они переключаются щелчком, а не наведением курсора; это преднамеренное дизайнерское решение.

    Раскрывающиеся списки основаны на сторонней библиотеке Popper.js, который обеспечивает динамическое позиционирование и обнаружение области просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js , который содержит Popper.js. Popper.js не используется для позиционирования раскрывающихся списков на панелях навигации, поскольку динамическое позиционирование не требуется.

    Если вы собираете наш JavaScript из исходного кода, требуется util.js .

    Доступность

    Стандарт WAI ARIA определяет фактический виджет role="menu" , но он специфичен для меню, похожего на приложение, которое запускает действия или функции. Меню ARIA могут содержать только элементы меню, элементы меню флажков, элементы меню переключателей, группы переключателей и подменю.

    С другой стороны, раскрывающиеся списки Bootstrap

    предназначены для использования в различных ситуациях и структурах разметки. Например, можно создавать раскрывающиеся списки, которые содержат дополнительные входные данные и элементы управления формами, такие как поля поиска или формы входа. По этой причине Bootstrap не ожидает (и не добавляет автоматически) каких-либо атрибутов роли и aria-, необходимых для настоящих меню ARIA .Авторы должны будут сами включать эти более конкретные атрибуты.

    Тем не менее, Bootstrap добавляет встроенную поддержку для большинства стандартных взаимодействий с меню клавиатуры, таких как возможность перемещаться по отдельным элементам .dropdown-item с помощью клавиш курсора и закрывать меню с помощью клавиши ESC .

    Примеры

    Оберните переключатель раскрывающегося списка (вашу кнопку или ссылку) и раскрывающееся меню внутри .dropdown или другого элемента, который объявляет position: relative; .Выпадающие списки могут быть вызваны элементами или

  • И с элементами:

      <дел>
      
    
      
    

    Самое приятное то, что вы можете сделать это с любым вариантом кнопки:

      
    <дел>
      

    Кнопка разделения

    Аналогичным образом создайте раскрывающиеся списки с разделенными кнопками практически с той же разметкой, что и раскрывающиеся списки с одной кнопкой, но с добавлением . dropdown-toggle-split для правильного интервала вокруг каретки раскрывающегося списка.

    Мы используем этот дополнительный класс, чтобы уменьшить горизонтальный отступ по обе стороны от каретки на 25% и удалить margin-left , добавленный для обычных раскрывающихся списков кнопок. Эти дополнительные изменения сохраняют курсор в центре разделенной кнопки и обеспечивают область нажатия более подходящего размера рядом с основной кнопкой.

    Среднее Переключить раскрывающийся список
      
    <дел>
      
      

    Размеры

    Раскрывающиеся списки кнопок работают с кнопками всех размеров, включая кнопки по умолчанию и разделенные раскрывающиеся списки.

      
    <дел>
      
    <дел> <тип кнопки="кнопка"> Большая сплит-кнопка
    <дел>

    Вы также можете создавать неинтерактивные выпадающие элементы с помощью . текст выпадающего списка . Не стесняйтесь стилизовать дальше с помощью пользовательских CSS или текстовых утилит.

      <дел>
      Текст раскрывающегося списка
      Действие
      Другое действие
      Что-то еще здесь
      

    Активный

    Добавьте .active к элементам в раскрывающемся списке до , настройте их как активные .

      <дел>
      Обычная ссылка
      Активная ссылка
      Другая ссылка
      

    Отключено

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

      <дел>
      Обычная ссылка
      Отключенная ссылка
      Другая ссылка
      

    По умолчанию раскрывающееся меню автоматически позиционируется на 100% сверху и слева от родительского элемента. Добавьте .dropdown-menu-right к .dropdown-menu , чтобы выровнять раскрывающееся меню по правому краю.

    Внимание! Выпадающие списки позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в панели навигации).

      <дел>
      
        
        
      
      

    Адаптивное выравнивание

    Если вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив атрибут data-display="static" и используйте адаптивные классы вариантов.

    Чтобы выровнять вправо раскрывающееся меню с заданной точкой останова или выше, добавьте . dropdown-menu{-sm|-md|-lg|-xl}-right .

    Выровнено по левому краю, но по правому краю на большом экране
      <дел>
      
        
        
      
      

    Чтобы выровнять по левому краю в раскрывающемся меню с заданной точкой останова или выше, добавьте .выпадающее-меню-справа и .выпадающее-меню{-sm|-md|-lg|-xl}-слева .

    Выровнено по правому краю, но по левому краю на большом экране
      <дел>
      
        
        
      
      

    Обратите внимание, что вам не нужно добавлять атрибут data-display="static" к выпадающим кнопкам на панелях навигации, поскольку Popper. js не используется в навигационных панелях.

    Добавить заголовок для маркировки разделов действий в любом раскрывающемся меню.

      <дел>
       
    Заголовок раскрывающегося списка
    Действие Другое действие

    Разделители

    Разделяйте группы связанных пунктов меню с помощью разделителя.

      <дел>
      Действие
      Другое действие
      Что-то еще здесь
      <дел>
      Отдельная ссылка
      

    Текст

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

      <дел>
      

    Некоторый пример текста, который свободно течет в раскрывающемся меню.

    А это больше примерный текст.

    Формы

    Поместите форму в выпадающее меню или сделайте ее выпадающим меню и используйте утилиты полей или отступов, чтобы дать ей необходимое пустое пространство.

      <дел>
      <форма>
        <дел>
          
          
        
        <дел>
          
          
        
        <дел>
          <дел>
            <тип ввода="флажок">
             
      <форма>
      <дел>
        
        
      
      <дел>
        
        
      
      <дел>
        <дел>
          <тип ввода="флажок">
           

    Параметры раскрывающегося списка

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

      <дел>
      <дел>
        
        

    Использование

    С помощью атрибутов данных или JavaScript плагин раскрывающегося списка переключает скрытый контент (выпадающие меню), переключая . показать класс в элементе родительского списка. Атрибут data-toggle="dropdown" используется для закрытия выпадающих меню на уровне приложения, поэтому рекомендуется всегда использовать его.

    На сенсорных устройствах открытие раскрывающегося списка добавляет пустые ( $.noop ) обработчики mouseover к непосредственным дочерним элементам элемента . Этот, по общему признанию, уродливый хак необходим, чтобы обойти причуду в делегировании событий iOS, которая в противном случае не позволяла бы касанию в любом месте за пределами раскрывающегося списка запускать код, который закрывает раскрывающийся список.После закрытия раскрывающегося списка эти дополнительные пустые обработчики mouseover удаляются.

    Через атрибуты данных

    Добавьте data-toggle="dropdown" к ссылке или кнопке для переключения раскрывающегося списка.

      <дел>
      

    Через JavaScript

    Вызов раскрывающихся списков через JavaScript:

      $('.выпадающее меню').dropdown()  
    data-toggle="dropdown" все еще требуется

    Независимо от того, вызываете ли вы раскрывающийся список с помощью JavaScript или вместо этого используете data-api, data-toggle="dropdown" всегда должен присутствовать в элементе триггера раскрывающегося списка.

    Опции

    Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-, например data-offset="" .

    Имя Тип По умолчанию Описание
    смещение номер | строка | функция 0 Смещение раскрывающегося списка относительно его цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js.
    флип логическое значение правда Разрешить раскрывающийся список в случае наложения на элемент ссылки.Для получения дополнительной информации обратитесь к флип-документам Popper.js.
    граница строка | элемент ‘родительский прокрутки’ Граница ограничения переполнения раскрывающегося меню. Принимает значения 'viewport' , 'window' , 'scrollParent' или ссылку HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к документации по предотвращению переполнения Popper.js.
    номер по каталогу строка | элемент ‘переключить’ Справочный элемент выпадающего меню.Принимает значения 'toggle' , 'parent' или ссылку HTMLElement. Для получения дополнительной информации обратитесь к документации ReferenceObject Popper.js.
    дисплей строка ‘динамический’ По умолчанию мы используем Popper.js для динамического позиционирования. Отключите это с помощью static .

    Обратите внимание, что когда для границы задано любое значение, отличное от 'scrollParent' , стиль position: static применяется к .выпадающий контейнер .

    Методы

    Метод Описание
    $().выпадающий список('переключатель') Переключает раскрывающееся меню данной панели навигации или навигации с вкладками.
    $(). раскрывающийся список («показать») Показывает раскрывающееся меню данной панели навигации или навигации с вкладками.
    $(). раскрывающийся список («скрыть») Скрывает раскрывающееся меню данной панели навигации или навигации с вкладками.
    $(). раскрывающийся список («обновление») Обновляет положение раскрывающегося списка элемента.
    Уничтожает раскрывающийся список элемента.

    События

    Все события раскрывающегося списка запускаются в родительском элементе .dropdown-menu и имеют свойство relatedTarget , значением которого является переключаемый элемент привязки. скрыть.События bs.dropdown и hidden.bs.dropdown имеют свойство clickEvent (только если исходный тип события — click ), который содержит объект события для события щелчка.

    Событие Описание
    show. bs.dropdown Это событие возникает немедленно при вызове метода экземпляра show.
    показано.бс.раскрывающийся список Это событие запускается, когда раскрывающийся список становится видимым для пользователя (будет ожидать завершения переходов CSS).
    hide.bs.dropdown Это событие возникает сразу после вызова метода скрытия экземпляра.
    скрытый.bs.выпадающий Это событие запускается, когда раскрывающийся список перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).
      $('#myDropdown').on('show.bs.dropdown', функция () {
      // сделай что-нибудь…
    })  

    Настройка вертикального меню | WordPress.org

    Здравствуйте,

    1 — Добавьте приведенный ниже код в раздел «Настройка» > «Пользовательский CSS» — очистите кеш и перезагрузите сайт.

      #site-navigation-wrap .dropdown-menu>li.current-menu-item>a {
        цвет: красный !важно;
    }  

    2. Я думаю, что это разные меню, и невозможно связать оба меню друг с другом.Это возможно, но для этого требуется специальный код, и в настоящее время мы не можем предоставить поддержку кодирования. Вы можете увидеть это с разработчиком.

    Привет @apprimit,

    Спасибо за быстрый ответ и предоставленное решение.

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

    Раскрывающееся меню в вертикальном меню остается открытым для родительской страницы, но остается закрытым для дочерней страницы.

    Мне удалось связать оба меню с кодом CSS:

      .current-page-ancestor>a,
    .текущий пункт-меню> a {
        цвет: #07cab8!важно;
    }
    
    .current-page-parent>a{цвет: начальный !important;}  

    Теперь вы можете видеть, что выбираются горизонтальное меню дочерней страницы и пункт вертикального меню. Но я не могу открыть Вертикальное меню > Подменю для дочерней страницы, т.е.

    Я следую коду из вашей базы знаний: https://docs.oceanwp.org/article/472-display-the-sub-menu-in-current-page-in-the-vertical-header-style

    Если вы посмотрите на этот снимок экрана https://imgur.com/a/gqSC1me, вы обнаружите, что вертикальное меню > выпадающее меню подменю остается открытым, когда вы переходите по этой ссылке: https://site4298297.nestifysites.com /развернуть/

    Но это не работает (под этим я подразумеваю, что подменю не остается открытым) для дочерней страницы, т.е. https://site4298297.nestifysites.com/deploy/custom-iso/

    Я просто хочу, чтобы раскрывающееся меню подменю оставалось открытым и на дочерней странице.Я не думаю, что это требует дополнительного кодирования (вероятно, нескольких настроек), поскольку оно уже работает для родительской страницы (спасибо Oceanwp Knowledgebase), я просто хочу, чтобы оно работало для дочерней страницы.

    Привет @apprimit

    Я думаю, что решил проблему с меню, создав родительскую страницу верхнего уровня и настроив CSS, вы можете проверить это на https://site4298297.nesifysites.com/servers/billing/payment-methods/

    Выпадающий список и меню выбора работают отлично.

    Я немного подправил css в базе знаний https://docs.oceanwp.org/article/472-display-the-sub-menu-in-current-page-in-the-vertical-header-style и все получилось рабочий:

    Рабочий CSS:

      .current-page-ancestor>a,
    .текущий пункт-меню> a {
        цвет: #07cab8 !важно;
    }
    
    .current-page-parent> a {цвет: начальный !important;}
    
    #Заголовок сайта.вертикальный заголовок #site-navigation-wrap .dropdown-menu
    li.current-page-ancestor > .sub-menu {
        отображение: блок !важно;
    }
    
      

    Спасибо за создание и помощь с этой замечательной темой !!!!

    Рад слышать, что это исправлено, и спасибо за решение.

    50 примеров оформления выпадающего меню

    Чистая и хорошо структурированная навигация по веб-сайту является ключом к разработке эффективного пользовательского интерфейса.

    Раскрывающиеся меню отлично подходят для сайтов с несколькими уровнями иерархии контента. Типичный шаблон проектирования раскрывающегося меню заключается в том, что когда пользователь наводит указатель мыши на родительский элемент навигации, появляется подменю элементов навигации. В этой коллекции много различных типов раскрывающихся меню, используемых на веб-сайтах по всему Интернету для вашего вдохновения в дизайне навигации.

    Вот несколько связанных коллекций , касающихся навигации по сайту , которые могут вас заинтересовать:

    1.Pure Grips

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

    2. Porsche

    При наведении курсора на каждую машину изображение справа меняется. Он также выглядит потрясающе с полупрозрачным фоном.

    3. B&Q

    B&Q имеет четкое и привлекательное раскрывающееся меню, в котором перечислены столбцы продуктов, которые ищут клиенты.

    4. Здоровье из красного кирпича

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

    5. Carreras Con Futuro

    Дизайн этого выпадающего меню воплощает нарисованную от руки тему веб-сайта.

    6. Galaico Folia

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

    7. Callaway Golf

    Это мастерски аккуратный раскрывающийся навигационный дизайн с эффектом оранжевого наведения.

    8. Converse

    Converse имеет выпадающее меню в стиле гранж, которое имеет текстуру, напоминающую ткань, с волнистыми краями.

    9. Puma

    Это темное выпадающее меню действительно выделяется среди остальных более светлых цветов сайта.

    10. Sunglass Hut

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

    11. Netttuts+

    Netttuts+ имеет понятное раскрывающееся меню навигации, которое хорошо сочетается с цветами заголовка.

    12. Tennessee Trails & Byways

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

    13. Шлюз

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

    14. Bern

    Этот грубый веб-сайт в стиле гранж имеет острое раскрывающееся меню, которое дополняет внешний вид и общую эстетику веб-сайта.

    15. Ski Alpine

    Это выпадающее меню подчеркивает внимание дизайнера сайта к деталям.

    16.Guitar Hero

    Это простое раскрывающееся меню практично и не отвлекает от основных областей макета веб-страницы.

    17. Mac Appstorm

    Вот чистое выпадающее меню, которое идеально вписывается в общий дизайн сайта.

    Чтобы получить еще больше советов по цифровому маркетингу, подпишитесь на электронную почту, которой доверяют более 190 000 других маркетологов: Revenue Weekly.
    Зарегистрироваться Сегодня!

    18. Noizi Kidz

    Навигация яркая и нестандартной формы.

    19. Audi

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

    20. Знаменитое печенье

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

    21. Питомник Герцогства Корнуолл

    Этот веб-сайт в бумажном стиле имеет красивое, четкое раскрывающееся меню.

    22. EA

    У Electronic Arts есть раскрывающееся меню в игривом стиле.

    23. Bonfire Snowboarding

    Bonfire Snowboarding имеет потрясающее выпадающее подменю из трех столбцов в главном элементе навигации «Продукты», в котором товары размещаются в трех категориях.

    24. Facebook

    У Facebook есть простое раскрывающееся меню в главном меню сайта «Учетная запись» с соответствующими ссылками для редактирования вашей учетной записи Facebook.

    25. Ник Ад

    Чтобы появилось подменю, нажмите и удерживайте указатель мыши.Затем вы переходите на нужную ссылку в каждом раскрывающемся списке и отпускаете кнопку мыши, чтобы перейти на эту страницу; это интересный нетрадиционный дизайн взаимодействия.

    26. TN Vacation

    Это выпадающее меню темно-синего цвета действительно выделяется.

    27. MTV UK

    Дизайн этого сайта отличается простым и стандартным выпадающим меню.

    28. Обувь DC

    Красно-белый текст на полупрозрачном черном фоне создает свое очарование.

    29. Envato Marketplaces

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

    30. Театр Теннесси

    Эта навигация особенная, потому что она чистая, но в то же время креативная. Коричневый действительно выделяется среди остальных мягких цветов сайта.

    31. Boden

    Каждый пункт меню имеет свой шрифт, а выпадающее меню очень чистое.

    32. Белый дом

    Белый фон, синий текст и красная верхняя и нижняя границы выполнены в цветах флага США.

    33. Navigant Consulting

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

    34. Клуб офицеров

    Еще один сайт одежды с раскрывающимся списком; Наличие выпадающего подменю значительно упрощает поиск товаров. Раскрывающийся список Клуба офицеров состоит из нескольких столбцов.

    35. Fall For Tennessee

    Fall for Tennessee имеет горизонтальное выпадающее меню, которое выдвигается вправо. Пункты меню, имеющие раскрывающееся подменю, имеют небольшую стрелку рядом с ними, указывающую, что их можно развернуть.

    36. Sony

    Sony имеет очень широкое и простое выпадающее меню на своем основном британском сайте.

    37. Project Vino

    В этом раскрывающемся меню используются цвета, соответствующие остальной части сайта. Большой размер шрифта и общий дизайн выглядят потрясающе.

    38. Media Temple

    Media Temple имеет одно из лучших выпадающих меню с эстетической точки зрения. Маленькая миниатюра каждого типа хостинга рядом с их названием выглядит великолепно, наряду с отличными анимационными переходами на основе JavaScript.

    39. Mozilla

    Это простое, но красивое выпадающее меню в Mozilla.

    40. Август

    Эффект полупрозрачности в этом раскрывающемся меню работает с ярким фоновым изображением.

    41. Одежда Henleys

    Основной цвет навигации сползает в раскрывающееся подменю.

    42. Digg

    Классические раскрывающиеся подменю Digg сочетаются с общим дизайном их веб-сайта.

    43. Action Envelope

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

    44. Very

    Very, новый интернет-магазин, имеет четкое и структурированное раскрывающееся меню навигации.

    45. Incase

    Раскрывающееся меню Incase немного светлее, чем фон навигации, и хорошо сочетается с чистым внешним видом сайта.

    46. American Eagle

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

    47.Mayflower Brewing

    Цвета, используемые в этом раскрывающемся списке (и на сайте в целом), великолепны.

    48. Выбрать одежду

    Выпадающее меню «Выбрать одежду» имеет темный фон, который выделяется на скользящих изображениях ниже.

    49. Bird Malaysia

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

    50. The Web Squeeze

    The Web Squeeze реализовал jQuery в своем раскрывающемся меню, чтобы придать ему несколько изящных эффектов при наведении.

    Похожие материалы

    Как создать выпадающее меню в WordPress (5 шагов)

    Навигация по сайту — это ключ к тому, чтобы помочь вашим пользователям добраться туда, куда они хотят. Хорошо продуманное меню может иметь большое значение для улучшения пользовательского опыта (UX) и даже для снижения показателя отказов. Однако плохо сделанный может сделать прямо противоположное.

    К счастью, WordPress позволяет создавать собственные меню в соответствии с потребностями вашего сайта. Вы даже можете использовать встроенные функции, чтобы добавить компактное выпадающее меню WordPress, которое экономит место, но при этом обеспечивает четкое направление для ваших посетителей.

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

    Давайте погрузимся!

    Введение в навигацию WordPress и выпадающие меню

    Несмотря на то, что они могут показаться скромными, навигационные меню являются жизненно важным элементом любого веб-сайта. Они помогают пользователям быстро находить наиболее релевантные страницы для достижения их целей, а также дают представление о том, что вы можете предложить посетителям впервые:

    Основное навигационное меню веб-сайта Kinsta

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

    Кроме того, если пользователи смогут уверенно ориентироваться на вашем сайте, им не придется покидать ваши страницы из-за того, что они оказались не в том месте. Если вы поможете им сделать все правильно с первого раза, это улучшит UX и сведет к минимуму разочарование.

    В WordPress меню — неотъемлемая функция. Любой сайт, созданный с помощью платформы, может отображать один или несколько из них.Тем не менее, темы WordPress также играют важную роль, когда речь идет о стилизации и размещении вашего меню или меню.

    По этой причине ваше меню WordPress может принимать самые разные формы. Наиболее знакомым является стандартное меню заголовка:

    Пример типичного меню верхнего колонтитула

    Вы также можете добавить дополнительное меню нижнего колонтитула внизу страницы. Оно может отображать тот же контент, что и ваше главное меню, или предлагать немного другие параметры:

    . Пример нижнего колонтитула меню

    Другой стиль — наложение меню, которое пользователи могут открывать и закрывать по своему желанию:

    Пример наложенного меню

    В качестве альтернативы вы можете рассмотреть возможность использования бокового меню:

    Пример бокового меню

    Или вы можете включить выпадающее меню, также иногда называемое «вложенным» меню:

    Пример выпадающего меню

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

    Скрывая некоторый контент до тех пор, пока он не понадобится, вы сэкономите место на экране, в то же время предоставляя пользователям простой способ перемещения.

    Как создать выпадающее меню в WordPress (5 шагов)

    Если вы решили, что выпадающее меню может хорошо подойти для вашего сайта WordPress, настроить его довольно просто. Используя собственные функции меню, доступные в WordPress, вы можете создать собственную систему навигации, которая соответствует вашим потребностям, всего за пять шагов.

    Шаг 1. Создайте элементы меню

    Первый шаг к созданию меню — решить, что в него включить. Начните с перехода к Внешний вид > Меню  на панели инструментов WordPress:

    . Доступ к редактору меню на панели управления WordPress

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

    Однако сейчас важно отметить первую опцию на вкладке Edit Menus . Вы должны увидеть опцию, в которой вы можете выбрать одно из существующих меню для редактирования, а также опцию создать новое меню :

    . Ссылка на создание нового меню в верхней части редактора меню WordPress

    . В этом примере мы выберем последний вариант и создадим новое меню.Это включает в себя добавление заголовка, а затем нажатие кнопки Create Menu  :

    Именование и создание нового меню

    Теперь вы готовы начать добавлять элементы в меню WordPress. В большинстве случаев лучше сделать ваше меню как можно более простым, но в то же время предоставить пользователям достаточно информации, чтобы добраться туда, куда они хотят.

    Включение слишком большого количества страниц может перегрузить посетителей и усложнить, а не упростить навигацию.

    Есть несколько способов добавления пунктов меню.Первые две — это Страниц и Сообщений , и они работают очень похоже.

    Добавление страниц в меню

    В боковой панели редактора меню просто установите флажки для каждой страницы или публикации, которую вы хотите включить, и нажмите кнопку Добавить в меню :

    Следующим вариантом является включение пользовательских ссылок . Это включает в себя предоставление URL-адреса страницы, на которую вы хотите направить пользователей, а затем создание для нее короткой, но описательной метки. После этого вы можете снова нажать Добавить в меню :

    Добавление пользовательской ссылки в меню

    Наконец, вы также можете добавить Категории страниц и записей в меню навигации.Это перенаправит пользователей на страницу архива, где они смогут просмотреть весь контент по определенной теме.

    Блоги и другие сайты с большим количеством контента могут найти эту функцию особенно полезной:

    Добавление категорий в меню

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

    Шаг 2. Организуйте свое меню WordPress

    После того, как вы добавите все пункты меню, вы должны увидеть их в виде отдельных плиток в разделе Структура меню  в редакторе:

    Раздел «Структура меню» редактора меню

    Первоначально пункты меню будут отображаться в том порядке, в котором вы их добавили. Однако вы можете легко изменить их организацию, перетащив их на место. Это позволит вам создать простое меню без выпадающего меню.

    Есть несколько способов добавить выпадающие списки в меню WordPress.

    Проще всего продолжить перетаскивание, но начать вкладывать одни пункты меню в другие:

    Вложенные категории под страницей блога

    Например, на изображении выше мы переместили три категории сообщений, которые мы добавили, в меню под Блог , сделав их «подпунктами».Во внешнем интерфейсе это создаст раскрывающееся меню, которое выглядит так:

    . Пример выпадающего меню в WordPress

    Если вы хотите добавить выпадающее меню, включающее все категории на вашем сайте, вы можете сделать это, добавив в свое меню пользовательскую ссылку . Используйте «#» в качестве URL-адреса и «Категории» или что-то подобное для метки:

    . Создание метки «Категории» для меню

    Затем вы можете добавить все свои категории в меню и вложить их в эту метку. Каждая категория будет кликабельной, но метка не будет:

    . Раскрывающееся меню «Категории»

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

    Добавьте еще одну пользовательскую ссылку, используя «#» в качестве URL-адреса и «Меню» в качестве метки. Затем вложите все остальные пункты меню в этот:

    . Вложение всех навигационных ссылок под одну метку меню

    Результатом на интерфейсе будет выпадающее меню, включающее ключевые страницы вашего сайта.

    Как вы можете видеть в элементе Категории ниже, любой контент, вложенный в подэлемент, будет отображаться в подменю:

    Подпишитесь на информационный бюллетень

    Хотите узнать, как мы увеличили трафик более чем на 1000%?

    Присоединяйтесь к более чем 20 000 других пользователей, которые получают нашу еженедельную рассылку с советами по WordPress, посвященными инсайдерской информации!

    Подпишись сейчас Настоящее выпадающее меню навигации WordPress

    Используя редактор меню перетаскивания таким образом, вы можете создать любой стиль и комбинацию выпадающих меню WordPress. Помните, однако, что слишком большое количество пунктов меню может сбить пользователей с толку.

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

    Шаг 3. Добавьте изображения в меню WordPress

    Если к концу шага 2 раскрывающееся меню выглядит точно так, как вы его себе представляли, вы можете перейти к шагу 5, чтобы опубликовать его. Однако есть дополнительные шаги, которые вы можете предпринять, если хотите улучшить свое меню с помощью настроек.

    Одна из тактик, которую следует учитывать, — это включение визуальных элементов в ваши меню, чтобы предоставить дополнительные ориентиры для посетителей. Хотя описательные метки жизненно важны, иногда изображение или значок могут помочь пользователям быстрее определить, куда ведет конкретная навигационная ссылка.

    Можно добавлять изображения с помощью пользовательского CSS, который мы вскоре обсудим. Тем не менее, мы рекомендуем подобрать плагин, такой как Menu Image, Icons Made Easy:

    . Выпадающее меню WordPress с изображениями

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

    Просто установите плагин и вернитесь в Внешний вид > Меню :

    Раздел «Изображение меню» в редакторе меню

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

    Шаг 4. Добавьте пользовательский CSS в раскрывающееся меню

    Хотя это не рекомендуется для начинающих, пользователи среднего и продвинутого уровня могут захотеть включить свои собственные стили в раскрывающиеся меню WordPress.Однако, прежде чем вы перейдете прямо к своему CSS, вам нужно добавить класс в свое меню.

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

    В редакторе меню нажмите Параметры экрана  в правом верхнем углу:

    Вкладка «Параметры экрана» в редакторе меню

    Затем установите флажок для CSS-классов :

    . Флажок «Классы CSS» на вкладке «Параметры экрана»

    Это добавит поле Классы CSS на каждую страницу вашего меню: Поле «Классы CSS» в редакторе меню

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

    Теперь вы можете перейти к своей таблице стилей или настройщику и приступить к работе над собственным стилем.

    Шаг 5. Опубликуйте свое меню в популярных местах

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

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

    В редакторе меню прокрутите вниз до раздела Настройки меню  :

    Раздел «Настройки меню» в редакторе

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

    Под этой опцией вы увидите список флажков, отмечающих различные области вашего сайта, где вы можете отображать свое меню.

    Тема Twenty Twenty включает в себя различные области меню: Горизонтальное меню рабочего стола , Расширенное меню рабочего стола , Мобильное меню , Меню нижнего колонтитула , Социальное меню .

    В этом случае созданное нами меню лучше всего подходит для расположения Desktop Horizontal Menu  , которое находится в шапке сайта:

    Горизонтальное меню рабочего стола для темы Twenty TwentyЗдесь вы можете увидеть все местоположения меню, которые поддерживаются вашей темой, а также какое меню вы назначили каждому из них:

    Вкладка «Управление местоположениями»

    При размещении меню может быть полезно посмотреть, как они будут выглядеть в интерфейсе.

    Параметр «Управление с предварительным просмотром в реальном времени»

    Нажмите кнопку «Управление с предварительным просмотром в реальном времени»   , чтобы увидеть, как ваше меню будет отображаться в выбранном вами месте с помощью настройщика WordPress:

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

    . Затем вы можете опубликовать свое меню или меню непосредственно из настройщика.Если вам когда-нибудь понадобится добавить или удалить элементы из раскрывающегося меню, вы можете просто вернуться в редактор меню и внести необходимые изменения.

    Плагины WordPress

    для улучшения раскрывающихся меню

    Хотя вы можете создавать полнофункциональные навигационные меню WordPress без каких-либо дополнительных инструментов, иногда может быть полезно расширить функциональность вашего меню. Если это относится к вашему сайту, вы можете изучить некоторые популярные плагины меню WordPress.

    Вложенные страницы

     – это эффективный способ создания раскрывающихся меню для блогов с большим количеством контента.Хотя он в основном используется для организации постов и страниц, этот плагин также автоматически генерирует меню, отражающее структуру вашего контента:

    Плагин Nested Pages WordPress

    Хотя не обязательно включать большое количество элементов в ваши меню, иногда это неизбежно.

    Если это относится к вашему сайту, Max Mega Menu может помочь вам объединить существующие меню WordPress в одно «мегаменю»:

    Плагин Max Mega Menu для WordPress

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

    WP Mobile Menu сочетается с любой адаптивной темой, чтобы помочь вам создать систему навигации для мобильных пользователей вашего сайта:

    Плагин WP Mobile Menus WordPress

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

    Вы можете использовать любой из этих плагинов, чтобы улучшить текущую систему навигации и сделать выпадающее меню WordPress более эффективным.Просто помните, что иногда, когда дело доходит до навигации, проще, чем лучше . Добавляйте дополнительные функции только в том случае, если это улучшит ваш UX и не загромождает ваш сайт.

    Устранение неполадок в раскрывающемся меню WordPress

    Если вы настроили меню, как описано выше, но функция раскрывающегося списка не работает, есть несколько возможных причин.

    Хотя мы не можем охватить здесь все из них, мы можем   помочь вам определить причину вашей проблемы, чтобы вы могли найти правильное решение.

    Часто неисправное меню является результатом конфликтующего кода между вашим пользовательским меню и вашей темой. Первое, что вы должны сделать, если ваше меню не работает, это переключиться на тему по умолчанию, такую ​​как Twenty Twenty. Если ваше меню снова начнет работать, вы узнаете, что проблема связана с вашей темой. Затем вы можете связаться с разработчиком вашей темы, чтобы найти решение.

    Несколько других возможных причин включают в себя:

    Однако, как мы упоминали ранее, существует множество потенциальных причин неправильного меню. Если ни одно из вышеперечисленных решений не работает, мы рекомендуем посетить форумы поддержки WordPress, обратиться к нашей экспертной группе поддержки Kinsta WordPress или нанять разработчика WordPress, чтобы исправить это для вас.

    Навигационные меню являются ключом к UX вашего сайта. Но что, если у вас есть много пунктов меню, которые вам нужно показать? Выпадающее меню - это название игры! Посмотрите, как легко его создать с помощью этого руководства 📑🗃️Нажмите, чтобы твитнуть

    Резюме

    Хотя это может показаться незначительным, но навигация вашего сайта WordPress может сделать или разрушить его успех. Использование выпадающих меню может сэкономить место на экранах пользователей, а также позволить им легко перемещаться по вашему сайту и повышать конверсию.


    Экономьте время, затраты и максимизируйте производительность сайта с: