Выпадающее трехуровневое меню для WordPress + маленькая фишка

2013-12-08 | WordPress

Приветствую всех зашедших на блог! Устраивайтесь поудобней перед монитором! Сегодня я поделюсь с Вами своим опытом создания и верстки трехуровневого меню для WordPress.

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

Если же у Вас на блоге нет произвольного (не говоря о выпадающем) меню, то его необходимо сделать, внеся изменения в код файлов functions.php и header.php.

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

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

А потому переходим сразу к CSS-верстке трехуровневого меню. У меня много трудностей возникало с созданием третьего уровня, и я очень долго блуждал среди ul и li. Перерыл много сайтов, нигде не нашел ничего подходящего. Думал даже «забить» на его создание, но в один прекрасный момент удача все же повернулась ко мне передом :-).

Трехуровневое меню WordPress

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

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

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

#navbg { /* Фоновый цвет основного горизонтального меню */
background: #0099ff;
padding:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 0 10px;
margin-bottom: 5px;
-moz-box-shadow: 0px 3px 3px;
-webkit-box-shadow: 0px 3px 3px;
box-shadow: 0px 3px 3px;
}
 
#nav { /* Стили основного горизонтального меню */
z-index: 100; 
width:100%; 
position:relative; height: 38px}
 
#nav ul { 
    list-style-type:none;
    padding:0;
    margin:0;
    position:relative;
}
 
#nav ul li {
display:block;
float:left;
padding:0 10px;
float:left; 
position:relative;
}
 
#nav ul li a { /* Стили ссылок (пунктов) основного горизонтального меню */
padding:9px;
float:left;
text-decoration:none;
font-size:14px;
font-weight:bold;
font-family:arial, helvetica, sans-serif;
-moz-text-shadow: 1px 1px 1px #333;
-webkit-text-shadow: 1px 1px 1px #333;
text-shadow: 1px 1px 1px #333;
color: #fff;
display: block; 
overflow: hidden; 
line-height: 20px;
text-align:left; 
text-decoration:none;
}
 
#nav ul li a:hover { /* Стили ссылок (пунктов) основного горизонтального меню при наведении курсора */
text-decoration:none;
color: #fff;
text-shadow: 1px 1px 1px #3d78c5;
box-shadow: inset 0 0 6px #000;
background:  #4575b4;
}
 
#nav ul li ul { /* Это для того, чтобы выпадающее меню 2-го уровня не отображалось все время */
display:none;
}
 
#nav ul li:hover ul { /* Стили для выпадающего меню второго уровня */
border: solid 2px rgba(81, 203, 238, 1);
box-shadow: 0 0 25px rgba(81, 203, 238, 1);
position: absolute;
background: #0000ff;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
opacity: 0.9; 
display:block; 
left:0px; 
width:210px; 
position:absolute; 
top:39px;
}
 
#nav  ul li ul li {
padding:0;
}
 
#nav ul li:hover ul li ul { /* Это для того, чтобы выпадающее меню 3-го уровня не отображалось все время */
display: none
}
 
#nav ul li:hover ul li a { /* Стили ссылок (пунктов) выпадающих меню 2 и 3 уровня */
display:block;  
width:188px;
border-bottom:1px dotted #fff;
font-family: 'bad script', cursive; 
font-size:15px; padding:11px;
}
 
#nav ul li:hover ul li a:hover { /* Стили ссылок (пунктов) выпадающих меню 2 и 3 уровня при наведении */
background:#cfc;
color: blue;
}
 
#nav ul li:hover ul li:hover ul { /* Стили и отступ для меню 3 уровня */
display:block; 
border: solid 2px rgba(81, 203, 238, 1);
left:208px;
position:absolute; 
top:0px
}
 
#nav img{ /* Убираем рамки вокруг иконок в меню */
border:none !important;
}

#navbg { /* Фоновый цвет основного горизонтального меню */background: #0099ff;padding:5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;padding: 0 10px;margin-bottom: 5px;-moz-box-shadow: 0px 3px 3px;-webkit-box-shadow: 0px 3px 3px;box-shadow: 0px 3px 3px;}#nav { /* Стили основного горизонтального меню */z-index: 100; width:100%; position:relative; height: 38px}#nav ul { list-style-type:none; padding:0; margin:0; position:relative;}#nav ul li {display:block;float:left;padding:0 10px;float:left; position:relative;}#nav ul li a { /* Стили ссылок (пунктов) основного горизонтального меню */padding:9px;float:left;text-decoration:none;font-size:14px;font-weight:bold;font-family:arial, helvetica, sans-serif;-moz-text-shadow: 1px 1px 1px #333;-webkit-text-shadow: 1px 1px 1px #333;text-shadow: 1px 1px 1px #333;color: #fff;display: block; overflow: hidden; line-height: 20px;text-align:left; text-decoration:none;}#nav ul li a:hover { /* Стили ссылок (пунктов) основного горизонтального меню при наведении курсора */text-decoration:none;color: #fff;text-shadow: 1px 1px 1px #3d78c5;box-shadow: inset 0 0 6px #000;background: #4575b4;}#nav ul li ul { /* Это для того, чтобы выпадающее меню 2-го уровня не отображалось все время */display:none;}#nav ul li:hover ul { /* Стили для выпадающего меню второго уровня */border: solid 2px rgba(81, 203, 238, 1);box-shadow: 0 0 25px rgba(81, 203, 238, 1);position: absolute;background: #0000ff;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;opacity: 0.9; display:block; left:0px; width:210px; position:absolute; top:39px;}#nav ul li ul li {padding:0;}#nav ul li:hover ul li ul { /* Это для того, чтобы выпадающее меню 3-го уровня не отображалось все время */display: none}#nav ul li:hover ul li a { /* Стили ссылок (пунктов) выпадающих меню 2 и 3 уровня */display:block; width:188px;border-bottom:1px dotted #fff;font-family: 'bad script', cursive; font-size:15px; padding:11px;}#nav ul li:hover ul li a:hover { /* Стили ссылок (пунктов) выпадающих меню 2 и 3 уровня при наведении */background:#cfc;color: blue;}#nav ul li:hover ul li:hover ul { /* Стили и отступ для меню 3 уровня */display:block; border: solid 2px rgba(81, 203, 238, 1);left:208px;position:absolute; top:0px}#nav img{ /* Убираем рамки вокруг иконок в меню */border:none !important;}

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

