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

2020-05-11 我要评论

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

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

核心代码：

复制代码代码如下:

<!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> 
<div>menu item1<div>sub menu1</div><div>sub menu2</div><div>sub menu3</div><div>sub menu4</div></div> 
<div>menu item2<div>sub menu1</div><div>sub menu2</div><div>sub menu3</div></div> 
<div>menu item3<div>sub menu1</div><div>sub menu2</div></div> 
<div>menu item4<div>sub menu1</div><div>sub menu2</div><div>sub menu3</div><div>sub menu4</div></div> 
<div>menu item5<div>sub menu1</div><div>sub menu2</div><div>sub menu3</div></div> 
<div>menu item6<div>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需刷新才能执行]

建立完全独立的JS对象

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

相关文章

猜您喜欢

今日热门