Главная › Новости

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

Опубликовано: 01.09.2018

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

Скачать исходники для статьи можно ниже

Шаблон данного сайта, на котором я веду свой блог, изначально не поддерживал выпадающее меню, да и вообще меню установленное на нем было ужасно, поэтому я решил поискать решения по созданию нужного мне меню в интернете, однако, это оказалось непростой задачей. Единственно путное решение, которое я нашел — это было создание меню через онлайн сервис http://purecssmenu.com/ (более подробно про него вы можете прочитать по следующему url: http://ktonanovenkogo.ru/html/sozdanie-vypadayuschih-menyu-na-servise-purecssmenu.html )- однако у этого решения есть минус, меню нужно создавать вручную на онлайн сервисе, прописывая каждую ссылку, а мне хотелось создавать его непосредственно в панели управления сайтом.

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

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

Недавно, нашел в интернете еще один способ создания горизонтального выпадающего меню, аналогичный нижеуказанному (также добавляется код Walker, только немного измененный), с единственным небольшим плюсом , что на данном сайте (http://cssmenumaker.com) есть готовые примеры менюшек с указанием их CSS кода , о данном способе можете почитать в моей новой статье:

Создаем горизонтальное выпадающее меню wordpress (Способ 2)

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

1. Первое, что вам нужно сделать — это зарегистрировать ваше меню в файле functions.php вашей темы. Для этого заходим в панель управления вашим сайтом, выбираем в левом меню закладку «Внешний вид», далее выбираем подпункт «Редактор», далее справа в шаблонах ищем файл  functions.php   (функции темы). Открываем его, переходим на последнюю строчку, которая выглядит как закрывающийся тег ?>, вот до него мы и вставляем нижеприведенный код.

function theme_setup() { register_nav_menu('Navigation', __('Navigation')); } add_action( 'init', 'theme_setup' ); if ( !is_nav_menu('Navigation') ) { $menu_id = wp_create_nav_menu('Navigation'); wp_update_nav_menu_item($menu_id, 1); }

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

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

Меню мы создали, назвали его, и выбираем его в окне «Области темы».

2. Следующий шаг, который нам предстоит сделать — это добавить в файл functions.php еще несколько строчек кода (открываем данный файл также как и в пункте 1). Дело в том, что разработчики WordPress почему-то не предусмотрели специального класса для родительских пунктов, поэтому придется вставить их самостоятельно. +

Также, как и в первом пункте, в файле functions.php идем на самую последнюю строчку, которая выглядит как закрывающийся тег ?>,  и вставляем нижеприведенный код.

class extended_walker extends Walker_Nav_Menu{ function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) { if ( !$element ) return; $id_field = $this->db_fields['id']; //display this element if ( is_array( $args[0] ) ) $args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] ); //Adds the 'parent' class to the current item if it has children if( ! empty( $children_elements[$element->$id_field] ) ) array_push($element->classes,'parent'); $cb_args = array_merge( array(&$output, $element, $depth), $args); call_user_func_array(array(&$this, 'start_el'), $cb_args); $id = $element->$id_field; // descend only when the depth is right and there are childrens for this element if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) { foreach( $children_elements[ $id ] as $child ){ if ( !isset($newlevel) ) { $newlevel = true; //start the child delimiter $cb_args = array_merge( array(&$output, $depth), $args); call_user_func_array(array(&$this, 'start_lvl'), $cb_args); } $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output ); } unset( $children_elements[ $id ] ); } if ( isset($newlevel) && $newlevel ){ //end the child delimiter $cb_args = array_merge( array(&$output, $depth), $args); call_user_func_array(array(&$this, 'end_lvl'), $cb_args); } //end this element $cb_args = array_merge( array(&$output, $element, $depth), $args); call_user_func_array(array(&$this, 'end_el'), $cb_args); } }

3. Я буду вставлять меню в шапку (header) своего шаблона, так как это самый распространенный вариант. И для этого в левом меню панели управления сайтом выбираем все также закладку «Внешний вид», далее подпункт «Редактор» и справа среди «Шаблонов» выбираем файл «Шапка» (header.php).

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

</head> <body>

Сам код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible');} function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} $(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open) $('#jsddm > li').bind('mouseout', jsddm_timer)}); document.onclick = jsddm_close; </script>

4. Следующее, что нам нужно сделать — это вставить код вызова нашего меню в фале шапки (header.php). Данный код нужно вставить там, где мы хотим видеть наше выпадающее горизонтальное меню.

<?php wp_nav_menu(array('menu' => 'Navigation', 'theme_location' => 'Navigation', 'depth' => 2, 'container' => 'div', 'container_class' => 'nav', 'menu_class' => 'jsddm', 'menu_id' => 'jsddm', 'walker' => new extended_walker())); ?>

На своем сайте я заключил данный код в тег div, для того, чтобы применить к нему стиль оформления menu2 (код данного стиля приведен в следующем пункте 5), который создает отступ слева, вот так он у меня выглядит:

<div id="menu2"> <?php wp_nav_menu(array('menu' => 'Navigation', 'theme_location' => 'Navigation', 'depth' => 2, 'container' => 'div', 'container_class' => 'nav', 'menu_class' => 'jsddm', 'menu_id' => 'jsddm', 'walker' => new extended_walker())); ?> </div>

5. Осталось добавить css стилей для нашего меню. Для этого опять выбираем в левом меню панели управления ярлык «Внешний вид», далее подпункт «Редактор», далее справа среди шаблонов выбираем файл «Список стилей» (style.css), в нем также идем в конец и вставляем следующий код:

#jsddm { margin: 0; padding: 0; } #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial; } #jsddm li a { display: block; background: #20548E; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap; } #jsddm li a:hover { background: #1A4473; } #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; } #jsddm li ul li { float: none; display: inline; } #jsddm li ul li a { width: auto; background: #9F1B1B; } #jsddm li ul li a:hover { background: #7F1616; }

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

Ну, например:

6 строчка: float: left;- задает расположение вашего меню, т. е. в данном случае оно будет располагаться слева, если поставить float: right; — то будет располагаться справа.

8 строчка: font: 12px Tahoma, Arial; — задает размер шрифта и вид шрифта текста, используемого в вашем меню.

12 строчка:  background: #20548E; — отвечает за цвет кнопочек основных пунктов вашего меню, причем можно поставить вместо цвета и фоновый рисунок, я заменил данную строчку на своем сайте на «background: url(images/nav-button-bg.gif) repeat-x;»  (то есть фоном кнопочек у меня рисунок и он повторяется по оси х).

13 строчка: padding: 5px 12px; — это отступ текста кнопочек основных пунктов вашего меню от краев кнопки, причем данный параметр может состоять из 4 пунктов (padding: 5px 12px 7px 10 px;). Отступы здесь задаются против часовой стрелки: сначала сверху, потом слева, потом снизу и справа (padding: верх слева снизу справа;).

16 строчка: width: 70px; — данная строчка отвечает за ширину кнопочек основных пунктов вашего меню.

20 строчка: #jsddm li a:hover {background: #1A4473;} — задает цвет выделения основных пунктов меню при наведении мыши.

36 строчка: background: #9F1B1B; — задает цвет фона подпунктов меню.

38 строчка:  #jsddm li ul li a:hover {background: #7F1616;}— здесь #7F1616 задает цвет выделения подпункта меню при наведении мыши. [spoiler title=»Вот как выглядит код моего меню в файле style.css.» open=»0″ style=»1″]

#jsddm { margin: 0; padding: 0; } #jsddm li { float: left; list-style: none; font:bold 12px Tahoma, Arial; } #jsddm li a { display: block; background: url(images/nav-button-bg.gif) repeat-x; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 90px; color: #ffffff; white-space: nowrap; } #jsddm li a:hover {background: #1A4473;} #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; } #jsddm li ul li { float: none; display: inline; } #jsddm li ul li a { width: auto; background: #7a9c26; } #jsddm li ul li a:hover {background: #1A4473;} #menu2 { padding: 78px 0 0 0; } [/spoiler]

6. Все готово!!!

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

100 % данный код работает на теме Twenty Eleven (которая идет по умолчанию с движком WordPress), так что можете протестировать данную статью именно на этой теме.