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

时间:2021-05-18

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

NAME:StupidCATPull-downMenuv1.0
SUPPORT:Ie(√)Firefox(√)
STANDARD:XHTML1.0Strict/CSS2.0

核心样式:
复制代码 代码如下:
html,body{
background:#000000;
height:100%;
font-size:12px;
font-family:Arial,Helvetica,sans-serif;
color:#333333;
margin:20pxauto;
overflow:hidden;
text-align:center;}

div#menu{
width:100%;
height:34px;
padding:0px0px0px5px;}

div#menudiv{
width:125px;
height:20px;
float:left;
text-transform:capitalize;
background:#cccccc;
padding:5px0px0px0px;
margin:4px1px0px0px;}

div#menudivdiv{
width:125px;
height:20px;
border-bottom:1px#333333solid;
background:#666666;
margin-top:-4px;
cursor:pointer;
display:none;}

div#menudivdiv.div1{
margin-top:3px;
border-top:1px#333333solid;}


核心代码:
复制代码 代码如下:
varmenuItem=document.getElementById("menu").getElementsByTagName("div");
for(i=0;i<menuItem.length;i++){
menuItem[i].onmouseover=function(){
varsubMenu=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(){
varsubMenu=this.getElementsByTagName("div");
for(j=0;j<subMenu.length;j++){
subMenu[j].style.display="none";}
this.style.background="#cccccc"};
}

Stupid CAT Pull-down Menu v1.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;} 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;} 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 [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章