CSS позволяет реализовать выпадающее меню по клику без JavaScript. Сделать это можно c помощью CSS псевдоклассов :focus, :active, :hover и некоторых маленьких хитростей.
Ну что же, попробуем реализовать выпадение меню по клику на небольшом примере.
Допустим, у нас есть следующая html-структура:
<a class="main-item" href="javascript:void(0);" tabindex="1" >Открыть подменю</a>
<ul class="sub-menu">
<li><a href="#1">подпункт 1</a></li>
<li><a href="#2">подпункт 2</a></li>
<li><a href="#3">подпункт 3</a></li>
</ul>
Список с классом «sub-menu» по-умолчанию будет скрыт, и будет появляться при получении фокуса соответствующим пунктом главного меню с классном «main-item».
В итоге мы получим примерно такой css-код:
.sub-menu
{
display: none;
}
.main-item:focus ~ .sub-menu,
.main-item:active ~ .sub-menu,
.sub-menu:hover
{
display: block;
}
Вот и все, никакой магии и javascript-а, только ловкость рук и css.
Демонстрация:
Эта реализация будет работать во всех современных веб-браузерах и в IE7+ (в IE6 не проверялось).
А теперь немного моментов на которые следует обратить внимание:
- псевдокласс :active используется для того, чтобы данная реализация работала в IE7;
- атрибут tabindex=’1′ используется для того, чтобы псевдокласс :focus корректно работал в браузерах на движке webkit;
- селектор .sub-menu:hover нужен для того, чтобы у нас была возможность щёлкнуть по ссылкам внутри выпавшего подменю и оно не спряталось в следствии того, что главный пункт потеряет фокус.
Воспользовалась вашим способом, но у меня почему-то не открываются ссылки из подменю. по щелчку на ссылку меню сворачивается. Подскажите, пожалуйста, как это решить
Должно быть Вы не прописали css, который заставляет меню отображаться при наведении на него.
В примере:
.sub-menu:hover {
display: block;
}
Если хотите, можите реализовать Ваш пример на http://jsfiddle.net/, сохранить и сбросить ссылку
А нельзя ли, чтобы по клику на ссылку и закрывалось также?
работает во всех браузерах кроме хрома. он скрывает focus. блин а идея классная. может и эту проблему с хромом тоже можно решить как то?
Должно быть Вы не обратили внимание на примечание:
>> — атрибут tabindex=’1′ используется для того, чтобы псевдокласс :focus корректно работал в браузерах на движке webkit;
Подскажите пожалуйста , возможно реализовать ,что б по клику второй раз на ссылку меню также сворачивалось ?
Думаю, что без событий JS реализовать скрытие по клику невозможно) Либо это будет просто магия :D
Спасибо, мне помог этот пример, а для чего используется тильда ~ и зачем в конце запятые?
Тильда — это CSS-селектор, который позволяет выбрать следующие соседние элементы (на том же уровне в DOM).
Пример:
<p>1</p>
<p>2</p>
<p id="ID">3</p>
<p>4</p>
<p>5</p>
#ID ~ p {color:red;}
Только 4, 5 будут красные.
Запятые позволяют задать несколько CSS-селекторов, для которых нужно задать одни и те же правила.
Спасибо огромное, помогло!!! Знала бы раньше о таком решении, сколько времени бы сохранила)))
Класс, оригинально и понятно.
Жаль, что невозможно закрыть по клику. Но этот вопрос не к автору.
Спасибо.
Хм.. В Опере открывает нормально, в Хроме — нет..
Анна, реализовать возможно. С помощью checkbox и label. Все просто:
HTML:
Click me
подпункт 1
подпункт 2
подпункт 3
CSS:
/*скрываем наше меню и checkbox*/
.menu, #go {
display:none;
}
/*стилизуем кнопочку*/
.st {
padding:0 20px 0 20px;
background:green;
cursor:pointer;
color:white;
}
/*а вот собственно и само действие*/
#go:checked ~ .menu {
display:block;
}
———————————
Вуаля, все работает! А вот практика: http://jsfiddle.net/2XVya/
Админ исправь комментарий, не знал что html поддерживает :)
Обьясните пожалуйста, что означает cимвол тильды «~» ?
Не работает в internet explorer 8 =( есть варианты ?
Просто шикарно, очень помогло!))) Автору спасибо, респект и побольше бы таких людей как он)))
точно в IE 8 тоже не работает, в помойку короче…
доброго времени суток, подскажите пожалуйста , как организовать несколько подменю ,чтобы открывалось только то на которое кликают ? чтобы когда кликают на открыть подменю — открывалось только это подменю, а не все сразу
<a href=»void(0);» rel=»nofollow»>Открыть подменю</a>
<a href=»#1″ rel=»nofollow»>подпункт 1</a>
<a href=»#2″ rel=»nofollow»>подпункт 2</a>
<a href=»#3″ rel=»nofollow»>подпункт 3</a>
<a href=»void(0);» rel=»nofollow»>Открыть подменю1</a>
<a href=»#1″ rel=»nofollow»>подпункт 1</a>
<a href=»#2″ rel=»nofollow»>подпункт 2</a>
<a href=»#3″ rel=»nofollow»>подпункт 3</a>
Добрый день. Спасибо за хороший пример. Во многих местах искал, но такого решения не видел. Легко и просто.
еще один интересный пример выпадающего меню — http://siteacademy.ru/index.php/css/45-css3-dropdown-menu
Спасибо огромное!!!
Спасибо! Реализовал успешно на мобильной версии.
OrnaJS, хорошая библиотека для подобных задач с click, без JavaScript
Классная, только вопрос??? Как убрать маркеры? Кнопку сдвинуть влево или вправо?
В FF последне версии, нажимаю на меню, оно появляется, но при переносе мышки на меню — исчезает.
Отличный пример, спасибо. На основе него можно много интересного реализовать.
Здравствуйте!
Подскажите пожалуйста, как реализовать кликабельные строчки в таблице, чтобы при нажатии раскрывалась подменю снизу этой строчки
sourcebans.sourcetm.com/index.php?p=banlist — вот пример
Работает! Спасибо большое) Хорошо, что именно по щелчку открывается и не пропадает.
Спасибо! Очень помогли. Все просто, сердито и в отличии от других сайтов работает! ))
Не работает в IE8, нескольких версиях хрома (И да, я видел пометку про вебкит), некорректно работает в некоторых версиях FF. В общем из за полного отсутствия кроссбраузерности, совсем не рекомендую. Понимаю бы если бы IE ниже девятки не видел, пустяк, а вот хром с лисой уже проблема.
Дополнил возможность закрыть меню по «закрыть подменю».
CSS:
.sub-menu
{
display: none;
}
.main-item:focus ~ .sub-menu,
.main-item:active ~ .sub-menu,
.sub-menu:hover
{
display: block;
}
.main-close{
display:none;
position: absolute;
top:0px;
}
.main-item:focus,
.main-item:active ,
.sub-menu:hover {
opacity: 0;
}
.main-item:focus~.main-close,
.main-item:active~.main-close ,
.sub-menu:hover~.main-close {
display: block;
}
.position{
position:relative;
}
HTML:
Открыть подменю
Закрыть подменю
подпункт 1
подпункт 2
подпункт 3
Что значит символ «~» в блоке
.main-item:focus ~ .sub-menu,
.main-item:active ~ .sub-menu,
.sub-menu:hover
{
display: block;
}
?
На самом деле можно cделать сворачиваемость при повторном клике используя label, checkbox и :checked
Мне некогда писать всю реализацию. Уже сто раз делал. Лишь напишу ключевое решение
#nav input[type=»checkbox»], #nav ul{
display: none
}
#nav input[type=»checkbox»]:checked + ul {display:block}
Спасибо за этот пример! Есть правда у меня не очень хорошее поведение этого меню — если нажать на главном меню (впадают его подменю), но подменю не выбирать, а попробовать выбрать другой пункт меню без подменю НИЖЕ списка подпунктов(скажем пользователь захотел посмотреть что в меню, кликнул, посмотрел и передумал не выбирая никакой подпункт, решил перейти в другой пункт главного меню), то выпадающее ранее подменю просто закрывается, а в кликнутый раздел не переходит. Кстати такого нет, если щёлкнуть любой раздел выше. Возможно ли это исправить как-то? Спасибо..