Как сделать горизонтальное меню с помощью CSS и JQuery, и как его прикрепить к блогу на WordPress

Разместил / Просмотров: 15 354 / комментариев 59

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

Хочется сказать, что это моё творение, так что не судите строго. Если понравилось, то берите и скачивайте его совершенно бесплатно.

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

В общем давайте его собирать.

Не забудьте посмотреть пример, а также скачать исходники.

Пример ι Скачать исходники

Перед тем как прикреплять меню к своему сайту посмотрите не прикручен ли у Вас фреймворк JQuery.

Между тегами <head> и </head> добавьте следующее:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

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

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

HTML

<!-- Начало #dropdown_nav -->
 <ul id="dropdown_nav">
 <li><a class="first" href="#">Главная</a></li>
 <li><a href="#">Шаблоны</a>
 <ul class="sub_nav">
 <li><a href="#">Подменю #1</a></li>
 <li><a href="#">Подменю #2</a></li>
 <li><a href="#">Подменю #3</a></li>
 <li><a href="#">Подменю #4</a></li>
 </ul>
 </li>
 <li><a href="#">Интересное</a>
 <ul class="sub_nav">
 <li><a href="#">Подменю #1</a></li>
 <li><a href="#">Подменю #2</a></li>
 <li><a href="#">Подменю #3</a></li>
 <li><a href="#">Подменю #4</a></li>
 </ul>
 </li>
 <li><a href="#">Дизайн сайта</a></li>
 <li><a href="#">JavaScript и JQuery</a></li>
 <li><a href="#">Новичкам</a></li>
 <li><a href="#">WordPress</a></li>

<li><a class="last" href="#">Новости</a>
 <ul class="sub_nav">
 <li><a href="#">Подменю #1</a></li>
 <li><a href="#">Подменю #2</a></li>
 <li><a href="#">Подменю #3</a></li>
 <li><a href="#">Подменю #4</a></li>
 </ul>
 </li>
 </ul>
 <!-- конец #dropdown_nav -->

У нас есть два тега <ul>, один тег с классом dropdown_nav(основное меню), а второй тег с классом sub_nav (второстепенное, выпадающее меню). Данные классы мы будем задавать далее в стилях CSS.

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

CSS

#dropdown_nav {

width:980px;
 padding-left:5px;
 display:inline-block;
 list-style:none;
 border-radius:5px;
 border-bottom:0px solid #777;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 background: #DCDCDC url(menu.png);
 -moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;

}

 #dropdown_nav li {

 padding:12px 0px 12px 0px;
 float:left;
 position:relative;
 display:inline-block;

}

 #dropdown_nav li a {

text-decoration:none;
 font-weight: bold;
 font-size:15px;
 color:#ccc;
 padding:10px 15px 10px 15px;
 border-right:1px solid #666;
 -moz-transition: background-color 0.3s 0.01s ease;
 -o-transition: background-color 0.3s 0.01s ease;
 -webkit-transition: background-color 0.3s 0.01s ease;
 }

#dropdown_nav li a:hover {

 background: #FF6766;
 text-decoration:none;
 color:#fff;

 }
 #dropdown_nav li a:active {
 background:#e2e2e2;

 }

 #dropdown_nav li a.first {
 -moz-border-radius:5px 0px 0px 5px;
 -webkit-border-radius:5px 0px 0px 5px;
 }
 /*#dropdown_nav li a.last {
 -moz-border-radius:0px 5px 5px 0px;
 -webkit-border-radius:0px 5px 5px 0px;
 }*/

 /* Sub-Nav стили */
 #dropdown_nav .sub_nav {

 width:161px;
 position:absolute;
 top:41px;
 left:0px;
 border-top: 2px solid #FF6766;
 background: #DCDCDC url(pinstriped_suit.png);
 -moz-box-shadow: 0 0 10px #333;
 -webkit-box-shadow: 0 0 10px #333;
 box-shadow: 0 0 10px #333;
 }

 #dropdown_nav .sub_nav li {

 width:160px;
 padding:0px;
 }

 #dropdown_nav .sub_nav li a {
 font-weight: normal;
 font-size:13px;
 display:block;
 border-bottom:1px solid #444;

 }
 #dropdown_nav .sub_nav li a:hover {

 background:#333;

 }
 #dropdown_nav .sub_nav li a:active {
 background:#333;

 }

Как видите основное меню имеет ширину в 980 пикселей. Данную ширину Вы можете изменять как нужно для Вашего сайта.

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

Ширина выпадающего меню равна 161px, это значение так же можно изменять но не рекомендую.

Так же здесь добавлена не большая тень сделали мы это с помощью box-shadow, по умолчанию 0 0 10px #333 чёрный цвет.

Заливка меню (PNG)

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

По умолчанию в классе #dropdown_nav меняем тут background: #DCDCDC url(menu.png);. Заменяем menu.png на ссылку.

В классе .sub_nav здесь background: #DCDCDC url(pinstriped_suit.png);. Изменяем pinstriped_suit.png на ссылку.

Теперь нужно сделать плавное выпадение подменю, делать будем это с помощью JQuery.

JQuery

Тут ничего сложного нет, просто между тегами <head> и </head> добавьте следующий скрипт:

<script type="text/javascript">

$(function() {
$('#dropdown_nav li').find('.sub_nav').hide();
$('#dropdown_nav li').hover(function() {
$(this).find('.sub_nav').fadeIn(400);
 }, function() {
$(this).find('.sub_nav').fadeOut(100);
 });
 });

</script>

Всё меню мы сделали. Теперь давайте его будем прикреплять к блогу на движке WordPress.

WordPress

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

В админке находим functions.php и добавляем туда в самый верх, после вот этого <?php, следующее:

/*******************************
 Меню
********************************/
if ( function_exists( 'wp_nav_menu' ) ){
 if (function_exists('add_theme_support')) {
 add_theme_support('nav-menus');
 add_action( 'init', 'register_my_menus' );
 function register_my_menus() {
 register_nav_menus(
 array(
 'primary-menu' => __( 'Primary Menu' ),
)
 );
 }
 }
}

function primarymenu(){ ?>
 <div class="bottomMenu">
 <ul id="dropdown_nav">
 < ?php wp_list_categories('hide_empty=1&exclude=1&title_li='); ?>
 </ul>
 </div>
< ?php }&#91;/php&#93;

Добавили? Поздравляю :-)

Но это ещё не всё. Теперь нам нужно его вызвать. Например, мы хотим его добавить в шапке блога, значит  идём в header.php и после тега &lt;body&gt; добавляем следующее:

&#91;php&#93;<!-- Начало #bottomMenu -->

 < ?php if ( function_exists( 'wp_nav_menu' ) ){
 wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container_id' => 'dropdown_nav', 'container_class' => 'bottomMenu', 'fallback_cb'=>'primarymenu') );
 }else{
 primarymenu();
 }?>

<!-- Конец #bottomMenu -->

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

CSS

Заходим в админке блога в style.css и добавляем вот это:

#dropdown_nav {

font-weight:bold;
 width:1100px;
 padding-left:5px;
 display:inline-block;
 list-style:none;
 border-radius:5px;
 border-bottom:0px solid #777;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 background: #DCDCDC url(menu.png);
 -moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

 #dropdown_nav li {

padding:12px 0px 12px 0px;
 float:left;
 position:relative;
 display:inline-block;

}

 #dropdown_nav li a {

 font-style:italic;
 font-size:15px;
 color:#cd5252;
 padding:10px 15px 10px 15px;
 border-right:1px solid #e3dec0;
 -moz-transition: background-color 0.3s 0.01s ease;
 -o-transition: background-color 0.3s 0.01s ease;
 -webkit-transition: background-color 0.3s 0.01s ease;
 }

#dropdown_nav li a:hover {

 background: #81ae7c;
 text-decoration:none;
 color:#fff;
 }

#dropdown_nav li a:active {
 background:#e2e2e2;

 }

 #dropdown_nav li a.first {
 -moz-border-radius:5px 0px 0px 5px;
 -webkit-border-radius:5px 0px 0px 5px;
 }
 /*#dropdown_nav li a.last {
 -moz-border-radius:0px 5px 5px 0px;
 -webkit-border-radius:0px 5px 5px 0px;
 }*/

#dropdown_nav ul li ul {

