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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用简单的脚本实现一款漂亮的下拉菜单

Javascript: javascript options属性集合操作代码; javascript 鼠标悬浮图片显示原图移出鼠标后原图消失（多图）; javascript 显示当前系统时间代码; firefox和IE系列的相关区别整理以备后用; extJs 常用到的增，删，改，查操作代码; Javascript 面向对象特性; JavaScript的public、private和privileged模式; 通过javascript设置css属性的代码; javascript iframe编程相关代码; 滚动条变色隐藏滚动条与双击网页自动滚屏显示代码; js DOM模型操作; js 学习笔记（三）; 用js做一个小游戏平台 (一); jquery UI 1.72 之datepicker; jQuery的三种$(); JavaScript 常用函数; 用javascript实现源代码的隐藏与解密的方法; javascript Onunload与Onbeforeunload使用小结; Javascript的闭包; JavaScript 对Cookie 操作的封装小结

No. « ‹ 255 256 257 258 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 117 ::

收藏到网摘: n/a

用 JavaScript 迁移目录建立完全独立的JS对象

一次偶然而无聊的实验，发现了这样的写下拉菜单的方式。完成作品后的愉悦心情，就像阿基米德泡浴缸却发现了浮力原理！
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>
<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 全选提示:你可先修改部分代码,再按运行]

用 JavaScript 迁移目录建立完全独立的JS对象

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

评论 (0) All

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