CSS: Выпадающее меню средствами CSS без JavaScript

2011-06-11

Вещи, связанные с внешним оформлением, всегда лучше возлагать на плечи CSS по таким причинам:

  • мы освобождаем JavaScript от кода, не связанного с бизнес-логикой, чем делаем его понятнее и проще;
  • нативный функционал браузера обычно работают быстрее чем JavaScript;
  • пользуясь возможностями CSS, мы экономим своё время, потому что решаем поставленную задачу проще и быстрее;
  • невероятно, но факт: JavaScript может быть отключен в браузере :).

Надеюсь, что я смог вас убедить.

Приём, которым мы воспользуемся прост и элегантен, но всё по порядку.

Сначала мы создадим html-структуру нашего меню с вложенными подменю, которые должны будут выпадать при наведении мышки. Наше основное меню, и наши подменю будет реализовано как список <ul/>. Основному меню мы дадим класс с названием menu, а всем подменю — submenu.

Примерно так будет выглядеть наша html-разметка:

<ul class="menu">
<li>
<a href="#item1">пункт меню 1</a>
<ul class="submenu">
<li><a href="#item1.1">пункт подменю 1.1</a></li>
<li><a href="#item1.2">пункт подменю 1.2</a></li>
<li><a href="#item1.3">пункт подменю 1.3</a></li>
</ul>
</li>
<li>
<a href="#item2">пункт меню 2</a>
<ul class="submenu">
<li><a href="#item2.1">пункт подменю 2.1</a></li>
<li><a href="#item2.2">пункт подменю 2.2</a></li>
</ul>
</li>
<li>
<a href="#item3">пункт меню 3</a>
</li>
</ul>

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

/* прячем подменю по-умолчанию */
.submenu {display:none;}
/* показываем подменю при наведении на соответствующий пункт главного меню */
.menu li:hover .submenu {display:block;}

Теперь мы можем посмотреть что у нас получилось:

Для тек, кто всё еще верстает под IE6, должен сказать, что со старта эта реализация не заработает, потому что IE6 не поддерживает псевдокласс :hover, для элементов, не являющимися ссылками, то-есть <a/>. Но это легко исправить, воспользовавшись csshover.htc.
Понадобится добавить одну строку в css-код только для IE6:

body {behavior: url(/css/csshover.htc);}

Более подробно о фиксе для IE6 здесь: http://peterned.home.xs4all.nl/csshover.html

Во всех остальных браузерах данный код работает отлично.



2 комментария на «CSS: Выпадающее меню средствами CSS без JavaScript»

  1. Данила:

    Спасибо

  2. Спасибо, что напомнилип! (А то что-то запамятова как это делается.)

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