Вертикальное меню разворачивающееся css

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

С помощью псевдокласса :target можно создать многое, например, переключение между вкладками с использованием только CSS3. Одним из главных преимуществ кода CSS является то, что можно задавать любые стили коду HTML, так что мы преобразуем ту разметку, чтобы она выглядела как вертикальное разворачивающееся меню.

Этот способ работает в браузерах Internet Explorer от версии 9, Chrome, Firefox, Safari и Opera, и для его работы не требуется JavaScript или изображения. К сожалению, в браузерах Internet Explorer версий 6, 7 и 8 это решения не будет работать, так что можно использоваться, к примеру, библиотеку JavaScript selectivizr или спрятать этот элемент от пользователей и показывать вместо этого сообщение о необходимости обновить браузер.

Код HTML

Этот код HTML5 близок к коду, использованному для создания переключения между вкладками. Мы только заменили класс статьи на accordion и переименовали некоторые идентификаторы для большей понятности. Еще тут у нас 5 разделов, так как так лучше выглядит:

Title One 
This content appears on page 1.
  
Title Two 
This content appears on page 2.
 
 
Title Three 
This content appears on page 3.
 
 
Title Four 
This content appears on page 4.
 
 
Title Five 
This content appears on page 5.
 
 

Как и там, заголовок раздела, на который можно нажимать, содержится в каждом разделе в теге h2.

Код CSS

Сначала зададим стили блоку статей и элементам раздела. Каждый раздел сначала закрыт, и его высота равна 2em, обратите внимание, что значение свойства переполнение задано как скрытое:

article.accordion < display: block; width: 30em; padding: 0.5em 0.5em 1px 0.5em; margin: 0 auto; background-color: #666; border-radius: 5px; box-shadow: 0 3px 3px rgba(0,0,0,0.3); >article.accordion section

Теперь название раздела будет занимать все доступное место в закрытом состоянии:

article.accordion section h2 < font-size: 1em; font-weight: bold; width: 100%; line-height: 2em; padding: 0; margin: 0; color: #ddd; >article.accordion section h2 a

А теперь можно задать стили для развернутого состояния активного раздела с помощью псевдокласса :target. Мы задаем большую высоту и цвет фона, после чего увеличиваем и меняем цвет и у названия:

article.accordion section:target < height: 15em; background-color: #fff; >article.accordion section:target h2

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

article.accordion section, article.accordion section h2

Этот код 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, вордпресс веб-разработка, меню и навигация, сниппеты.

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

Источник

Создаем эффектное вертикальное меню на HTML5 и CSS3

Всем привет! Сегодня мы рассмотрим пример по созданию красивого вертикального меню на jQuery и CSS3, которое было создано в PSD Орманом Кларком (скачать .psd).

Мы будем использовать минимально возможное количество изображений – только для иконок возле названия. При желании, изображения можно объединить в спрайт при помощи SpriteRight.

Шаг 1. Базовая HTML-разметка

Сначала давайте создадим пустой HTML5 документ:

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

Шаг 2. Шрифты с изменяющимся размером

Для начала убедимся, что меню отображается правильно. Добавим следующие правла в файл css/styles.css . Они установят для списка отступы равные нулю, и удалят стиль списка:

Шаг 3. CSS стиль основного меню

Сейчас мы можем приступить к написанию стилей для меню. Мы установим ширину и высоту меню ul auto , и затем добавим тень. Благодаря автоматически устанавливаемой высоте, тень будет появляться, когда слайдер открывается. Далее, для анкоров мы добавим ширину 100%; это будет означать, что их размер будет равен размеру контейнера (в нашем случае 220px). Для указания их высоты мы будем использовать em, для этого вернемся к нашему основному размеру шрифта, равному 13px. В .psd файле размер шрифта установлен в 36px, так что это будет нашей целью. Мы берем 36, и делим его на 13, получается примерно 2.75em (36 / 13 = 2.76923077). Поэтому мы укажем размер анкоров равным 2.75em, и такую же высоту строки, чтобы выровнять текст по вертикали по центру. Затем добавим небольшой отступ, чтобы оставить место для иконки. Мы добавим CSS3 градиент для фона, потом поменяем шрифт (будем использовать Helvetica Neue) и добавим белую тень для шрифта. Обратите внимание, мы не используем font-size; так как мы установили размер шрифта для контейнера (в 13px), то он будет наследоваться.

Источник