Похожие статьи

Проверка полей формы с помощью JavaScript (39,47%)
В целях безопасности всегда необходимо проверять введенные пользователем данные. Проверка клиентским JavaScript легко обходится отключением js в браузере и предназначена она не для борьбы со злоумышленниками, а для помощи тем, кто случайно допустил ошибку. Тоже очень благородное занятие :) Согласитесь?…

Имитация гиперссылок с помощью JavaScript (36,84%)
С помощью JavaScript и CSS мы будем делать ссылки, невидимые для поисковых систем, но вполне видимые для пользователей. Код может пригодиться для тех разделов сайта, где нельзя быть уверенным в «объективности» ссылки от посетителя, и для самостоятельной расстановки ссылок веб-мастером, если он не хочет поднимать популярность других сайтов…

О преимуществах редактора CSS Top Style Lite (35,44%)
Мне часто приходится иметь дело с каскадными таблицами стилей. Опыт показывает, что для их редактирования наиболее удобны специальные программы-редакторы, способные значительно упростить работу веб-строителя. С одной из таких программ я и хочу вас ознакомить…

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

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

Дата публикации 22-08-2005 17:51
Статья просмотрена 21436 раз

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

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

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

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 и, тем самым, снова прячет меню.

Похожие статьи

Удивительное рядом: установка Mac OS X на PC в эмуляторе PearPC (30,61%)
Статья посвящена установке операционной системы Mac OS X на PC. Архитектуры компьютеров Apple (PowerPC) и PC (x86) различаются, отсюда — несовместимость ОС и прикладного ПО для этих платформ. Проблему призван решить программный эмулятор PowerPC — PearPC…

Введение в оформление текстов для веб (30,56%)
Эта статья — попытка разрешить проблемы и рассказать о подводных камнях, связанных с публикацией текстов в сети, а также сформулировать несколько принципов создания удобных и простых для чтения веб-страниц…

Гранит науки и кое-что еще… (28,99%)
Обзор сайтов, посвященных образованию и учебе. А также несколько ссылок на развлекательные ресурсы. Сентябрю посвящается!…

Создание красивого фона в PhotoShop (28,57%)
В статье описывается интересный способ создания красивого и стильного фона с помощью применения фильтров Adobe PhotoShop к «бесcмысленно изрисованному» изображению. Пробуя по этой схеме различные сочетания цветов, параметры фильтров, можно добиться очень интересных результатов…

Обман в обмене ссылками (27,59%)
На фоне стремительно растущего числа каталогов, заблокированных поисковыми системами, все больше внимания веб-мастера стали уделять прямому и перекрёстному обмену ссылками. Еще вчера твой сайт после прогона по белым каталогам имел ИЦ равный 500 и более 1000 обратных ссылок, а сегодня Яндекс устроил новую чистку. И сайт двукратно снизил свои…

← Раздел «Вебмастеру: Дизайн и верстка» | Комментарии (5) →

Ваше имя: 

Цифры с картинки:
Включите графику в браузере

Ваши комментарии:

Все поля формы обязательны для заполнения.
Комментарий: Любые HTML-теги в сообщениях запрещены.
Гиперссылки в комментариях не работают — добавлять спам бесполезно!
Максимальная длина комментария — 5000 символов.
Комментарии, не имеющие отношения к статье, будут удалены.

 

Разработка сайтов на первом этапе. Концепция и бриф. Итак, вы выбрали подрядчика для разработки вашего будущего сайта и провели с ним предварительные переговоры. Вам может показаться, что самое сложное в процессе разработки сайта уже позади, однако не стоит делать скоропалительных выводов. Именно сейчас для вас начнется кропотливая работа по сбору информации, анализу и принятию решений – финалом…

КРОМЕ юзабилити и дизайна: содержательный сайт Любой веб-ресурс сегодня раздираем двумя мощными силами - на первый взгляд, непреодолимыми и несовместимыми одновременно. С одной стороны, юзабилити и интерфейс требуют простоты, логичности и доступности – в общем, голого функционального минимализма. С другой стороны, развивающиеся веб-стандарты и технологии способствуют расцвету новых подходов к…

Сквозная навигация Сквозная навигация — это система связей (гиперссылок), облегчающих движение пользователя по сайту. Речь идёт о максимально возможном переплетении данных. Кроме того, наличие такой связи характеризует сайт как информативный. Считаю, будет правильным выделить несколько типов связи: связь между сервисами; вокруг события;…

CSS верстка сайта: макет в три колонки Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках…

Цветной scrollbar — да или нет… В последнее время, в связи с приходом CSS в массы, особую популярность среди начинающих webmaster'ов получила возможность изменять цвет scrollbar'а окна браузера. Эта функция привлекла людей своей простотой, и нетребовательностью в знании языка. Все что остается сделать, это заменить цвета частей scrollbar'а по своему вкусу…

Разработка сайтов на первом этапе. Концепция и бриф. Итак, вы выбрали подрядчика для разработки вашего будущего сайта и провели с ним предварительные переговоры. Вам может показаться, что самое сложное в процессе разработки сайта уже позади, однако не стоит делать скоропалительных выводов. Именно сейчас для вас начнется кропотливая работа по сбору информации, анализу и принятию решений – финалом…