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

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

Javascript: IE Firefox 使用自定义标签的区别; Javascript 圆角div的实现代码; js 获取网络图片的高度和宽度的实现方法(变通了下); JavaScript 对象成员的可见性说明; JQuery困惑—包装集 DOM节点; JavaScript 三种创建对象的方法; 半角全角相互转换的js函数; 显示js对象所有属性和方法的函数; 实现JavaScript中继承的三种方式; JavaScript 函数式编程的原理; JavaScript 定义function的三种方式小结; JavaScript 基于原型的对象（创建、调用）; 层序遍历在ExtJs的TreePanel中的应用; 将jQuery应用于login页面的问题及解决; document.onreadystatechange事件的用法分析; JS 仿Flash动画放大/缩小容器; javascript 定时自动切换的选项卡Tab; 图片友情链接滚动横向,带控制按钮; 简单的加密css地址防止别人下载你的CSS文件的方法; 图片与JavaScript配合做出个性滚动条

No. « ‹ 262 263 264 265 › »

技术文章搜索

关键字

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

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

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