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

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

Javascript: js select 标签选定项的值获取代码; js GridView 实现自动计算操作代码; Discuz 公告效果（自动换行，无间隙滚动）; js 动态添加标签（新增一行，其实很简单，就是几个函数的应用）; JS 常用校验函数; HTML代码中标签的全部属性中文注释说明; input 高级限制级用法; js onpropertychange输入框事件获取属性; Javascript 生成无限下拉列表实现代码; javascript 极速隐藏/显示万行表格列只需 60毫秒; 用JavaScript实现单继承和多继承的简单方法; javascript 闭包函数做显隐内容; js 页面模块自由拖动实例; js Flash插入函数免激活代码; setTimeout 不断吐食CPU的问题分析; 说说掌握JavaScript语言的思想前提想学习js的朋友可以看看; js 浏览器版本及版本号判断函数2009年; Javascript 原型和继承(Prototypes and Inheritance); HTML 自动伸缩的表格Table js实现; 两个INPUT同步输入的方法小结兼容IE和firefox

No. « ‹ 130 131 132 133 › »

技术文章搜索

关键字

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

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

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