width:161px;

position:absolute;

top:41px;

left:-1px;
 border-top:2px solid #FF6766;
 background: #e3e1cf url(pinstriped_suit.png);
 -moz-box-shadow: 0 0 10px #333;
 -webkit-box-shadow: 0 0 10px #333;
 box-shadow: 0 0 10px #333;
 }

 #dropdown_nav ul li ul li {
 padding:0px;
 width:160px;

 }

 #dropdown_nav ul li ul li a {
 font-weight: normal;
 font-size:13px;
 display:block;
 border-bottom:1px solid #444;

 }
 #dropdown_nav ul li ul li a:hover {
 background:none;
 text-decoration: underline;
 color:#963c3c;

 }
 #dropdown_nav ul li ul li a:active {
 background:#333;

 }

JQuery

А сейчас между тегами <head> и </head> в header.php вставляем это:

<script type="text/javascript">

$(function() {
$('#dropdown_nav li').find('.sub-menu').hide();
$('#dropdown_nav li').hover(function() {
$(this).find('.sub-menu').fadeIn(400);
 }, function() {
$(this).find('.sub-menu').fadeOut(100);
 });
 });

</script>

Заливка меню

Не забываем в стилях указать правильные ссылки на картинки, об этом я писал выше.

Пример ι Скачать исходники

