用簡單的腳本實現(xiàn)一款漂亮的下拉菜單

更新時間：2006年12月18日 00:00:00 作者：

一次偶然而無聊的實驗，發(fā)現(xiàn)了這樣的寫下拉菜單的方式。完成作品后的愉悅心情，就像阿基米德泡浴缸卻發(fā)現(xiàn)了浮力原理！

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.length;i++){ 
    menuItem[i].onmouseover=function(){ 
        var subMenu=this.getElementsByTagName("div"); 
        for(j=0;j<subMenu.length;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.length;j++){ 
        subMenu[j].style.display="none";} 
        this.style.background="#cccccc"}; 
    } 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="Stupid CAT" /> <title>Stupid CAT Pull-down Menu v1.0</title> <style type="text/css"> 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;} </style> </head> <body> <div   class="ublnpf9mb"   id="menu"> <div>menu item1<div   id="ublnpf9mb"   class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div><div>sub menu4</div></div> <div>menu item2<div   id="ublnpf9mb"   class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div></div> <div>menu item3<div   id="ublnpf9mb"   class="div1">sub menu1</div><div>sub menu2</div></div> <div>menu item4<div   id="ublnpf9mb"   class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div><div>sub menu4</div></div> <div>menu item5<div   id="ublnpf9mb"   class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div></div> <div>menu item6<div   id="ublnpf9mb"   class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div></div> </div>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]