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

ttx9n · 发表于 2006-12-18 00:00:00

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

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> 
 
menu item1sub menu1sub menu2sub menu3sub menu4 
menu item2sub menu1sub menu2sub menu3 
menu item3sub menu1sub menu2 
menu item4sub menu1sub menu2sub menu3sub menu4 
menu item5sub menu1sub menu2sub menu3 
menu item6sub menu1sub menu2sub menu3 
 
<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需刷新才能执行]

v3sfsi · 发表于 2022-8-8 18:31:54

先把创新班才能下班才能下班

j__j33p · 发表于 2022-9-12 22:56:07

vcxvcxv

nwk53kbd · 发表于 2022-11-19 18:45:06

呵呵呵呵呵呵

6ox8dn · 发表于 2022-11-24 07:30:19

那三门，你们谁寂寞才快乐撒

fzyzy · 发表于 2023-1-2 12:23:51

借款金额看了就立刻

czoz5y · 发表于 2023-8-10 07:03:36

谢谢下载来看看

JosephSA · 发表于 2023-10-26 13:46:28

天天源码社区。。。。

4k0mp7m · 发表于 2023-12-3 07:35:50

还可以不错

qzdhcgs · 发表于 2024-5-24 17:37:13

2222222222222222

账号		自动登录	找回密码
密码			立即注册

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

相关帖子