Иерархическое (многоуровневое)
меню навигации на JavaScript
(часть 7)

menu.css. В этом файле приведены все стилевые классы тэгов, используемых для прорисовки меню. В нем определены цветовая гамма и шрифты. Текст файла приведен в Листинге 4.

Листинг 4. Файл menu.css

//класс пункта меню, находящийся в полосе меню
span.menu {
          color:yellow;
          background-color:blue;
          font-family:fantasy;
          font-size:12pt;
          font-weight: 700;
          cursor: hand; }
//класс для разделителя пунктов меню, находящихся в полосе меню
span.menudelim {
          color:white;
          background-color:blue;
          font-size:14pt; }
//класс для DIV-полосы меню
div.menu {
          background-color:blue;
          width:100%;
          z-index:100;}
//DIV-контейнер для пунктов подменю, т.е. само подменю
div.submenu {
          background-color:#007fff;
          border: solid skyblue 1px;}
//класс активного пункта подменю
span.active {
          background-color:yellow;
          color:blue;
          font-size:10pt;
          font-family:monospace;
          font-weight: 400;
          cursor: hand;
          width:250}
//класс неактивного пункта подменю
span.nonact {
          background-color:#007fff;
          color:white;
          font-size:10pt;
          font-family:monospace;
          font-weight: 400;
          cursor: hand;
          width:250}

• Т.к. тэги SPAN по умолчанию не меняют курсор мыши на "руку с указательным пльцем", поэтому в стилях пунктов меню свойству cursor приписывается значение hand, чтобы они эмулировали поведение HTML тэгов <A>.
• Укажите ширину тэгов SPAN с классами "active" и "nonact", чтобы пункт меню отрисовывался в одну строку (в противном случае меню будет выглядеть небрежно). Можете поэкспериментировать с шириной в стилях. Не задавайте описания пунктов меню слишком длинными, а такими, чтобы они умещались по ширине в отведенное им стилями пространстве.
• Подберите цвет рамки в стиле div.submenu, так чтобы он выделял подменю, но не сливался с текстом под меню.

Обобщение. Для тех, кто запутался с приведенными выше выкладками, обобщим в двух словах создание и работу меню. Для начала создается система объектов, представляющих меню. Для упрощения понимания можно считать ее некоторым n-мерным массивом ссылок. На основании этого массива с помощью возможностей JavaScript в html-документ вписываются тэги (DIV и SPAN), отвечающие за визуальное оформление меню в браузере. Эти теги реагируют на действия мышки, вызывая обработчики событий, написанных на JavaScript. Код обработчиков, используя доступную ему информацию (через объект window.event), сопоставляет визуальное представление меню с элементами массива ссылок в памяти (недоступного для браузера, вернее, его части, ответственной за отображение информации). На основании свойств ссылок массива принимается решение: перенаправлять браузер на другому адресу, выполнять сценарий или отображать подменю. А чтобы это все работало, в html-документ вписываются несколько строк, связывающих все это воедино.

© 2000, Сергей Кузнецов