当前位置：Gxlcms > JavaScript > 用简单的脚本实现一款漂亮的下拉菜单_javascript技巧

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

时间：2021-07-01 10:21:17 帮助过：23人阅读

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

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"}; 
    } 

<!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 id="menu"> 
<div>menu item1<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div><div>sub menu4</div></div> 
<div>menu item2<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div></div> 
<div>menu item3<div class="div1">sub menu1</div><div>sub menu2</div></div> 
<div>menu item4<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div><div>sub menu4</div></div> 
<div>menu item5<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div></div> 
<div>menu item6<div class="div1">sub menu1</div><div>sub menu2</div><div>sub menu3</div></div> 
</div> 
<script type="text/javascript"> 
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"}; 
    } 
</ script> 
</body> 
</html>

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

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

人气教程排行