Меню css раскрывающееся вертикальное меню

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

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

Итак, если у вас в проекте имеется сложная структура меню со множеством подразделов и страниц в них, то в целях экономии места вполне можно использовать раскрывающийся эффект. Рассмотрим его реализацию для WP с помощью CSS и JavaScript.

Нашел для вас два варианта, хотя, думаю, в сети «подобного добра» гораздо больше. Первый — целиком и полностью связан с WordPress, второй — общая статья про вертикальное раскрывающееся меню на CSS. Главное здесь понять логику и дальше сможете легко их внедрять самостоятельно. Кстати, для сложной горизонтальной навигации советую Max Mega Menu в WordPress со множеством настроек и классных фишек.

Шаг1. Создание меню в админке Wordpress

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

• Символ » # » в поле URL (для создания меню без ссылки)
• Название раздела в поле Текст ссылки.
• Класс dropdown в поле Классы CSS.

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

После создания / внесения изменений жмете «Сохранить меню». Выводить его на сайте вы можете с помощью функции wp_nav_menu или виджета «Произвольное меню».

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

Теперь нужно визуально скрыть подпукнты раздела. Для этого заходим во «Внешний вид» — «Редактор» и выбираем файл стилей вашей темы style.css (или другой). Добавляем код:

.menu .dropdown .sub-menu { display: none; }

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

Шаг3. Javascript для раскрывающиеся меню в WordPress

Для продвинутых тем можно использовать настройку Custom Javascript, а в общем случае идем в раздел «Внешний вид» — «Редактор», где открываем файл шапки header.php. Добавляем скритп перед закрывающимся тегом .

script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.menu .dropdown a').click(function(e){ e.preventDefault(); if (jQuery(this).parent().children('.sub-menu:first').is(':visible')) { jQuery(this).parent().children('.sub-menu:first').hide(); } else { jQuery(this).parent().children('.sub-menu:first').show(); } }); }); script>

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

