分别用两个函数实现的菜单

253 阅读 0 评论 167 点赞

我是靠谱客的博主可爱心锁，这篇文章主要介绍分别用两个函数实现的菜单，现在分享给大家，希望可以做个参考。

css+div做的菜单：一个主显示层，别的列表都隐藏着，用js函数设置列表的显示和隐藏。分别用到了两个函数，函数实现的效果是一样的，一个是参考的《css+Dhtml精髓》书上的事例，一个是找的函数。
大家帮我看看那个函数好用！还有大家还有别的更好的方法实现这个效果吗？谢谢！！

<font color=red><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>菜单</title> 
 <style type="text/css"> 
 <!-- 
  *{margin:0;padding:0;border:0;} 
 body { 
    background: #fff; 
    font-size: 14px; 
    font-family: "宋体"; 
}

#nav{ 
border:#FF0099 solid 3px; 
position:absolute; 
top:30px; 
left:50px; 
width:150px; 
height:300px; 
 }  
  
#ul { 
    position:absolute; 
    top:30px; 
    list-style-type:none; 
    line-height:24px; 
    background-color:#fff; 
}

#ul a:visited{ 
 line-height:24px; 
 color:#666; 
 text-align:center; 
 text-decoration:none; 
  display:block; 
  width:150px; 
/*直设这个宽度就行*/ 
   /*设置宽度，IE浏览器。虽然设置了block，但是还只是文字为超链接，所以得显式设置宽度*/ 
 }

#ul a:hover  { 
 text-decoration:none; 
 color:#FF2a84;

}

#ul li{ 
 display:inline;/*IE会让LI上下有空白，去掉空白*/ 
 }

/*水果层*/

#shui { 
    position:absolute; 
    left: 200px; 
    top: 50px; 
    border: #66FFCC  solid; 
     height:210px; 
    border-width: 2px 2px 2px 18px; 
    text-align:center; 
    list-style-type:none; 
    line-height: 20px; 
    visibility: hidden; 
    background-color:#fff;/*不设背景色，层容易断裂 */ 
}

#shui a:visited{ 
    color: #666; 
    text-decoration: none; 
    display:block; 
    width:100px;/*不能用#nav a:link,a:visited,这样会找不到第二种，第二种不继承*/

}

#shui a:hover  { 
text-decoration:none; 
 color:#0cc; 
} 
  
#hua { 
    position:absolute; 
    left: 200px; 
    top: 55px; 
    border: #C06 solid; 
    height:170px; 
    border-width: 2px 2px 2px 18px; 
    text-align:center; 
    list-style-type:none; 
    line-height: 20px; 
    visibility: hidden; 
    background-color:#fff; 
     
}

#hua  a:visited{ 
    color: #666; 
    text-decoration: none; 
    display:block; 
    width:100px;

}

#hua a:hover  { 
text-decoration:none; 
 color:#C06; 
}

#che { 
    position: absolute; 
    left: 200px; 
    top: 60px; 
    border: #6c3 solid; 
    border-width: 2px 2px 2px 18px; 
    text-align:center; 
    list-style-type:none; 
    line-height: 20px; 
    visibility: hidden; 
    background-color:#fff; 
} 
 #che a:visited{ 
    color: #666; 
    text-decoration: none; 
    display:block; 
    width:100px; 
 }

#che a:hover  { 
text-decoration:none; 
 color:#6c3; 
}  
  
--> 
 </style> 
  
  
             
             
</head> 
<body> 
 <div id="nav"> 
 <ul id="ul">  
  
  
<li>水果/水果 </li> 
         
<li>花卉/花卉/花卉</li> 
                 
                         
<li>汽车/汽车</li> 
<li>水果2</li> 
<li>花卉/花卉/花卉2</li> 
<li>汽车/汽车2</li> 
<li>水果3</li> 
<li>花卉/花卉3</li> 
<li>汽车/汽车/汽车3</li> 
</ul>  
 </div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]