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

来源：懂视网责编：小采时间：2020-11-27 20:34:01

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

用简单的脚本实现一款漂亮的下拉菜单_javascript技巧:一次偶然而无聊的实验，发现了这样的写下拉菜单的方式。完成作品后的愉悦心情，就像阿基米德泡浴缸却发现了浮力原理！ NAME:Stupid CAT Pull-down Menu v1.0 SUPPORT:Ie(√) Firefox(√) STANDARD:XHTML 1.0 Strict / CSS2.0

推荐度：

点击下载本文 文档为doc格式

导读用简单的脚本实现一款漂亮的下拉菜单_javascript技巧:一次偶然而无聊的实验，发现了这样的写下拉菜单的方式。完成作品后的愉悦心情，就像阿基米德泡浴缸却发现了浮力原理！ NAME:Stupid CAT Pull-down Menu v1.0 SUPPORT:Ie(√) Firefox(√) STANDARD:XHTML 1.0 Strict / CSS2.0

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

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

<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需刷新才能执行]

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推荐度：

点击下载本文 文档为doc格式

标签：技巧下拉菜单简单

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