Если на сайте слишком много ссылок в главном меню, а оно, как правило, расположено горизонтально, то для всех разделов может не хватить места. В таком случае необходимо делать выпадающее меню.
Принцип работы подобных меню основан на том, что через события XHTML-документа вызывается функция JavaScript, которая динамически меняет CSS-свойства блоков, содержащих пункты меню.
XHTML-код документа описывает 2 блока меню, в каждый вложено еще 2 блока: один с заголовком, второй с содержимым меню:
Первый блок ссылок имеет уникальное имя (id="") navbody1, второй блок — navbody2. Для каждого раздела при наведении мыши на элемент (событие onmouseover) и уходе мыши с элемента (onmouseout) вызывается определенная функция JavaScript с параметром в виде номера меню.
CSS оформление минимально:
Стилевое оформление для блока navhead выделяет его шрифтом и фоном как главное меню навигации, а также делает текст внутри этого блока внешне похожим на гиперссылки: синий цвет, подчеркивание и соответствующий курсор.
Для navbody1 и navbody2 указано свойство visibility: hidden;. Оно говорит браузеру, что блоки занимают на странице необходимое место, но их содержимое и оформление отображаться не должно. То есть блоки полностью прозрачны.
JavaScript получает номер навигационного блока и меняет его visibility.
С помощью событий документа при наведении мыши на блок активизируется функция menushow(menunum). Menunum — переменная, хранящая строку с номером меню (1 или 2 соответственно). Функция с помощью DOM выбирает по имени элемент страницы, имя складывается из navbody и номера. Далее для этого элемента задается свойство visibility: visible и он появляется на странице. Функция menuhide() срабатывает, когда курсор мыши покидает область выпадающего меню, она работает аналогично, только выставляет visibility: hidden и, тем самым, снова прячет меню.