使⽤if…else语句做导航下拉菜单
页⾯css样式
<style type="text/css">
<!--
body, td, th {font-size: 12px;margin:30px;padding:0;}
a {color:#000000;text-decoration:none;}
a:hover {color:#FF0000;}
ul, li {margin:0;padding:0;}
ul, li {list-style:none;}
.nav {width:600px;height:30px;line-height:30px;background:#999933;margin:0 auto;}
.nav ul {margin-left:50px;position:absolute;}
.
nav ul li {float:left;display:block;width:100px;text-align:center;background:#CCCC99;font-size:13px;margin-right:2px;height:30px;line-height:30px;
position:relative;}
.subnav {width:100px;position:absolute;top:30px;left:-50px;z-index:-1; border:1px solid #666633;}
-->
</style>
// js判断语句，写在<head></head>之间！
<script language="javascript" type="text/javascript">
var $ = function(id){ElementById(id)} function menu(i)
{
if(i==0)
{
$('menuList0').style.display='block';
$('menuList1').style.display='none';
$('menuList2').style.display='none';
$('menuList3').style.display='none';
$('menuList4').style.display='none';
}
else if(i==1)
{
$('menuList0').style.display='none';
$('menuList1').style.display='block';
$('menuList2').style.display='none';
$('menuList3').style.display='none';
$('menuList4').style.display='none';
}
else if(i==2)
{
$('menuList0').style.display='none';
$('menuList1').style.display='none';
$('menuList2').style.display='block';
$('menuList3').style.display='none';
$('menuList4').style.display='none';
}
else if(i==3)
{
$('menuList0').style.display='none';
$('menuList1').style.display='none';
$('menuList2').style.display='none';
$('menuList3').style.display='block';
$('menuList4').style.display='none';
}
else if(i==4)
{
$('menuList0').style.display='none';
$('menuList1').style.display='none';
$('menuList2').style.display='none';
$('menuList3').style.display='none';
$('menuList4').style.display='block';
}
else
{
alert("输⼊错误!");
}
}
</script>
导航菜单结构
<div class="nav">
<ul>
<li  οnmοuseοver="menu(0)">
<ul  class="subnav" id="menuList0" >        <li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
</ul>
<a href="#">下拉菜单⼀</a> </li>
<li  οnmοuseοver="menu(1)">
<ul  class="subnav" id="menuList1" >        <li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
</ul>
<a href="#">下拉菜单⼆</a> </li>
<li  οnmοuseοver="menu(2)">
<ul  class="subnav" id="menuList2" >        <li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
js导航栏下拉菜单</ul>
<a href="#">下拉菜单三</a> </li>
<li  οnmοuseοver="menu(3)">
<ul  class="subnav" id="menuList3" >        <li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
</ul>
<a href="#">下拉菜单四</a> </li>
<li  οnmοuseοver="menu(4)">
<ul  class="subnav" id="menuList4" >        <li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
<li>下拉菜单01</li>
</ul>
<a href="#">下拉菜单五</a> </li>
</ul>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。