Веб-заметки и Веб-подсказки

Вещи, связанные с внешним оформлением, всегда лучше возлагать на плечи 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;}


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

• пункт меню 1
  • пункт подменю 1.1
  • пункт подменю 1.2
  • пункт подменю 1.3
• пункт меню 2
  • пункт подменю 2.1
  • пункт подменю 2.2
• пункт меню 3

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

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

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

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