Главная » Создание сайтов » WordPress » Горизонтальное выпадающее меню wordpress

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

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

Итак, открываем файл в котором будем “устанавливать” наше меню, в моем примере это файл header.php. Вставляем следующий код:

В файл стилей style.css вставляем:

#nav2{
background-color: #202020;
display: block;
font-size:1.1em;
height:50px;
width:100%;
}

#nav2, #nav2 ul {
line-height: 1;
list-style: none;
}

#nav2 a ,#nav2 a:hover{
border:none;
display: block;
text-decoration: none;
}

#nav2 li {
float: left;
list-style:none;
}

#nav2 a,#nav2 a:visited {
color:#109dd0;
display:block;
font-weight:bold;
padding:6px 12px;
}

#nav2 a:hover, #nav2 a:active {
color:#fff;
text-decoration:none
}

#nav2 li ul {
border-bottom: 1px solid #a9a9a9;
height: auto;
left: -999em;
position: absolute;
width: 900px;
z-index:999;
}

#nav2 li li {
width: auto;
}

#nav2 li li a,#nav2 li li a:visited {
color:#109dd0;
font-weight:normal;
font-size:0.9em;
}

#nav2 li li a:hover,#nav2 li li a:active {
color:#fff;
}

#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {
left: 30px;
}

Закрываем и сохраняем изменения в файле. Если у вас нормальный браузер (т.е. не браузер семейста IE) то вы увидите готовое полностью валидное меню написанное на “голом” css, без применения javascript.

Для того, чтобы “заставить” меню работать в не нормальных браузерах (IE) в заголовке сайта (до тега ) вставляем JS код:

Вуаля! Все готово!

P.S. Если Вы, по каким-то причинам захотите выводить через меню не Рубрики а Страницы, то вместо:

$this_category = get_category($cat);
?>

Вставляем

С уважением, Vasilenko Ivan!
5 августа 2010 в 23:1417 комментариев WordPress

Комментарии — 17 комментариев

  1. #9916 Евгений Жлобо в 16:00, 7 августа 2010:

    Ответить | Цитировать

    Слишком громозжко все.

    $ t h i s _ c a t e g o r y = g e t _ c a t e g o r y ( $ c a t ) ;

    Разве это нужно? Если да, то какое значение оно имеет?

  2. #9922 vitalik в 14:52, 9 августа 2010:

    Ответить | Цитировать

    Статья познавательная. Прочитал с удовольствием. Спасибо

  3. #10116 Статус в 9:12, 20 августа 2010:

    Ответить | Цитировать

    Щас будем ставить меню.Гг

  4. #10322 Наталья в 16:29, 6 сентября 2010: (подписался)

    Ответить | Цитировать

    Добрый день!Статья очень полезная перепробовала кучу вариантов что бы сделать меню но это самое доделанное,все же у меня есть вопросик,вот подменю выводится не определенно под страницей родительской а произвольно слева,как сделать что бы прям под родительской страницей выводились пункты подменю? для примера меню на моем сайте doma-domiki.com

  5. #10323 Наталья в 16:50, 6 сентября 2010: (подписался)

    Ответить | Цитировать

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

  6. #10471 да я в 16:15, 12 сентября 2010:

    Ответить | Цитировать

    думаю на CSS это сделать было бы логичнее, нет?

  7. #10477 Наталья в 20:50, 12 сентября 2010: (подписался)

    Ответить | Цитировать

    Спасибо,я упорными стараниями сделала все как надо вроди все выходит)))Кое что доделала,но пока не совсем все ровно выходит,но выходит))))Спасибо большое вам за статью!

  8. #10486 Евгений Жлобо в 12:43, 13 сентября 2010:

    Ответить | Цитировать

    Пожалуйста.

  9. #10625 Lenskiy в 22:37, 15 октября 2010:

    Ответить | Цитировать

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

  10. #10668 Евгений Жлобо в 18:11, 1 ноября 2010:

    Ответить | Цитировать

    думаю на CSS это сделать было бы логичнее, нет?

    У кого к чему душа лежит.

  11. #10694 Arhey в 18:45, 9 ноября 2010: (подписался)

    Ответить | Цитировать

    Где демо? Выложи демо этого меню

  12. #11012 Дмитрий в 21:05, 23 февраля 2011: (подписался)

    Ответить | Цитировать

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

  13. #15332 андрей в 16:39, 3 мая 2012:

    Ответить | Цитировать

    честно говоря – такая х.. этот вордпресс

  14. #15353 vanoID в 5:55, 4 мая 2012:

    Ответить | Цитировать

    @ андрей:
    На вкус и цвет… :)

  15. #16730 Аида в 10:01, 16 июня 2012: (подписался)

    Ответить | Цитировать

    Здравствуйте!Можете реализовать раскрывающееся меню в WordPress, т.е. кликаешь по разделу и внизу открываются подразделы, кликаешь на подраздел и открывается подраздел подраздела. У меня уже готовый шаблон сайта, просто нужно прописать код для выподающего меню… Можете это сделать и сколько будет стоить? Заренее спасибо!

  16. #18841 Анна в 21:12, 18 февраля 2013:

    Ответить | Цитировать

    Спасибо за идею, будем пробовать.

  17. #19011 Самые ненавистные виды рекламы | DesignFire в 13:03, 22 марта 2013:

    Ответить | Цитировать

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

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting