Главное горизонтальное меню состоит из двух элементов,которым соответствуют раскрывающиеся вертикальные подменю.Меню создается на основе таблиц.
onmouseover-наступает,когда пользователь помещает курсор мыши на элемент страницы.
onmouseout-наступает,когдапользователь убирает курсор мыши с элемента.
display-показывает как элемент должен быть показан в документе.Значение по умолчанию-inline.
inline-элемент отображается как встроенный.Содержимое блочных элементов начинается стого места где окончился предыдущий элемент.
none-временно удаляет элемент из документа. z-index-размещение по z-оси.Элементы с большим z-индексом будут появляться над элементами с меньшим z-индексом. position-устанавливает способ позиционирования элемента относительно окна браузера или др.объектов на веб-странице.
absolute(значение position)-положение элемента задается атрибутами left,top,right,bottom относительно края окна браузера.Кроме числовых значений применяется auto-порядок элементов строится автоматически.
cellSpacing-расстояние между рамками смежных ячеек(по умолчанию 2px)
cellPadding-для задания отступов полей сверху и с боков внутри ячеек(по умолчанию 1px)
Атрибут rules позволяет определить отображение внутренних разделительных линий между столбцами и строками таблицы.Значение none не отображает разделительные линии.
Код меню
<HTML>
<BODY>
<!таблицы, из которых строится меню>
<TABLE id=menu1
onmouseover="document.all.tb1.style.display=' ' "
style="z-index:5;background:#e0e0e0e;position:absolute;
top:60px;left:150px;width:100px" onclick=menuclick()
onmouseout="document.all.tb1.style.display='none' "
cellSpacing=0 cellPadding=10 rules=none border=1>
<TBODY>
<tr>
<td id=menua1 onmouseover=onmousemenu()
style="background:#00ff00"onmouseout=outmousemenu()>
Примеры JavaScript</td></tr>
<TBODY id=tb1 style="display:none">
<tr>
<td id=el1 onmouseover=onelement()
onmouseout=outelement()> Информация о браузере</td></tr>
<tr> <td id=el2 onmouseover=onelement()
onmouseout=outelement()> Пример формы</td></tr>
<tr> <td id=el3 onmouseover=onelement()
onmouseout=outelement()> Информация о дате</td></tr>
</TBODY></TABLE>
<TABLE id=menu2
onmouseover="document.all.tb2.style.display=' ' "
style="z-index:5;background:#e0e0e0e;position:absolute;
top:60px;left:250px;width:150px" onclick=menuclick1()
onmouseout="document.all.tb2.style.display='none' "
cellSpacing=0 cellPadding=10 rules=none border=1>
<TBODY>
<tr>
<td id=menua2 onmouseover=onmousemenu()
style="background:#00ff00"onmouseout=outmousemenu()>
Примеры Macromedia Flash</td></tr>
<TBODY id=tb2 style="display:none">
<tr>
<td id=el11 onmouseover=onelement()
onmouseout=outelement()> Кнопки</td></tr>
<tr>
<td id=el12 onmouseover=onelement()
onmouseout=outelement()> Переливающаяся строка</td>
</tr>
</TBODY>
</TABLE>
<script language="JavaScript">
function onelement(){//наезд на елемент
xid=event.srcElement.id
document.all[xid].style.bacrground="#0000ff"
document.all[xid].style.color="blue"
}
function outelement(){//уход с элемента
xid=event.srcElement.id
document.all[xid].style.bacrground="#e0e0e0"
document.all[xid].style.color="black"
}
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(){//щелчок на элемент меню
if(event.srcElement.id=="el1")
window.open("brauser.html")
else{
if(event.srcElement.id=="el2")
window.open("forma.html")
else{
if(event.srcElement.id=="el3")
window.open("brauser.html")
}
}
}
function menuclick1(){
if(event.srcElement.id=="el11","el12")
window.open("index.html")
}
</script>