ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

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

Меню

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

  • раскрывающейся список
  • одноуровневое меню
  • простое двухуровневое меню
  • сложное двухуровневое меню
  • древовидный список

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

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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>

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

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

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

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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>
</body>
</html>

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

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

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

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

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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>

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