И на десерт приведу маленькую фишку — как добавить иконки к пунктам меню.
Добавить иконки к пунктам меню еще проще, чем к рубрикам!

Для этого находим и скачиваем иконку размером 16х16, закачиваем на блог по FTP. Дальше идем в админку блога (Внешний вид -> Меню), создаем/редактируем пункт меню.

Трехуровневое меню

Перед названием пункта в поле «Текст ссылки» прописываем это:

1	<img class="alignleft" src="путь к иконке"> Название пункта меню

Сохраняем. Не забываем прописать последние 3 строчки в style.css (#nav img), поскольку в некоторых браузерах, в частности Internet Explorer, вокруг иконок (и других изображений-ссылок кстати тоже) могут быть синие рамки.

Результат:

Трехуровневое меню

На сегодня это всё. Теперь Вы знаете, как можно сделать выпадающее трехуровневое меню с иконками для WordPress-блога!

Поделиться:

Записи по теме:

14 комментариев к записи "Выпадающее трехуровневое меню для WordPress + маленькая фишка"

Seoptimist от 09.12.2013 в 00:01 пишет:

А разве свойсво border, установленное в 0 не поможет избавится от рамки к картинке в IE?

Ответить ↓
- Никита от 09.12.2013 в 11:03 пишет:
  
  А border:none; чем не устраивает?
  
  Ответить ↓
Алекс от 16.12.2013 в 00:25 пишет:

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

Ответить ↓
- Никита от 16.12.2013 в 01:46 пишет:
  
  Ясен пень. Это меню я можно сказать облагородил. А двухуровневое было черное как копоть.
  
  Ответить ↓
Алекс от 16.12.2013 в 00:35 пишет:

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

Ответить ↓
- Никита от 16.12.2013 в 01:49 пишет:
  
  Ну вот. Стоит только захотеть. И все получится!
  
  Ответить ↓
Алекс от 16.12.2013 в 20:07 пишет:

Никита, пиши ещё такие же статьи о переделке шаблона. Очень познавательно и любопытно!

Ответить ↓
- Никита от 16.12.2013 в 22:56 пишет:
  
  Сам в процессе работы над блогом узнаю что-нибудь новенькое и тут же стараюсь поделиться со всеми
  
  Ответить ↓
Алекс от 18.12.2013 в 04:28 пишет:

Можешь написать о переделках хедера, футера, сайдбара, изменении ширины сайдбара, вставке кучи разных вещей — темы востребованные для начинающих.
А лучше самому все эти действия объяснить и записать на диск и начать продавать диск. Монетизировать знания, так сказать.

Ответить ↓
- Никита от 18.12.2013 в 22:53 пишет:
  
  Я в основном писал про те вещи, над которыми пришлось серьезно попотеть, а хеадер, сайдбар и футер — это пара строк. Один CSS не более того. Другое дело, если писать о том, как добавить виджеты в футер, но у меня их там нет.
  
  Ответить ↓
  - Алекс от 19.12.2013 в 01:00 пишет:
    
    Что-то не думается мне, что изменение ширины сайдбара — дело нескольких строк. Это от конкретного шаблона зависит. И не один файл редактировать нужно, а несколько, причём изначально ещё можно и не знать, какие точно, а только предположительно.
    Если «хеадер, сайдбар и футер — это пара строк», то можно обзорную статью написать. Главное, что статья будет, причём занимательная.
    
    Ответить ↓
    - Никита от 19.12.2013 в 23:40 пишет:
      
      Разумеется все зависит от конкретного шаблона. «Сориентировался на местности» и приступаешь к переделке.
      
      Ответить ↓
Алекс от 01.01.2014 в 19:37 пишет:

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

Ответить ↓
- Никита от 01.01.2014 в 19:52 пишет:
  
  Возможно это из-за того, что ты курсором попадаешь в промежуток между меню 1 и 2-го уровня, из-за этого оно и пропадает.
  
  Ответить ↓