Как создать выпадающее меню css
Содержание:
- Создадим-ка горизонтальную навигационную модель
- CSS Учебник
- Разметка
- Что это такое
- Подпункты в меню: выпадающий список
- Читайте также
- Примеры
- Выпадающее меню (многоуровневое)
- Простое вертикальное меню
- События
- JAVASCRIPT
- Отключение списка и мультивыбор
- Использование
- Основной выпадающий (раскрывающийся) список
- Разметка HTML
- Раздвижное меню-аккордеон
- Как перенести контакты c помощью Bluetooth
- HTML
- Пляски с бубном для Internet Explorer 6
- Добавить меню для сайта wordpress
- Разберемся с jQuery
Создадим-ка горизонтальную навигационную модель
Такой вид навигации наиболее популярен. При горизонтальном оформлении панели все пункты меню расположены в шапке страницы или в «подвале» (иногда навигационные элементы дублируются, отображаясь одновременно и сверху, и снизу).
В качестве примера мы создадим горизонтальную панель, пункты меню которого будут оформлены при помощи css (каскадных таблиц стилей), а точнее трансформированы. Так, каждый отдельный элемент будет находится в скошенном прямоугольнике. Заинтриговал?
К сожалению, каждый браузер работает с данным свойством по-своему, не смотря на прописанные стандарты. Поэтому для обозначения того или иного браузера были созданы специальные префиксы:
- -ms- (Internet Explorer)
- -o- (Opera)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
А теперь полученные знания применим к написанию примера.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Горизонтальная панель</title>
<style>
li {
display: inline-block;
margin-right: 6px;
background: #FF8C00;
transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-moz-transform: skewX(-45deg);
}
a {
display: block;
padding: 18px 35px;
color: #fff;
transform: skewX(40deg);
-webkit-transform: skewX(40deg);
-o-transform: skewX(40deg);
-ms-transform: skewX(40deg);
-moz-transform: skewX(40deg);
}
li:hover {
background: #1C1C1C;
}
</style>
</head>
<body>
<menu>
<li>Главная</li>
<li>О компании</li>
<li><a href="3.html">Продукция</a></li>
<li><a href="4.html">Контакты</a></li>
</menu>
</body>
</html>
|
CSS Учебник
CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности
Разметка
Большинство выпадающих меню основано на использовании громоздкой разметки и Javascript. Наш вариант будет использовать простую структуру HTML кода и 19 строк CSS, с небольшим вкраплением CSS3 для придания внешнего лоска.
<ul id="nav"> <li> <a href="#" title="Вернуться на главную страницу">Главная</a> </li> <li> <a href="#" title="Информация о компании">О нас</a> <ul> <li><a href="#">Продукты</a></li> <li><a href="#">Команда</a></li> </ul> </li> <li> <a href="#" title="Что мы можем для вас сделать">Услуги</a> <ul> <li><a href="#">Услуга один</a></li> <li><a href="#">Услуга два</a></li> <li><a href="#">Услуга три</a></li> <li><a href="#">Услуга четыре</a></li> </ul> </li> <li> <a href="#" title="Наша продуктовая линейка">Продукты</a> <ul> <li><a href="#">Маленький продукт (первый)</a></li> <li><a href="#">Маленький продукт (второй)</a></li> <li><a href="#">Маленький продукт (третий)</a></li> <li><a href="#">Маленький продукт (четвертый)</a></li> <li><a href="#">Большой продукт (пятый)</a></li> <li><a href="#">Большой продукт (шестой)</a></li> <li><a href="#">Большой продукт (седьмой)</a></li> <li><a href="#">Большой продукт (восьмой)</a></li> <li><a href="#">Невообразимый продукт (девятый)</a></li> <li><a href="#">Невообразимый продукт (десятый)</a></li> <li><a href="#">Невообразимый продукт (одиннадцатый)</a></li> </ul> </li> <li> <a href="#" title="Как с нами связаться">Контакт</a> <ul> <li><a href="#">Часы работы</a></li> <li><a href="#">Местоположение</a></li> </ul> </li> </ul>
Разметка достаточно проста и представляет собой серию вложенных списков . Нет никаких ID, классов и элементов. Простой ясный код.
Элемент содержит серию элементов . Все пункты, которые нуждаются в выпадающих подпунктах, содержат другой элемент
Обратите внимание, что элемент выпадающих подпунктов не имеет класса. Мы используем каскадные стили, сохраняя разметку как можно более чистой
Что это такое
Подпункты в меню: выпадающий список
Мы с вами рассмотрели основные группы навигационных панелей, однако существует еще несколько разновидностей или лучше сказать дополнений.
Иногда возникают такие ситуации, когда некоторые из пунктов дополняют основные. В этом случае не обойтись без выпадающих списков. Они создаются путем преобразований инструментами css.
Ниже я прикрепил код небольшой программки, в которой реализуется данный подход.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Выпадающий список</title>
<style>
body {
padding-left: 30%;
font-size: 18px;
}
.m-menu {
margin: 0;
padding: 9px;
width:50%;
text-align:center;
border: 3px solid #000;
background: #FF8C00;
}
.m-menu > li {
position: relative;
display: inline-block;
}
.m-menu a {
display: block;
margin-left: -2px;
padding: 13px;
color: #fff;
border-left: 3px solid #fff;
}
.m-menu a:hover {
background: #1C1C1C;
}
.m-menu .s-menu {
left: 10px;
position: absolute;
display: none;
width: 155px;
margin: 0;
padding: 0;
list-style: none;
background: #FF8C00;
}
.m-menu .s-menu a {
border: 1px solid #000;
}
.m-menu > li:hover .s-menu {
display: block;
}
</style>
</head>
<body>
<ul class="m-menu">
<li><a href="#index">Главная</a></li>
<li>
<a href="#product">Продукция</a>
<ul class="s-menu">
<li><a href="#1">Конфеты</a></li>
<li><a href="#2">Торты</a></li>
<li><a href="#3">Печенье</a></li>
</ul>
</li>
<li><a href="#adress">Контакты</a></li>
</ul>
</body>
</html>
|
В данном примере я разделил единицы меню на два класса:
- m-menu
- s-menu
Первый класс отвечает за основное меню, а s-menu – за подменю.
В коде можно встретить такой прием, как .m-menu > li:hover или .m-menu > li.
При этом знак «>» видоизменяет селектор так, чтобы блочно-строчными были только объекты, относящиеся к верхнему уровню.
Изначально подменю было задано display: none, что оповещает обработчик скрывать данный объект. После наведения на элемент навигации с указанием hover, значение свойства display меняется на block и поэтому открывается выпадающий список.
Как видите, реализация такого приема очень простая.
Теперь вы освоили основные виды навигационных панелей и можете самостоятельно их видоизменять, дополнять и модернизировать. Если вам понравилась моя статья, то подписывайтесь на обновления блога и делитесь источником знаний с друзьями и коллегами. Пока-пока!
Прочитано: 1532 раз
Читайте также
Примеры
Переключение обернуть выпадающем (ваша кнопка или ссылка) и в выпадающем меню в , или другой элемент, который заявляет, . Раскрывающиеся списки могут быть вызваны из или элементы, чтобы лучше соответствовать вашим потенциальным потребностям.
Одиночная кнопка выпадающего меню
Ни один можно превратить в выпадающем тумблер с некоторыми изменениями разметки. Вот как вы можете положить их на работу с элементы:
Dropdown button
И с элементами:
Dropdown link
Самое приятное, что вы можете сделать это с любым вариантом кнопки:
Default
Primary
Success
Info
Warning
Danger
Split кнопка с выпадающим меню
Аналогичным образом создайте сплит кнопки раскрывающиеся списки с практически такой же разметки, как одной кнопки раскрывающиеся списки, но с добавлением для правильного шрифта выпадающего каре.
Мы используем эту экстра-класса, чтобы уменьшить горизонтальную по обе стороны от каретки на 25% и удалите , который добавляется для обычной кнопки выпадающих меню. Эти изменения держать курсор по центру кнопку разделить и обеспечить более точного размера нажмите рядом с основной кнопкой.
Default
Toggle Dropdown
Primary
Toggle Dropdown
Success
Toggle Dropdown
Info
Toggle Dropdown
Warning
Toggle Dropdown
Danger
Toggle Dropdown
Выпадающее меню (многоуровневое)
До этого момента рассматривалось простое одноуровневое меню. Как показывает практика, очень часто, через какое-то время возникает необходимость к одному или нескольким основным пунктам добавить подпункты. Поэтому:
Изначально любое меню нужно создавать как многоуровневое!
В последние годы реально-многоуровневые меню уходят в прошлое. Двух уровней, обычно, вполне достаточно, остальные — оформляются отдельным дополнительным меню.
В многоуровневом меню один или несколько пунктов могут содержать вложенные меню с подпунктами, которое в исходном состоянии скрыто (не обязательно, но будем рассматривать именно этот вариант). При наведении на родительский пункт осуществляется вывод подменю.
За основу взят код предыдущего примера. К одному из пунтков добавлен вложенный список второго уровня.
HTML-код 2-х уровневого меню:
<nav class="menu_color">
<ul class="my_menu">
<li><a href="#/">пункт 1<a><li>
<li class="parent"><a href="#/">родительский пункт 2<a>
<ul class="sub-menu">
<li><a href="#/">дочерний подпункт 1<a><li>
<li><a href="#/">дочерний подпункт 2<a><li>
<ul>
<li>
<li><a href="#/">пункт 3<a><li>
<li class="active"><a href="#/">пункт 4<a><li>
<li><a href="#/">пункт 5<a><li>
<ul>
<nav>
Добавлены классы — родительский тег, содержащий подменю, и — вложенный список выпадающего меню.
Разбиваем на несколько этапов:
- Оформление
- Скрыть в исходном состоянии
- Вывод при наведении на родительский пункт
Цветовое оформление
/* Оформление sub-menu */
.menu_color .sub-menu {
background #f5f5f5;
border 1px solid #f5f5f5;
}
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
color #555;
background rgba(, , , );
}
/* Офррмление подпунктов при наведении */
.menu_color .sub-menu li a:hover{
color #fff;
background #555;
}
/* Разделитель для пунктов sub-menu */
.menu_color .sub-menu > li + li > a {
border-top 1px solid #fff;
box-shadow -1px #ddd;
padding-left 40px /* Добавляем отступ для подпунктов */
}
Чтобы не усложнять код, размеры и отступы оставлены те же, что и в основном меню.
Позиционирование и скрытие
Позиционирование осуществляется относительно родительского . (Именно для этого при сбросе и установке для него было задано )
/*Общие*/
.my_menu .sub-menu {
display none;
position absolute;
top ;
min-width 200px;
z-index 9999;
}
Вывод
В зависимости от расположения основного меню (левая/правая боковая колонка), подменю может выпадать как вправо, так и влево. Поэтому для определения стилевых правил используем класс родительского блока (В исходном html-коде класс не указан, т.к. к коду меню отношения не имеет).
/* Вывод */
.my_menu .parent:hover .sub-menu {
display block;
top 4px;
}
/* со смещением вправо */
.sidebar_left .my_menu .parent:hover .sub-menu {
left 100%;
margin-left -10px;
}
×
Информация
Если у родительского блока нет класса, или он применяется как к правой так и к левой колонкам — нужно этот класс добавить к тегу .
Подменю выпадающеее влево
Если навигационное меню расположено в правой колонке, то будет логично если подменю выпадает слева. В противном случаее оно может оказаться за пределами экрана.
Аналогично с предыдущим примером привязываем стили к родительскому блоку правой колонки .
Вы спросите, для чего все эти сложности? Да, действительно, можно просто переписать стили для правой колонки без всяких дополнительных классов.., и делать это каждый раз, когда по тем или иным причинам нужно будет переместить (или скопировать) меню из одной колонки в другую …
Цель — универсальность! Вы один раз прописываете код, а потом размещаете меню где хотите и оно будет работать правильно!
/* Смещение влево */
.sidebar_right .my_menu .parent:hover .sub-menu {
right 100%;
left auto;
margin-right -5px;
}
Простое вертикальное меню
Исходный html-код меню будет выглядеть так:
<nav class="menu_color">
<ul class="my_menu">
<li><a href="#/">пункт 1<a><li>
<li><a href="#/">пунтк 2<a><li>
<li><a href="#/">пункт 3<a><li>
<li class="active"><a href="#/">пункт 4<a><li>
<li><a href="#/">пункт 5<a><li>
<ul>
<nav>
Кроме основных классов, рассмотренных в предыдущем материале, добавлен класс для активного пункта (ссылка на текущую страницу).
Сброс и установка стилей по умолчанию
Избавляемся от стилей для списков, назначенных браузером (или шаблоном) по умолчанию.
Для этого используем класс . Кроме того прописываем для него общие стилевые правила, которые будут применяться ко всем меню, даже если будет измененна тема оформления.
Здесь же можно задать размеры и другие свойства шрифта, если они отличаются от основных.
Файл my-menu.css
/* Убираем маркеры и отступы */
.my_menu {
list-stylenone;
margin;
padding;
}
.my_menu li {
margin;
padding;
positionrelative;
}
/* Общие правила для пунктов меню */
.my_menu li a {
displayblock;
margin;
padding12px 20px;
text-decoration none;
}
/*Наведение на активный пункт меню - курсор обычный */
.my_menu li.active > a:hover {
cursor default;
}
Цветовое оформление
Прежде чем прописывать стили, составляем список объектов к которым обычно применяется цветовое оформление:
- Цвет фона меню
- Цвет и фон ссылки. При оформлении пунктов меню стилевые правила применяются непосредственно к ссылкам, т.е тегу
- Цвет и фон ссылки при наведении курсора
- Цвет и фон активной ссылки
×
Примечание
На практике не обязательно применять все стили, достаточно лишь некоторые. Например при наведении иногда достаточно изменение только цвета ссылки или добавить подчеркивание.
/* === Цветовое оформление menu_color === */
.menu_color {
background#555;
}
/* Оформление пункта */
.menu_color > ul > li > a {
color#999;
background rgba(, , , );
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover {
color #bbb;
background rgba(, , , 0.1);
}
/* Активный пункт */
.menu_color > ul > li.active > a,
.menu_color > ul > li.active > a:hover {
color#fff;
backgroundrgba(, , , 0.4);
}
Пояснения:
- Если возникнет необходимость к определенным пунктам меню добавить подпункты, т.е. сделать меню многоуровневым, то конструкция позволит ограничить применение стилей только к пунктам меню первого уровня. Для подменю можно будет прописать другие стили оформления.
- Использование прозрачности при задании цвета фона — . Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона меню, фон активного пункта и подсветка пунктов при наведении изменятся автоматически. Впрочем, ничто не мешает вам задать понравившиеся цвета явно.
×
Замечание
Цвет фона меню задавать не обязательно, если он наследуется от родительского блока.
Разделители пунктов
Стили привязываем к классу , т.к. это элемент оформления, а не разметки.
Конструкция используется для присвоения стилей всем пунктам основного меню, кроме первого. Таким образом убирается верхняя рамка первого пункта меню.
Если в этом нет необходимости — заменяем на
/* Разделитель пунктов меню */
.menu_color > ul > li + li > a {
border-top 1px solid rgba(255, 255, 255, 0.1);
box-shadow -1px rgba(, , , 0.15);
}
Повторяем тот же трюк с использованием rgba. Цвета для верхней границы и тени заданы полупрозрачными — черный 15% прозрачности и белый 10% соответственно.
Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона, то цвет рамки и тени изменится автоматически!
События
Так как нам нужно проверять ширину окна браузера при загрузке страницы и при изменении размеров, поместим весь код условий в специальную функцию .
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(".nav").toggle();
});
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
adjustMenu();
});
function adjustMenu() {
if (ww < 800) {
$(".toggleMenu").css("display", "inline-block");
$(".nav").hide();
$(".nav li a.parent").click(function(e) {
e.preventDefault();
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$(".nav li").hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}
}
Для вызова функции при изменении окна браузера используем функцию для связки с событиями и . В данных событиях переопределим переменную новым значением ширины окна браузера.
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
На данном этапе у нас появились новые проблемы:
- Все меню пропадает, если окно изменяться от маленького размера к большому.
- Событие hover продолжает работать по варианту для мобильных устройств.
JAVASCRIPT
Для выполнения работы нам нужно использовать JavaScript. Так как это основной JS для всех следующих демо, давайте рассмотрим его сейчас.
//...
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
//...
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-1').removeClass('active');
});
});
Что же именно делает этот скрипт? Во-первых, он переключает класс .active, при нажатии на элементе. Это означает, если оболочка не имеет этот класс, он добавляет его и потом, если активным является другое меня — соответственно удаляет его. Во -вторых, он позволяет закрывать список при нажатии на любом другом месте на экране.
Теперь мы понимаем, как это работает, и пришло время для создания некоторых раскрывающихся списков!
Отключение списка и мультивыбор
Далее мы с Вами рассмотрим пример в котором отключим целый список и составим список, в котором допускается выбрать несколько значений сразу:
<!DOCTYPE html> <html> <head> <title>Атрибуты disabled и multiple тега <select></title> </head> <body> <select name = "firstlist" disabled> <!-- список отключен --> <option value = "1">1</option> <option value = "2">2</option> <option value = "3">3</option> </select> <select name = "secondlist" multiple> <!-- список с возможностью выбора нескольких значений --> <option value = "A">A</option> <option value = "B">B</option> <option value = "C">C</option> <option value = "D">D</option> </select> </body> </html>
В этом примере мы создали два раскрывающихся списка. Для первого списка мы использовали атрибут disabled, который не дает взаймодействовать со списком (отключает его).
Для второго списка мы использовали атрибут multiple, который указывает, что допускается выбрать в списке несколько вариантов сразу (через Ctrl в Windows и через Command в Mac).
В браузере это выглядит следующим образом:
Рис. 39б Пример использования атрибутов disabled и multiple тега <select>.
Использование
Через атрибуты данных или JavaScript, выпадающее плагин переключает скрытое содержание (выпадающие меню), переключая класс родительского элемента списка.
На мобильных устройствах, открывая выпадающий добавляет как площадь нажатия для закрытия выпадающего меню При нажатии за меню требование для правильной поддержки iOS. Это означает, что переход от открытого выпадающего меню в другое меню требуется дополнительное нажатие на мобильный.
Примечание: атрибут является основанием для закрытия выпадающего меню на уровне приложения, так что это хорошая идея, чтобы всегда использовать его.
Через JavaScript
Вызвать меню через JavaScript:
еще требуется
Независимо от того, вызываете ли вы свой выпадающий список через JavaScript или вместо этого используете data-api, всегда должно присутствовать на спусковом элементе раскрывающегося меню.
События
Все выпадающие события обстреляли ’родительский элемент S и свойство, значением которого является переключение элемента привязки.
| Событие | Описание |
|---|---|
| Это событие немедленно срабатывает при вызове метода экземпляра-шоу называется. | |
| Это событие запускается, когда выпадающее меню становится видимым для пользователя (будет ждать CSS переходы для завершения). | |
| Это событие немедленно уволили, когда скрывать метод экземпляра называется. | |
| Это событие запускается, когда в списке есть, который скрыт от пользователя (будет ждать CSS переходы для завершения). |
Основной выпадающий (раскрывающийся) список
Создайте раскрывающийся список, который появляется, когда пользователь наводит указатель мыши на элемент.
Пример
<style>.dropdown { position: relative;
display: inline-block;}.dropdown-content { display:
none; position: absolute;
background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding:
12px 16px; z-index: 1;}.dropdown:hover
.dropdown-content { display: block;}</style><div class=»dropdown»>
<span>Mouse over me</span>
<div class=»dropdown-content»> <p>Hello World!</p> </div></div>
Объяснение примера
HTML) Используйте любой элемент, чтобы открыть выпадающий контент, например элемент <span> или <button>.
Используйте элемент контейнера (например, <div>), чтобы создать выпадающий контент и добавить в него все, что вы хотите.
Оберните элемент <div> вокруг элементов, чтобы правильно разместить раскрывающийся контент с помощью CSS.
CSS). Класс использует , который нужен, когда мы хотим, чтобы содержимое раскрывающегося списка размещалось прямо под кнопкой раскрывающегося списка (используя ).
Класс содержит фактический раскрывающийся контент. По умолчанию он скрыт и будет отображаться при наведении мыши (см. ниже)
Обратите внимание, что для установлено значение 160px. Можете изменить его
Совет. Если вы хотите, чтобы ширина раскрывающегося содержимого была такой же ширины, как и раскрывающаяся кнопка, установите для значение 100% (и для включения прокрутки на маленьких экранах).
Вместо использования border мы использовали свойство CSS , чтобы раскрывающееся меню выглядело как «карточка».
Селектор используется для отображения раскрывающегося меню, когда пользователь наводит указатель мыши на раскрывающуюся кнопку.
Разметка HTML
Меню построено на неупорядоченном списке и имеет один уровень (очень часто, такого уровня вложенности хватает для решения задач интерфейса приложения).
<ul id="nav">
<li><a href="#"><img src="images/t1.png" /> Главная</a></li>
<li><a href="#" class="sub" tabindex="1"><img src="images/t2.png" />HTML/CSS</a><img src="images/up.gif" alt="" />
<ul>
<li><a href="#"><img src="images/empty.gif" />Ссылка 1</a></li>
<li><a href="#"><img src="images/empty.gif" />Ссылка 2</a></li>
<li><a href="#"><img src="images/empty.gif" />Ссылка 3</a></li>
<li><a href="#"><img src="images/empty.gif" />Ссылка 4</a></li>
<li><a href="#"><img src="images/empty.gif" />Ссылка 5</a></li>
</ul>
</li>
<li><a href="#" class="sub" tabindex="1"><img src="images/t3.png" />jQuery/JS</a><img src="images/up.gif" alt="" />
<ul>
<li><a href="#"><img src="images/empty.gif" />Ссылка 6</a></li>
<li><a href="#"><img src="images/empty.gif" />Ссылка 7</a></li>
<li><a href="#"><img src="images/empty.gif" />Ссылка 8</a></li>
<li><a href="#"><img src="images/empty.gif" />Ссылка 9</a></li>
<li><a href="#"><img src="images/empty.gif" />Ссылка 10</a></li>
</ul>
</li>
<li><a href="#"><img src="images/t2.png" />PHP</a></li>
<li><a href="#"><img src="images/t2.png" />MySQL</a></li>
<li><a href="#"><img src="images/t2.png" />XSLT</a></li>
</ul>
Раздвижное меню-аккордеон
×
Несколько слов вступления
В данном примере рассмотрена технология создания аккордеон-меню, раскрывающегося по .
Я бы не рекомендовал без необходимости использовать такое меню на сайте. Элементы страницы не должны жить своей жизнью (хлопающие как простыни на ветру подменю, раскрывающиеся аккордеоны, если его не аккуратно задеть мышкой …
Аккордеон должен раскрываться по , а это уже JS. А рассмотрение javascript выходит за рамки раздела HTML/CSS…
Попробуем создать аккордеон-меню из простого выпадающего меню, внеся минимальные изменения в код разметки и стили.
Добавлен класс к классу родительского контейнера, а класс заменен на . Можно было бы не заменять, а просто переопределить, но это усложнит пример для понимания.
<nav class="menu_color">
<ul class="my_menu my_accordion">
<li><a href="#/">пункт 1<a><li>
<li class="parent"><a href="#/">родительский пункт 2<a>
<ul class="sub-accordion-menu>
<li><a href="#/">дочерний подпункт 1<a><li>
<li><a href="#/">дочерний подпункт 2<a><li>
<ul>
<li>
<li><a href="#/">пункт 3<a><li>
<li class="active"><a href="#/">пункт 4<a><li>
<li><a href="#/">пункт 5<a><li>
<ul>
<nav>
Стили для выпадающего меню были привязаны к классу .sub-menu, который мы заменили на . Чтобы не дублировать стилевые правила — группируем классы.
Группирование позволяет установить группу свойств сразу для нескольких селекторов и классов, что делает код более читабельным.
Изменения кода — минимальные! Мы просто через запятую дописали новые классы к предыдущему примеру:
/* === Группировка классов === */
/* Убираем маркеры и отступы */
.my_menu, .sub-menu,
.sub-accordion-menu {
list-stylenone;
margin;
padding;
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover,
.my_menu .parent .sub-accordion-menu li a:hover {
color #bbb;
background rgba(, , , 0.1);
}
/* Разделитель пунктов меню */
.menu_color > ul > li + li > a,
.menu_color .sub-accordion-menu li > a {
border-top 1px solid rgba(255, 255, 255, 0.1);
box-shadow -1px rgba(, , , 0.15);
}
После этого добавим стили, для закрытого и раскрытого аккордеона:
/* === Закрытый ===*/
.sub-accordion-menu {
display block;
position static;
width auto;
overflow hidden;
border none;
margin !important;
max-height ; /* Скрываем выпадающее подменю */
transition max-height 1s; /* Задержка раскрытия */
}
/* === Открытый ===*/
.sub-accordion-menu {
max-height 1000px;
}
.sub-accordion-menu > li > a {
padding-left 40px; /* Добавляем отступ для подпунктов */
}
Примечание.Почему было использовано свойство , а не ? Потому что мы не знаем высоту раскрывающегося подменю, а при использовании значения — анимация не срабатывает.
Как перенести контакты c помощью Bluetooth
HTML
Code
<div id=»m_body»> <ul> <li><a href=»//yraaa.ru/» onclick=»menuOpen(‘s_mn_1’);return(false)»>Пункт №1</a> <ul id=»s_mn_1″> <li><a href=»//yraaa.ru/»>Подпункт меню №1</a></li> <li><a href=»//yraaa.ru/»>Подпункт меню №2</a></li> </ul> </li> <li><a href=»//yraaa.ru/» onclick=»menuOpen(‘s_mn_2’);return(false)»>Пункт №2</a> <ul id=»s_mn_2″> <li><a href=»//yraaa.ru/»>Подпункт меню №1</a></li> <li><a href=»//yraaa.ru/»>Подпункт меню №2</a></li> </ul> </li> <li><a href=»//yraaa.ru/» onclick=»menuOpen(‘s_mn_3’);return(false)»>Пункт №3</a> <ul id=»s_mn_3″> <li><a href=»//yraaa.ru/»>Подпункт меню №1</a></li> <li><a href=»//yraaa.ru/»>Подпункт меню №2</a></li> <li><a href=»//yraaa.ru/»>Подпункт меню №3</a></li> </ul> </li> </ul> </div>
Раскрытие пунктов вертикального выпадающего меню (выпадение по-другому) осуществляется при клике на пункт, т.е. используется событие onclick. В случае же если хотите осуществить раскрытие при наведении, используйте mouseover.
Пляски с бубном для Internet Explorer 6
Конечно же, IE 6 ломает стройность решения. В старых версиях IE псевдо-класс hover работает только для элементов ссылок. Поэтому придется использовать очень простую заплатку для этого корявого браузера. Воспользуемся условным комментарием IE для присоединения небольшого кода JavaScript, который будет приводить в порядок работу приложения. Хорошая новость — современные браузеры просто не увидят данный код JavaScript, который будет работать только для IE. Ниже приведенную строку надо разместить в конце страницы HTML:
<!--><script type="text/javascript" src="iehoverfix.js"></script><!-->
И собственно код JavaScript, который размещается в файле iehoverfix.js. Мы просто добавляем класс ‘hover’ элементам li в меню, когда курсор мыши проходит над ними. Класс CSS используется так же, как и псевдо-класс hover (смотри комментарии к коду CSS).
function addhover() {
var navli,i;
// Цикл по всем элементам навигации
navli = document.getElementById('centeredmenu').getElementsByTagName('li')
for(i=0;i<navli.length;i++) {
// Добавляем обработчики событий onmouseover и onmouseout
navli.onmouseover=function(){hover(this,'hover');};
navli.onmouseout=function(){hover(this,'');};
}
}
function hover(o,sClass) {
if (o) {
o.className = sClass;
}
}
addhover();
Добавить меню для сайта wordpress
Обычно, я рассказываю в своих уроках о CMS WordPress, так как позиционирую себя как специалиста по Вордпресс. В этом уроке, также хотелось бы поговорить о выпадающих меню WP.
По сути, выпадающее меню wordpress ни чем не отличается от менюшек для остальных CMS, главное правильно вывести и добавить его.
Бывает приносят верстку, а там вот такой чудо хтмл код:
Ну и как такое чудо, можно по человечески вставить в WP – по сути без переделки никак. Ну и начинается возня с заказчиком. Он же верстку в Равшана с Джамшутом заказал, так сказать бюджетный вариант на базе говнокода.
В этой записи можно посмотреть как правильно в wordpress добавить меню. Конкретно в этом посте нас интересует работа функции wordpress:
Все примеры выше, выпадающее меню на списках, идеально подходят для установки на wordpress.
Краткая инструкция выпадающее меню wordpress – установка
1) Находим подходящий для себя шаблон меню выше.
2) Скачиваем пример к себе на комп, разархивируем его.
3) На место, где будет выводится меню устанавливаем хтмл код, который отвечает за меню. Он начинается и заканчивается в моих примерах тегом <nav></nav> (тег и идентификатор обязательные для копирования, иначе стили не будут работать)
4) Если у примера есть javascript, его нужно подключить в ваш шаблон. Библиотеку jQuery подключать не нужно, так как она у WP подключается автоматически. Главное добавлять код после функции wp_head().
5) Стили из примера нужно скопировать у файл style.css вашей темы.
6) Для вывода меню используем функцию wp_nav_menu(), ее нужно вставить вместо хтмл который находится между <nav> и </nav>.
На этом у меня все, в качестве спасибо можно поделиться ссылкой со своими друзьями в соц. сетях:
Следите за этим постом, по мере возможности, я буду добавлять сюда ссылки на новые шаблоны выпадающих меню.
Разберемся с jQuery
Теперь нам надо создать пользовательский скрипт. Мы создадим его в нашем HTML документе, добавим тэг сразу после декларирования jQuery:
Все наши функции и код будут размещены внутри данного тэга. Теперь приступим к добавлению кода, который нам нужен. Ниже приводятся куски кода с объяснениями того, что происходит.
Сначала наш документ загружается и, когда он загружен на 100%, скрипт приступает к действию:
Мы помещаем весь код нашего скрипта внутрь выше описанной функции. Сначала нам нужно скрыть неупорядоченный список с помощью следующего кода:
Теперь добавляем функцию, которая сворачивает/разворачивает список:
Давайте разберем далее подробно, что происходит в данном коде. Когда вы нажимаете кнопку мыши на «+», который является элементом h3 span, элемент ul, который является следующим элементом родительского элемента h3 span (это h3) начинает сворачиваться/разворачиватся.
Теперь сделаем наш список боле интересным. Выделим четные строки списка с помощью следующего кода:
