ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script и W3C DOM (IE5 и старше, Mozilla, Opera)
Если на сайте много ссылок в меню, необходимо сделать его ниспадающим:
<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="/pchela.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">Схемотехника</a><br />
<a href="/buy2.html">Теория информации</a><br />
<a href="/buy3.html">Надежность, эргономика, качество АСОИУ</a><br />
<a href="/buy4.html">Интернет-технологии</a>
</div>
</div>
Первый блок ссылок имеет уникальное имя navbodyl, второй — navbody2. Для каждого раздела при наведении мыши на элемент и уходе мыши с элемента вызывается функция JavaScript.
CSS-оформление минимально:
<style type="text/css">
.navhead { font-weight: bold; background-color: #ccc; }
#navbody1, #navbody2 { visibility: hidden; }
</style>
Для navbodyl и navbody2 указано свойство visibility: hidden;. При этом JS получает номер блока и меняет его атрибут видимости:
<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 — переменная, хранящая строку с номером меню. Функция выбирает элемент страницы, имя складывается из navbody и номера (menunum). Далее для элемента задается свойство visibility: visible. Функция menuhide() срабатывает, когда курсор мыши покидает область меню.
Листинг 8_menu – Выпадающее меню.
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Выпадающее меню</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<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>
<style type="text/css">
.navhead { font-weight: bold; background-color: #ccc; }
#navbody1, #navbody2 { visibility: hidden; }
</style>
</head>
<body>
<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="/pchela.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">Схемотехника</a><br />
<a href="/buy2.html">Теория информации</a><br />
<a href="/buy3.html">Надежность, эргономика, качество АСОИУ</a><br />
<a href="/buy4.html">Интернет-технологии</a>
</div>
</div>
</body>
</html>
Рис.10. Выпадающее меню на экране монитора.