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

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

Javascript: 图片展示效果鼠标经过变大图，支持FF; 可拖动可改变大小div的实现代码; javascript 随机广告代码(图片广告); JS+Ajax+Jquery实现页面无刷新分页以及分组超强的实现; JQuery 浮动导航栏实现代码; jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera; js 分栏效果实现代码; 基于jQuery的ajax功能实现web service的json转化; IE 条件注释详解总结（附实例代码）; 用cssText批量修改样式; JavaScript 应用技巧集合[推荐]; jquery 导航设计实现代码学习jquery的朋友可以看下; 动态样式类封装JS代码; 一步一步教你写一个jQuery的插件教程(Plugin); 使用jQuery的ajax功能实现的RSS Reader 代码; jquery tools 系列 scrollable（2）; jquery tools系列 overlay 学习; jquery tools系列 expose 学习; javascript十个最常用的自定义函数(中文版); javascript 流畅动画实现原理

No. « ‹ 225 226 227 228 › »

技术文章搜索

关键字

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

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

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