jQuery('.menu .dropdown a').click(function(e){

jQuery(‘.menu .dropdown a’).click(function(e)

jQuery('.menu .dropdown > a').click(function(e){

jQuery(‘.menu .dropdown > a’).click(function(e)

Вертикальное раскрывающееся меню на CSS

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

Простой HTML код для его внедрения:

При этом используются следующие CSS стили:

.dropdown { color: #555; margin: 3px -22px 0 0; width: 143px; position: relative; height: 17px; text-align:left; } .submenu { background: #fff; position: absolute; top: -12px; left: -20px; z-index: 100; width: 135px; display: none; margin-left: 10px; padding: 40px 0 5px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); } .dropdown li a { color: #555555; display: block; font-family: arial; font-weight: bold; padding: 6px 15px; cursor: pointer; text-decoration:none; } .dropdown li a:hover { background:#155FB0; color: #FFFFFF; text-decoration: none; } a.account { font-size: 11px; line-height: 16px; color: #555; position: absolute; z-index: 110; display: block; padding: 11px 0 0 20px; height: 28px; width: 121px; margin: -11px 0 0 -10px; text-decoration: none; background: url(icons/arrow.png) 116px 17px no-repeat; cursor:pointer; } .root { list-style:none; margin:0px; padding:0px; font-size: 11px; padding: 11px 0 0 0px; border-top:1px solid #dedede; }

Учтите, что пути к картинкам-стрелочкам (icons/arrow.png) могут быть другие + не забудьте сами изображения. В целом оформление раскрывающегося вертикального меню можно представить в виде следующей схемы (для тех, кто не особо хорошо разбирается в отступах).

В JavaScript коде функция $(«.account»).click(function()<> использует класс «account» родительского элемента My Account. С помощью $(this).attr(‘id’) уточняется значение атрибута id, после чего применяется условный оператор для показа подменю .submenu. При этом также меняется значение $(this).attr(‘id’, ‘1’).

script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js ">script>; script type="text/javascript" > $(document).ready(function() { $(".account").click(function() { var X=$(this).attr('id'); if(X==1) { $(".submenu").hide(); $(this).attr('id', '0'); } else { $(".submenu").show(); $(this).attr('id', '1'); } }); //Mouse click on sub menu $(".submenu").mouseup(function() { return false }); //Mouse click on my account link $(".account").mouseup(function() { return false }); //Document Click $(document).mouseup(function() { $(".submenu").hide(); $(".account").attr('id', ''); }); }); script>

При клике на странице с помощью $(document).mouseup(function() данное вертикальное раскрывающееся меню на CSS будет скрыто.

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

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

Категории: Возможности;
Теги: javascript, вордпресс веб-разработка, меню и навигация, сниппеты.

Похожие статьи:

Источник

Раздвигающееся вертикальное меню на CSS3

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

Разметка HTML

Меню построено на неупорядоченном списке и имеет один уровень (очень часто, такого уровня вложенности хватает для решения задач интерфейса приложения).

  
Главная
  
HTML/CSS 

  
 Ссылка 1
  
 Ссылка 2
  
 Ссылка 3
  
 Ссылка 4
  
 Ссылка 5


  
jQuery/JS 

  
 Ссылка 6
  
 Ссылка 7
  
 Ссылка 8
  
 Ссылка 9
  
 Ссылка 10


  
PHP
  
MySQL
  
XSLT

CSS

#nav < border:3px solid #3e4547; box-shadow:2px 2px 8px #000000; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; >#nav, #nav ul < list-style:none; padding:0; width:200px; >#nav ul < position:relative; z-index:-1; >#nav li < position:relative; z-index:100; >#nav ul li < margin-top:-23px; -moz-transition: 0.4s linear 0.4s; -ms-transition: 0.4s linear 0.4s; -o-transition: 0.4s linear 0.4s; -webkit-transition: 0.4s linear 0.4s; transition: 0.4s linear 0.4s; >#nav li a < background-color:#d4d5d8; color:#000; display:block; font-size:12px; font-weight:bold; line-height:28px; outline:0; padding-left:15px; text-decoration:none; >#nav li a.sub < background:#d4d5d8 url("../images/down.gif") no-repeat; >#nav li a + img < cursor:pointer; display:none; height:28px; left:0; position:absolute; top:0; width:200px; >#nav li a img < border-width:0px; height:24px; line-height:28px; margin-right:8px; vertical-align:middle; width:24px; >#nav li a:hover < background-color:#bcbdc1; >#nav ul li a < background-color:#eee; border-bottom:1px solid #ccc; color:#000; font-size:11px; line-height:22px; >#nav ul li a:hover < background-color:#ddd; color:#444; >#nav ul li a img < background: url("../images/bulb.png") no-repeat; border-width:0px; height:16px; line-height:22px; margin-right:5px; vertical-align:middle; width:16px; >#nav ul li:nth-child(odd) a img < background:url("../images/bulb2.png") no-repeat; >#nav a.sub:focus < background:#bcbdc1; outline:0; >#nav a:focus ~ ul li < margin-top:0; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linears; -webkit-transition: 0.4s linears; transition: 0.4s linear; >#nav a:focus + img, #nav a:active + img < display:block; >#nav a.sub:active < background:#bcbdc1; outline:0; >#nav a:active ~ ul li < margin-top:0; >#nav ul:hover

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com/css3-onclick-vertical-metal-menu/
Перевел: Сергей Фастунов
Урок создан: 5 Июня 2012
Просмотров: 74848
Правила перепечатки

5 последних уроков рубрики «CSS»

• 

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

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

Источник

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

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

Также скачайте исходники себе на компьютер!

Шаг 1.

Для начала создайте папку, например folder. В нее поместите файл index.html со следующим кодом:

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

Затем в папке folder создайте папку style и поместите в нее файл style.css. Файл style.css должен содержать этот код:

li.button a.box1, li.button a.box2, li.button a.box3, li.button a.box4, li.button a.box5, li.button a.box6

Также не забываем про наши скрипты. В папке folder создаем папку js и помещаем в нее скрипт jquery-1.4.2.js, jquery.easing.1.3.js и script.js.

Чтобы наша страничка была не такой унылой, я создал для нее красочный фон. Для этого в папке folder необходимо создать папку img и поместить в нее файл font.jpg. Делать это необязательно. Просто в этом случае фон страницы будет черного цвета.

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

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

Шаг 2.

Для того чтобы понять, как устроена работа данного меню, рассмотрим исходные коды файлов index.html, style.css и script.js.

Итак, рассмотрим файл index.html. А именно вот эту часть кода:

Она представляет собой в браузере пункт меню «ГЛАВНАЯ» с раскрывающимися подпунктами меню «Пункт1», «Пункт2», «Пункт3», «Пункт4».

Подпункты меню «Пункт1», «Пункт2», «Пункт3», «Пункт4» скрыты за счет свойства display: none;. Для того чтобы увидеть второй уровень меню Вам необходимо сделать один клик по пункту меню «ГЛАВНАЯ». После этого наше меню плавно раздвигается.

Данный эффект реализован при помощи ява-скрипта script.js.

Пункты меню «ФОТО», «ВИДЕО», «БЛОГИ», «ИГРЫ», «КОНТАКТЫ» реализованы аналогичным образом. Отличие друг от друга заключается в количестве подпунктов меню, поэтому их рассматривать мы не будем.

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

Файл style.css.

В этом файле я хочу обратить Ваше внимание на стили классов button и dropdown (стили для пунктов меню и их подпунктов, соответственно). Рассмотрим их:

Источник