版权声明
·
网站留言
·
联系我们
·
加入收藏
热门关键词:
焦点图
png图标
背景
按钮
首页
PNG图标
广告代码
网页模板
字体下载
JS代码
CSS样式
技术文档
网站常用
gif图片
JPG图片
JavaScript用户手册
flash动画
jsp编程
.net编程
网站配色
网站优化
Oracle教程
JS技术
数据库编程
网络维护
html基础
安全相关
测试相关
知识扩展
CSS技术
DIV+CSS实例
DIV+CSS教程
鼠标特效
网站常用
文字特效
时间日期
图片特效
表格图层
导航菜单
网页特效
详细内容
首页
>>
JS
>>
导航菜单
>> 正文
[
关闭窗口
]
一个极其常用的网站内页导航菜单
发布日期:2010-09-04
点击:28506
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS弹出菜单 - 站点基地 zdbase.com</title> <style type="text/css"> body {font-family: Arial, Helvetica, sans-serif;line-height: 20px;padding: 50px;background-color: #fcfcfc;font-size: 12px;} * { margin: 0px;padding: 0px;} a {color: #336699;text-decoration: none;} .clear {font-size: 0px;line-height: 0px;clear: both;} ul, ol {list-style-type: none;} .menu {width: 200px;background-color: #fff;} .menu h1 {border: 1px solid #dbdbdb;font-size: 14px;line-height: 29px;height: 29px;padding-left: 20px;background-color: #f1f1f1;} .menu ul {} .menu ul li{border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-right-style: solid;border-bottom-style: solid; border-left-style: solid;border-right-color: #dbdbdb;border-bottom-color: #dbdbdb;border-left-color: #dbdbdb;height: 29px;position: relative;color: #336699;float: left;width: 198px;} .menu ul li span{border-bottom-width: 1px;font-size: 14px;line-height: 29px;height: 29px;cursor: pointer;position: relative;padding-left: 20px;width: 150px;display: block;} .menu ul li.this {color: #f83100;background-color: #f2f2f2;} .menu ul li.this a{color: #f83100;background-color: #f2f2f2;} .menu ul li.this ol {position: absolute;display: block;} .menu ul li ol {position: absolute;left: 198px;width: 250px;background-color: #f2f2f2;border: 1px solid #ccc;top: -31px;display: none;} .menu ul li ol dl {position: relative;padding-right: 8px;padding-bottom: 7px;padding-left: 8px;} .menu ul li ol dd {padding: 10px;border: 1px solid #e1e1e1;background-color: #fff;} .menu ul li ol h2 {line-height: 30px;font-size: 12px;height: 30px;} .menu ul li ol h2 em {float: right;font-weight: normal;font-style: normal;color: #777;cursor: pointer;} .menu ul li ol small {font-size: 0px;line-height: 0px;background-color: #f2f2f2;display: block;height: 29px;width: 9px;position: absolute;top: 30px;left: -9px;} </style> <script type="text/javascript"> function toggle(){ var arrayli = document.getElementById("allClass").getElementsByTagName("li"); //获取菜单数组 for(i=0;i<arrayli.length;i++){ arrayli[i].onmouseover = function(){ this.className = "this"; } arrayli[i].onmouseout = function(){ this.className = ""; } arrayli[i].getElementsByTagName("em")[0].onclick=function(){ this.parentNode.parentNode.parentNode.parentNode.parentNode.className = ""; } } } window.onload=function(){ toggle(); } </script> </head> <body> <div class="menu"> <h1>所有分类</h1> <ul id="allClass"> <li><span><a href="http://www.zdbase.com/">站点基地zdbase</a></span> <ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt> <dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p> <p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p> <p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd> <small> </small></dl></ol> </li> <li><span><a href="http://www.zdbase.com/">站点基地-网站素材</a></span> <ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt> <dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p> <p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p> <p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd> <small> </small></dl></ol> </li> <li><span><a href="http://www.zdbase.com/">站点基地zdbase</a></span> <ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt> <dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p> <p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p><p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd> <small> </small></dl></ol> </li> <li><span><a href="http://www.zdbase.com/">站点基地-网站素材</a></span> <ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt> <dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p> <p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p> <p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd> <small> </small></dl></ol> </li> <li><span><a href="http://www.zdbase.com/">站点基地zdbase</a></span> <ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt> <dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p> <p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p><p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd> <small> </small></dl></ol> </li> <li><span><a href="http://www.zdbase.com/">站点基地-网站素材</a></span> <ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt> <dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p> <p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p> <p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd> <small> </small></dl></ol> </li> <li><span><a href="http://www.zdbase.com/">站点基地zdbase</a></span> <ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt> <dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p> <p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p><p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd> <small> </small></dl></ol> </li> <li><span><a href="http://www.zdbase.com/">站点基地-网站素材</a></span> <ol><dl><dt><h2><em onclick="closeBox(this)">关闭</em>栏目分类</h2></dt> <dd><p><a href="http://www.zdbase.com/content/png.aspx?sClass=1">PNG图标</a></p><p><a href="http://www.zdbase.com/content/pic.aspx?sClass=2">GIF图标</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=7">网站模板</a></p> <p><a href="http://www.zdbase.com/content/js.aspx?sClass=4">JS代码</a></p> <p><a href="http://www.zdbase.com/content/png.aspx?sClass=9">网页特效</a></p> <p><a href="http://www.zdbase.com/content/font.aspx">字体下载</a></p></dd> <small> </small></dl></ol> </li> <div class="clear"></div> </ul> </div> <br /><br /> <p>站点基地 - 网站素材,PNG图标,网页广告特效代码。网址:<a href="http://www.zdbase.com">http://www.zdbase.com</a></p> </body> </html>
提示:您可以先修改部分代码再运行,复制代码和保存代码功能在Firefox下无效。
很实用,推荐!
相关文章
一个极其常用的网站内页导航菜单
无效的菜单句柄的解决方法
联动菜单的制作方法,js方式和.net后...
纯div+css制作的弹出菜单-02
纯div+css制作的弹出菜单-05
纯div+css制作的弹出菜单-03
纯div+css制作的弹出菜单-04
纯div+css制作的弹出菜单-01
竖列Navigation导航菜单
TAB式简洁导航菜单
CSS横向下拉菜单
CSS竖向下拉菜单演示
仿MAC官网导航菜单样式
Chinaz菜单导航
超酷JS圆形浮动菜单下载
三级下拉菜单 (通用版)
鼠标移过放大的JS动态菜单
仿Amazon.com菜单效果的简单实现
用CSS做的水平导航菜单效果
仿经典导航菜单
纯CSS的下拉菜单 支持IE6 IE7 ...
无图片实现圆角弹出式多级菜单
关于我们
-
版权声明
-
联系我们
-
网站留言
-
网站地图
Copyright © 2010 zdbase.com All Rights Reserved.
苏ICP备15039389号
可人软件设计