Выпадающее меню на CSS и JavaScript

Земсков Юрий
www.ComputerLibrary.info

Написано для «CHIP Special»

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

Принцип работы подобных меню основан на том, что через события XHTML-документа вызывается функция JavaScript, которая динамически меняет CSS-свойства блоков, содержащих пункты меню.

XHTML-код документа описывает 2 блока меню, в каждый вложено еще 2 блока: один с заголовком, второй с содержимым меню:

<div onmouseover="menushow('1');" onmouseout="menuhide('1');" style="float: left; width: 50%;">
  <div class="navhead">Информация</div>
  <div id="navbody1">
    <a href="/news.html">Новости</a><br />
    <a href="/products.html">Товары</a><br />
    <a href="/about.html">О компании</a>
  </div>
</div>

<div onmouseover="menushow('2');" onmouseout="menuhide('2');">
  <div class="navhead">Купить</div>
  <div id="navbody2">
    <a href="/buy1.html">Продукт 1</a><br />
    <a href="/buy2.html">Продукт 2</a><br />
    <a href="/buy3.html">Продукт 3</a>
  </div>
</div>

Первый блок ссылок имеет уникальное имя (id="") navbody1, второй блок — navbody2. Для каждого раздела при наведении мыши на элемент (событие onmouseover) и уходе мыши с элемента (onmouseout) вызывается определенная функция JavaScript с параметром в виде номера меню.

CSS оформление минимально:

<style type="text/css">
  .navhead {
  font-weight: bold;
  background-color: #ccc;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  }

  #navbody1, #navbody2 { visibility: hidden; }
</style>

Стилевое оформление для блока navhead выделяет его шрифтом и фоном как главное меню навигации, а также делает текст внутри этого блока внешне похожим на гиперссылки: синий цвет, подчеркивание и соответствующий курсор.

Для navbody1 и navbody2 указано свойство visibility: hidden;. Оно говорит браузеру, что блоки занимают на странице необходимое место, но их содержимое и оформление отображаться не должно. То есть блоки полностью прозрачны.

JavaScript получает номер навигационного блока и меняет его visibility.

<script language="javascript" type="text/javascript">
//<!--
//<![CDATA[
  function menuhide(menunum)
  {
    var currentmenu = document.getElementById("navbody" + menunum);
    currentmenu.style.visibility = 'hidden';
  }

  function menushow(menunum)
  {
    var currentmenu = document.getElementById("navbody" + menunum);
    currentmenu.style.visibility = 'visible';
  }
//]]>
//-->
</script>

С помощью событий документа при наведении мыши на блок активизируется функция menushow(menunum). Menunum — переменная, хранящая строку с номером меню (1 или 2 соответственно). Функция с помощью DOM выбирает по имени элемент страницы, имя складывается из navbody и номера. Далее для этого элемента задается свойство visibility: visible и он появляется на странице. Функция menuhide() срабатывает, когда курсор мыши покидает область выпадающего меню, она работает аналогично, только выставляет visibility: hidden и, тем самым, снова прячет меню.

Живые меню или Как сделать красиво с помощью CSS и JavaScript

14-03-2009

Наверное, никто не сможет поспорить с утверждением, что главное в любой web-страничке - удобство для пользователя. После того, как мы выложили наше творение в сеть, мы сразу начинаем предпринимать массу усилий для того, чтобы привлечь на свой сайт максимум посетителей... подробнее Комментарии: 0 Кол. просмотров: общее - 5624 сегодня - 0

Локальная баннерная система

14-03-2009

Этот скрипт поможет вам организовать на своем сайте или страничке баннерную систему. Первый фрагмент вы вставляете в любое место странички... подробнее Комментарии: 0 Кол. просмотров: общее - 4746 сегодня - 0

Локальная реклама

14-03-2009

В Internet Zone-154 была небольшая заметка Локальная баннерная система. Автор - Вадим Беляков (http://tuta.da.ru) предлагал поставить на страничку баннер, используя небольшой javascript. Я прочитал этот номер лишь в середине апреля. Мне сразу же пришло в голову использовать его для текстовой рекламы... подробнее Комментарии: 0 Кол. просмотров: общее - 5099 сегодня - 0

Использование JS для создания «умных» форм

14-03-2009

JS, или JavaScript язык сценариев, которые выполняются на стороне клиента и не требует перезагрузки страницы. JavaScript был разработан компанией Netscape в 1995 году... подробнее Комментарии: 0 Кол. просмотров: общее - 4927 сегодня - 0

Обманщик спам-роботов

14-03-2009

Как известно, бичом современного Интернета является спам - непрошенная рассылка рекламных и прочих сообщений. По данным некоторых аналитиков, он составляет более 50% всех сообщений в Сети... подробнее Комментарии: 0 Кол. просмотров: общее - 5168 сегодня - 0