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

2012-05-27

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 нужен для того, чтобы у нас была возможность щёлкнуть по ссылкам внутри выпавшего подменю и оно не спряталось в следствии того, что главный пункт потеряет фокус.


35 комментариев на «Выпадающее меню по клику средствами CSS»

  1. Юлия:

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

  2. admin:

    Должно быть Вы не прописали css, который заставляет меню отображаться при наведении на него.
    В примере:
    .sub-menu:hover {
    display: block;
    }

    Если хотите, можите реализовать Ваш пример на http://jsfiddle.net/, сохранить и сбросить ссылку

  3. Андрей:

    А нельзя ли, чтобы по клику на ссылку и закрывалось также?

  4. Стас:

    работает во всех браузерах кроме хрома. он скрывает focus. блин а идея классная. может и эту проблему с хромом тоже можно решить как то?

  5. admin:

    Должно быть Вы не обратили внимание на примечание:
    >> — атрибут tabindex=’1′ используется для того, чтобы псевдокласс :focus корректно работал в браузерах на движке webkit;

  6. Анна:

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

  7. Андрей:

    Думаю, что без событий JS реализовать скрытие по клику невозможно) Либо это будет просто магия :D

  8. Ivan:

    Спасибо, мне помог этот пример, а для чего используется тильда ~ и зачем в конце запятые?

  9. admin:

    Тильда — это 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-селекторов, для которых нужно задать одни и те же правила.

  10. AlicKa:

    Спасибо огромное, помогло!!! Знала бы раньше о таком решении, сколько времени бы сохранила)))

  11. Tour:

    Класс, оригинально и понятно.
    Жаль, что невозможно закрыть по клику. Но этот вопрос не к автору.
    Спасибо.

  12. Kirujam:

    Хм.. В Опере открывает нормально, в Хроме — нет..

  13. Tem:

    Анна, реализовать возможно. С помощью 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/

  14. Tem:

    Админ исправь комментарий, не знал что html поддерживает :)

  15. Владислав:

    Обьясните пожалуйста, что означает cимвол тильды «~» ?

  16. Кирилл:

    Не работает в internet explorer 8 =( есть варианты ?

  17. Просто шикарно, очень помогло!))) Автору спасибо, респект и побольше бы таких людей как он)))

  18. Виктор:

    точно в IE 8 тоже не работает, в помойку короче…

  19. Юрий:

    доброго времени суток, подскажите пожалуйста , как организовать несколько подменю ,чтобы открывалось только то на которое кликают ? чтобы когда кликают на открыть подменю — открывалось только это подменю, а не все сразу
    <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>

  20. Муслим:

    Добрый день. Спасибо за хороший пример. Во многих местах искал, но такого решения не видел. Легко и просто.

  21. Михаил:

    еще один интересный пример выпадающего меню — http://siteacademy.ru/index.php/css/45-css3-dropdown-menu

  22. Спасибо огромное!!!

  23. Спасибо! Реализовал успешно на мобильной версии.

  24. Вася Пупкин:

    OrnaJS, хорошая библиотека для подобных задач с click, без JavaScript

  25. Классная, только вопрос??? Как убрать маркеры? Кнопку сдвинуть влево или вправо?

  26. В FF последне версии, нажимаю на меню, оно появляется, но при переносе мышки на меню — исчезает.

  27. Отличный пример, спасибо. На основе него можно много интересного реализовать.

  28. Здравствуйте!
    Подскажите пожалуйста, как реализовать кликабельные строчки в таблице, чтобы при нажатии раскрывалась подменю снизу этой строчки
    sourcebans.sourcetm.com/index.php?p=banlist — вот пример

  29. Работает! Спасибо большое) Хорошо, что именно по щелчку открывается и не пропадает.

  30. Верстальщик:

    Спасибо! Очень помогли. Все просто, сердито и в отличии от других сайтов работает! ))

  31. Гость:

    Не работает в IE8, нескольких версиях хрома (И да, я видел пометку про вебкит), некорректно работает в некоторых версиях FF. В общем из за полного отсутствия кроссбраузерности, совсем не рекомендую. Понимаю бы если бы IE ниже девятки не видел, пустяк, а вот хром с лисой уже проблема.

  32. SJ:

    Дополнил возможность закрыть меню по «закрыть подменю».
    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

  33. Саша:

    Что значит символ «~» в блоке

    .main-item:focus ~ .sub-menu,
    .main-item:active ~ .sub-menu,
    .sub-menu:hover
    {
    display: block;
    }

    ?

  34. На самом деле можно cделать сворачиваемость при повторном клике используя label, checkbox и :checked
    Мне некогда писать всю реализацию. Уже сто раз делал. Лишь напишу ключевое решение

    #nav input[type=»checkbox»], #nav ul{
    display: none
    }

    #nav input[type=»checkbox»]:checked + ul {display:block}

  35. Денис:

    Спасибо за этот пример! Есть правда у меня не очень хорошее поведение этого меню — если нажать на главном меню (впадают его подменю), но подменю не выбирать, а попробовать выбрать другой пункт меню без подменю НИЖЕ списка подпунктов(скажем пользователь захотел посмотреть что в меню, кликнул, посмотрел и передумал не выбирая никакой подпункт, решил перейти в другой пункт главного меню), то выпадающее ранее подменю просто закрывается, а в кликнутый раздел не переходит. Кстати такого нет, если щёлкнуть любой раздел выше. Возможно ли это исправить как-то? Спасибо..

Добавить комментарий