用简单的脚本实现一款漂亮的下拉菜单_javascript技巧-js tutoriel-php.cn

用简单的脚本实现一款漂亮的下拉菜单_javascript技巧

WBOY

Libérer： 2016-05-16 19:23:25

original

942 Les gens l'ont consulté

一次偶然而无聊的实验，发现了这样的写下拉菜单的方式。完成作品后的愉悦心情，就像阿基米德泡浴缸却发现了浮力原理！

NAME:Stupid CAT Pull-down Menu v1.0
SUPPORT:Ie(√) Firefox(√)
STANDARD:XHTML 1.0 Strict / CSS2.0

核心样式：

复制代码代码如下:

html,body{ 
   background:#000000; 
   height:100%; 
   font-size:12px; 
   font-family:Arial, Helvetica, sans-serif; 
   color:#333333; 
   margin:20px auto; 
   overflow:hidden; 
   text-align:center;} 
/*菜单容器menu*/ 
div#menu{ 
   width:100%; 
   height:34px; 
   padding:0px 0px 0px 5px;} 
/*一级菜单*/ 
div#menu div{ 
   width:125px; 
   height:20px; 
   float:left; 
   text-transform:capitalize; 
   background:#cccccc; 
   padding:5px 0px 0px 0px; 
   margin:4px 1px 0px 0px;} 
/*二级菜单*/ 
div#menu div div{ 
   width:125px; 
   height:20px; 
   border-bottom:1px #333333 solid; 
   background:#666666; 
   margin-top:-4px; 
   cursor:pointer; 
   display:none;} 
/*二级菜单中特殊样式（可选）*/ 
div#menu div div.div1{ 
   margin-top:3px; 
   border-top:1px #333333 solid;} 

核心代码：

复制代码代码如下:

var menuItem=document.getElementById("menu").getElementsByTagName("div"); 
for(i=0;i    menuItem[i].onmouseover=function(){ 
        var subMenu=this.getElementsByTagName("div"); 
        for(j=0;j        subMenu[j].style.display="block"; 
        subMenu[j].onmouseover=function(){this.style.background="#999999";this.style.color="#000000";}; 
        subMenu[j].onmouseout=function(){this.style.background="#666666";this.style.color="#333333";};} 
        this.style.background="#666666"}; 
    menuItem[i].onmouseout=function(){ 
        var subMenu=this.getElementsByTagName("div"); 
        for(j=0;j        subMenu[j].style.display="none";} 
        this.style.background="#cccccc"}; 
    } 