Всё

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

  • denis

    Довольно таки красивое меню у Вас Александр получилось. Надо будет поэксперементировать себе с этим меню, правда на движке Joomla но принцип тот же самый что и на WordPress.

  • denis, спасибо. С Joomla за тот же принцип не уверен. Код разный скорее всего будет.

  • Саша

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

  • Саша, по поводу такого меню скоро выйдет статья. Подписывайтесь на обновления :-)

  • Саша

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

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

  • Maxim

    Подскажите как это меню подключить если сайт просто на html? спасибо.

  • Maxim, сделайте всё как в статье до этой записи «WordPress». В начале статьи я всё рассказывал.

  • Классное меню, всё получилось! Интересует только как я могу убрать пустое пространство между этим меню и логотипом что стоит выше?

  • Ринат

    мне кажется или на css3 выпадающий список малость зависает, или у меня комп х*евый?

  • Денис, отступы нужно в стилях задать. margin.

  • Не знаю, Ринат. У меня ничего не зависает :-)

  • Спасибо! Ещё вопрос, как поменять цвет освещения, контура самого меню?

  • А всё нашёл, спасибо за такое меню! И вообще приятно, что есть такие люди, к которым можно обратится с вопросом по созданию сайта! Респект тебе за труды, ты очень сильно помог! ;)

  • Денис, я очень рад, что Вам хоть чем то помог :-)

  • qwerty

    Вроде все сделал как вы но у меня стилей нет все только простые слова

  • qwerty

    О! Спасибо за меню! Ошибку исправил, не знаю почему но стили в style.css не работают вот я и впихнул ее в header.php прописав

  • qwerty, Стили можно прописать и в header.php, но лучше отдельным файлом. А как именно они не работают можете описать подробнее?

  • Подскажите пожалуйста, как сделать два меню.

  • Тимур, объясните подробнее.

  • Изначально у меня шаблон без поддержки меню и без поддержки выпадающего меню.
    Благодаря приведенному Вами примеру удалось реализовать данные функции. Но в силу дизайна шаблона могу разместить 3, максимум 4 пункта в данном меню.
    Хотелось бы реализовать 2 меню. Первое — по самому верху страницы, второе — где изначально было задумано в дизайне шаблона. Шаблон — Chasing Pirates in Caribbean.

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

  • Артем

    А я чуть чуть не понимаю. Здесь есть статья как самому написать меню?

  • Артём, здесь рассказывается как сделать выпадающее меню.

  • Артем

    Здраствуйте, а вот такой вопрос. Без jqre это можно сделать?

  • Артем

    а у меня почему-то не сворачивается подменю

  • Артём на вордпрессе не сворачивается?

  • Артем

    александр, я через html, у меня все также написано, но там сразу и главное меню показывается и подменю, а что делать надо, чтобы все это было как у вас?
    Например я навожу на «новичкам» и там появляется, создать блог и тд, а у меня, даже если не наводится, все равно все видно

  • Артём, нужно библиотеку проверить. Попробуйте вот это поставить

  • Что у Вас между тегами head стоит?

  • Artem

    У меня.там ссылка на бибилиотеку

  • Artem

    Александр, вы есть в каких ни будь соц сетях? Просто у меня к вам несколько вопросов, но мне крайне не удобно вести с вами разговор на сайте, да и вообще находиться на нем

  • Артём, я есть в контакте http://vk.com/id16907296

  • Denis

    Александр вот есть небольшой вопрос правда не сильно касающийся этого меню. Вот у меня к html странице прикреплен файл сброса стилей в котором прописано ol, ul {list-style: none;}. А мне надо на странице к определенному списку ul добавить маркеры например типа circle. Если я прописываю к списку ul list-style: circle; то они не появляються. Как это сделать?

  • Denis, попробуйте добавить !important Выглядеть будет так ul list-style: circle !important;

  • Denis

    Попробовал добавить !important и маркеры появились! Ок спасибо за помощь!!! :)

  • Denis, рад был помочь :-)

  • Саша

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

  • Sergey

    Александр!!! Я только начинающий не судите строго но вот есть два вопроса. вот вы подключаете версию JQuery 1.4.3 но на данный момент уже версия 1.9.1 можно ли ее подключать?
    И еще есть ли какая то последовательность подключения скрипта в блоке head (я имею ввиду что за чем идет script потом css или разницы нет)?

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

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

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

  • Sergey

    ОК!!! Спасибо Александр за информацию!!! :)

  • Все ок!нормально работает, но вот вопрос как сделать что бы и третье меню выпадало(так сказать) но типа
    Новости —
    новости под меню—
    (и вот тут что бы третье было)

  • Лучше Вам многоуровневое меню найти. Это одноуровневое меню.

  • Александр,хочу сказать вам огромнейшее спасибо,у вас отличный блог…Я много чего нового узнал для себя…

  • Сержик, Вы не представляете как приятно слышать такие слова :-) Это Вам спасибо :-)

  • Можно ли это меню сделать вертикальным?

  • Можно, но лучше уже такое готовое меню найти.

  • Denis

    Александр а вы случайно не знаете как решить вот такой случай. У меня есть пункты меню состоящие из двух слов и для того чтобы уменьшить их длину я решил второе слово принудительно перенести на вторую строчку (то есть в базе данных я вставил между ними тег br) и теперь при клике на этот пункт меню в самом меню все нормально отображается в две строки, а вот в заголовке окна браузера этот тег тупо отображается. Так вот вопрос можно ли как-то запретить отображения тега br в заголовке окна браузера title ?

  • Павло

    Скажите пожалуйта. Есть у меня проблема: подменю не позиционируется относительно главного меню. То есть при отношении absolute — relative при «left: 0» подменю прижимается к левой стороне страницы, а не выравнивается по левому краю главного меню. Как исправить?

  • Илья

    Добавляю код в файл functions.php и сайт перестает работать, белый экран

  • Возможно, что то упустили

  • Наташа

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

  • Здравствуйте, а можно пример глянуть?

  • Наташа

    #dropdown_nav .sub_nav {
    width:161px;
    position:absolute;
    top:41px;
    left:0px;
    border-top: 2px solid orange;
    background: #DCDCDC url(pinstriped_suit.png);
    -moz-box-shadow: 0 0 10px #333;
    -webkit-box-shadow: 0 0 10px #333;
    box-shadow: 0 0 10px #333;
    }

    #dropdown_nav .sub_nav li {
    width:160px;
    padding:0px
    }

    #dropdown_nav .sub_nav li a {
    font-weight: normal;
    font-size:13px;
    display:block;
    border-bottom:1px solid #444;
    }

    #dropdown_nav .sub_nav li a:hover {
    background:#333;
    }

    #dropdown_nav .sub_nav li a:active {
    background:#333;
    }

  • Наташа

  • Попробуйте уменьшить в #dropdown_nav .sub_nav li

    width:160px;

  • Наташа

    Не помогло увы

  • Тогда добавьте к ид #dropdown_nav .sub_nav li
    margin-left: 0px;