Лабораторная работа: Технологии создания гипертекстовых документов

<a href="/buy3.html">Надежность, эргономика, качествоАСОИУ</a><br />

<a href="/buy4.html">Интернет-технологии</a>

</div>

</div>

Первый блок ссылок имеет уникальное имя navbodyl, второй — navbody2. Для каждого раздела при наведении мыши на элемент и уходе мыши с элемента вызывается функция JavaScript.

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

<styletype="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 – Выпадающее меню.