Меню. Раскрывающейся список. Одноуровневое меню. Простое двухуровневое меню

Наиболее часто, при создании веб-страниц и управлении ими, мы будем сталкиваться с выбором системы навигации по сайту. Таким элементом управления, безусловно, является меню. Меню могут иметь различный внешний вид и внутреннюю конструкцию, но при этом все они имеют общую необходимость обработки в сценарии выбора опции, произведенного пользователем. Рассмотрим несколько, наиболее распространенных способов создания меню:

Раскрывающейся список

Простейшее меню можно создать с помощью тегов <select> и <option>. Такие конструкции называются раскрывающимися списками. Рассмотрим пример создания простейшего раскрывающегося списка.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Раскрывающееся меню</title>
</head>

<body>
<select name="test" id="test" onChange="myselection()">
<option selected>Первая опция</option>
<option >Вторая опция</option>
<option>Третья опция</option>
<option>Четвертая опция</option>
</select>
<script type="text/javascript">
function myselection(){
alert("Вы выбрали опцию "+document.all.test.selectedIndex)
}
</script>
</body>

В окне веб-браузера это будет выглядеть ТАК.

Одноуровневое меню

Для создания одноуровневого меню воспользуемся таблицей. Оно может быть вертикальным или горизонтальным. В ячейках таблицы расположим названия опций(элементов) меню. При наведении указателя мыши на элемент, последний выделяется(подсвечивается) цветом, а при щелчке на элементе выполняется некоторое действие, определенное сценарием.

Рассмотрим HTML-код, задающий вертикальное меню из трех элементов, и набор функций, которые обрабатывают события onmouseover(наведение), onmouseout(уход) и onclick(щелчок).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Одноуровневое меню</title>
</head>

<body>
<table id="menu" border="1" bgcolor="#f0f0f0" width="40" rules="none" cellpadding="10" cellspacing="1">
<tr>
<td id="e1" onMouseOver="onelement()" onMouseOut="outelement()">Первый</td></tr>
<tr>
<td id="e2" onMouseOver="onelement()" onMouseOut="outelement()">Второй</td></tr>
<tr>
<td id="e3" onMouseOver="onelement()" onMouseOut="outelement()">Третий</td></tr>
</table>
</body>
<script type="text/javascript">
function onelement(){ //наведение на элемент
xid=event.srcElement.id
document.all[xid].style.color='White'
document.all[xid].style.background='blue'
}
function outelement(){ //уход с элемента
xid=event.srcElement.id
document.all[xid].style.color='black'
document.all[xid].style.background='f0f0f0'
}
function document.all.menu.onclick(){ //щелчок на элементе
alert(event.srcElement.id) /*вывод сообщения об id элемента, на котором был щелчок*/
}
</script>
</html>

Метод (функция) document.all.menu.onclick(), а также другие функции сами определяют, на каком элементе меню был щелчок: свойство event.srcElement.id возвращает идентификатор этого элемента. Использование этого свойства освобождает от рутинного повторения кода для каждого элемента.

В окне веб-браузера это будет выглядеть ТАК.

Простое двухуровневое меню

Двухуровневое меню будет состоять из главного горизонтального меню и нескольких вертикальных подменю. При наведении указателя мыши на элемент главного меню раскрывается соответствующее подменю. При уходе указателя мыши с подменю последнее скрывается. Кроме того, элемент меню выделяется цветом(подсвечивается) при наведении на него указателя мыши. Щелчок на элементе меню обрабатывается специальной функцией. Такое меню можно сделать на основе нескольких вертикальных меню, созданных с использованием таблиц.

Рассмотрим пример, где главное горизонтальное меню состоит из трех элементов, двум из которых соответствуют вертикальные раскрывающиеся подменю.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Простое двухуровневое меню</title>

</head>

<body>
<table id="menu1" onMouseOver="document.all.tb1.style.display=''" style=" z-index:5; background:e0e0e0; position:absolute; top:60px; left:250px; width:80px" onClick="menuclick()" onMouseOut="document.all.tb1.style.display='none'" cellspacing="0" cellpadding="10" rules="none" border="1">
<tbody>
<tr>
<td id="menuzag1" onMouseOver="=onmousemenu()" style=" background:#00ff00" onMouseOut="outmousemenu()">Меню</td></tr></tbody>
<tbody id="tb1" style="display:none">
<tr>
<td id="e1.1" onMouseOver="onelement()" onMouseOut="outelement()">Первый</td></tr>
<tr>
<td id="e1.2" onMouseOver="onelement()" onMouseOut="outelement()">Второй</td></tr>
<tr>
<td id="e1.3" onMouseOver="onelement()" onMouseOut="outelement()">Третий</td></tr></tbody>
</table>
<table id="menu2" onMouseOver="document.all.tb2.style.display=''" style=" z-index:5; background:e0e0e0; position:absolute; top:60px; left:330px; width:80px" onClick="menuclick()" onMouseOut="document.all.tb2.style.display='none'" cellspacing="0" cellpadding="10" rules="none" width="40" border="1">
<tbody>
<tr>
<td id="menuzag2" onMouseOver="=onmousemenu()" style=" background:#00ff00" onMouseOut="outmousemenu()">Меню2</td></tr></tbody>
<tbody id="tb2" style="display:none">
<tr>
<td id="e2.1" onMouseOver="onelement()" onMouseOut="outelement()">Первый</td></tr>
<tr>
<td id="e2.2" onMouseOver="onelement()" onMouseOut="outelement()">Второй</td></tr>

</tbody>
</table>
<table id="menu3" onMouseOver="document.all.tb3.style.display=''" style=" z-index:5; background:e0e0e0; position:absolute; top:60px; left:410px; width:80px" onClick="menuclick()" onMouseOut="document.all.tb3.style.display='none'" cellspacing="0" cellpadding="10" rules="none" width="40" border="1">
<tbody>
<tr>
<td id="menuzag3" onMouseOver="onmousemenu()" style=" background:#00ff00" onMouseOut="outmousemenu()">Меню3</td></tr></tbody>
<tbody id="tb3" style="display:none">
<tr>
<td id="e3.1" onMouseOver="onelement()" onMouseOut="outelement()">Первый</td></tr></tbody>
</table>
<script type="text/javascript">
function oneelement(){               //наезд на элемент
xid=event.srcElement.id
document.all[xid].style.color='white'
document.all[xid].style.background='#0000ff'
}
function outelement(){ //уход с элемента
xid=event.srcElement.id
document.all[xid].style.color='black'
document.all[xid].style.background='#e0e0e0'
}
function onmousemenu(){ //наезд на заголовок меню
xid=event.srcElement.id
document.all[xid].style.background='#00dd00'
}
function outmousemenu(){
xid=event.srcElement.id
document.all[xid].style.background='#00ff00'
}
function menuclick(){ //щелчок на элементе меню
alert("Элемент меню: " +event.srcElement.id)
/*выбор элементов меню*/

if(event.srcElement.id=="e1.1"){
window.open("http://sevidi.narod.ru")
}
if(event.srcElement.id=="e1.2"){
window.open("http://sevidi.narod.ru/site.html")
}
if(event.srcElement.id=="e1.3"){
window.open("http://sevidi.narod.ru/training.html")
}
if(event.srcElement.id=="e2.1"){
window.open("stage.html")
}
if(event.srcElement.id=="e2.2"){
window.open("stage1.html")
}
if(event.srcElement.id=="e3.1"){
window.open("strou4.html")
}
}
</script>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Обсудить на форуме Обсудить на форуме

Добавить на Memori.ru

назадвверхвперед
Rambler's Top100