Пример раскрывающегося меню в HTML |
||||||
Главная | Меню 1 |
Меню 2 |
Меню 3 |
Меню 4 |
Меню 5 |
©
<style type="text/css">
a { font-size:10pt; color: navy; text-decoration: none }
a:hover { background-color: yellow; text-decoration: underline }
#box {
position:absolute;
visibility:hidden;
layer-background-color:silver }
#limebox {background-color:lime }
#bluebox {background-color:lightsteelblue }
#mnubar { font-weight:bold }
</style>
<script language="JavaScript">
ns=window.navigator.appName == "Netscape"
ie=window.navigator.appName == "Microsoft Internet Explorer"
function openIt(x) {
if(ns) {
showbox= document.layers[x+1]
showbox.visibility = "show"
showbox.top=44
var items = 5
for (i=1; i<=items; i++) {
elopen=document.layers[i]
if (i != (x + 1)) {
elopen.visibility = "hide" }
}
}
if(ie) {
curEl = event.toElement
curEl.style.background = "#FFFF80"
showBox = document.all.box[x];
showBox.style.visibility = "visible";
showBox.style.top = 46;
var items = 5
for (i=0; ielOpen=document.all.box[i]
barEl=document.all.mnubar[i]
if (i != x){
elOpen.style.visibility = "hidden"
barEl.style.background = "#ccccff"
}
}
}
}
function closeIt() {
var items = 5
for (i=0; iif(ie){
document.all.box[i].style.visibility = "hidden"
barEl=document.all.mnubar[i]
barEl.style.background = "#ccccff"
}
if(ns){ document.layers[i+1].visibility = "hide"}
}
}
</script>
</head>
<body bgcolor="white" vlink=navy marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<table border="0" cellpadding="0" width="100%" bgcolor="#CCCCFF" height="20" id=mainmenu>
<tr>
<td align="center" nowrap valign="middle" colspan="7" bgcolor="#0000A0" >
<p align="left"><b><font size="4" color="#FFFF00">Пример раскрывающегося меню в HTML</font></b></td>
</tr>
<tr>
<td align="center" ><b><font color="#FF0000" ><a
href="http://www.chat.ru/~webwood/index.htm">Главная</a></font></b><br></td> <td align="center" nowrap >
<a href="#" onmouseover="openIt(0)" id=mnubar>Меню 1 <td align="center" nowrap >
<a href="#" onmouseover="openIt(1)" id=mnubar>Меню 2</a> <IMG SRC="po.gif" WIDTH=11 HEIGHT=11 BORDER=0 ALT=""><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(2)" id=mnubar>Меню 3</a> <IMG SRC="po.gif" WIDTH=11 HEIGHT=11 BORDER=0 ALT=""><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(3)" id=mnubar>Меню 4</a> <IMG SRC="po.gif" WIDTH=11 HEIGHT=11 BORDER=0 ALT=""><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(4)" id=mnubar>Меню 5</a> <IMG SRC="po.gif" WIDTH=11 HEIGHT=11 BORDER=0 ALT=""><br></td>
<td align="center" width="30" nowrap valign="top"> </td>
</tr>
</table>
<br><br>
<div onmouseover="closeIt()" >
<layer onmouseover="closeIt()">
</layer>
</div>
<!-- Меню 1 -->
<div id=box style=left:120>
<table border="1" id=bluebox >
<tr><td><a href='ссылка'>Ссылка 1</a></td>
<td><a href='ссылка'>Ссылка 2</a></td></tr>
</table>
</div>
<!-- Меню 2 -->
<div id=box style=left:200>
<table border="1" id=limebox> <tr>
<td><a href='ссылка'>Ссылка 3</a></td>
<td><a href='ссылка'>Ссылка 4</a></td>
<td><a href='ссылка'>Ссылка 5</a></td></tr>
</table>
</div>
<!-- Меню 3 -->
<div id=box style=left:240>
<table border="1" id=bluebox>
<tr><td><a href='ссылка' >Ссылка 6</a></td>
<td><a href='ссылка'>Ссылка 7</a></td>
<td><a href='ссылка'>Ссылка 8</a></td>
<td><a href='ссылка'>Ссылка 9</a></td>
<td><a href='ссылка'>Ссылка 10</a></td></tr>
</table>
</div>
<!-- Меню 4 -->
<div id=box style=left:400>
<table border="1" id=limebox>
<tr><td><a href='ссылка' >Ссылка 11</a></td>
<td><a href='ссылка'>Ссылка 12</a></td>
<td><a href='ссылка'>Ссылка 13</a></td>
<td><a href='ссылка'>Ссылка 14</a></td></tr>
</table>
</div>
<!-- Меню 5 -->
<div id=box style=left:520>
<table border="1" id=bluebox>
<tr><td><a href='ссылка'>Ссылка 15</a></td>
<td><a href='ссылка'>Ссылка 16</a></td>
<td><a href='ссылка'>Ссылка 17</a></td></tr>
</table>
</div>
</body>
</html>