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

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

Javascript: 用JavaScript实现浏览器地震效果; Javascript实例教程(8) 利用Javascript基于浏览器类型的重定向; Javascript实例教程(14) 鼠标触发窗口; 使主页呈现“飞舞”特效; Javascript实例教程(21) OLE Automation(1); Javascript实例教程(13) 鼠标移过时报警; Javascript实例教程(10) 随机显示图片; Javascript实例教程(2) 创建弹出式窗口; JavaScript 小技巧(第十集); Javascript实例教程(3) 创建折叠式导航菜单; Javascript实例教程(7) 利用Javascript进行密码保护; 完美解决一个事件激活多个函数(2); Javascript模拟游戏中的弹出菜单效果; Javascript实例教程(6) 在一个表单中设置和检查Cookies; JavaScript 小技巧(第八集); Javascript实例教程(4) 探测浏览器插件; JavaScript 小技巧(第九集); JavaScript学习:基础继承机制; 初学Javascript之cookie篇(译); 让弹出窗口变得“体贴”一些(javascript)

No. « ‹ 10 11 12 13 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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 中的用简单的脚本实现一款漂亮的下拉菜单