模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
向上展开的多级CSS菜单_菜单导航特效
查看演示效果
特效Tag:
多级菜单
添加
挺不错的向上展开的多级菜单,大致试了一下,可以支持6级,太酷了,用作产品导航应该很爽。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" /> <title>向上展开的多级CSS菜单</title> <meta name="Author" mrc="Stu Nicholls" /> <style> #nav, #nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#ace #79b #68a #bde; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;} #nav {height:25px; padding:0;} #nav li {float:left;} #nav li li {float:none; background:#fff;} * html #nav li li {float:left;} #nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;} #nav li li a {height:20px; line-height:20px; float:none;} #nav li:hover {position:relative; z-index:300;} #nav li:hover ul {left:0; bottom:21px; top:auto;} * html #nav li:hover ul {left:10px;} #nav ul {position:absolute; left:-9999px; top:-9999px;} * html #nav ul {width:1px;} #nav li:hover li:hover > ul {left:-15px; margin-left:100%; bottom:-7px; top:auto;} #nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;} #nav li:hover > a {text-decoration:underline; color:#57b;} #nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {left:-15px; margin-left:100%; bottom:-7px; top:auto;} #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul {position:absolute; left:-9999px; top:-9999px;} #nav li:hover a, #nav li:hover li:hover a, #nav li:hover li:hover li:hover a, #nav li:hover li:hover li:hover li:hover a, #nav li:hover li:hover li:hover li:hover li:hover a, #nav li:hover li:hover li:hover li:hover li:hover li:hover a {text-decoration:underline; color:#57b;} #nav li:hover li a, #nav li:hover li:hover li a, #nav li:hover li:hover li:hover li a, #nav li:hover li:hover li:hover li:hover li a, #nav li:hover li:hover li:hover li:hover li:hover li a {text-decoration:none; color:#888;} </style> <script> stuHover = function() { var cssRule; var newSelector; for (var i = 0; i < document.styleSheets.length; i++) for (var x = 0; x < document.styleSheets[i].rules.length ; x++) { cssRule = document.styleSheets[i].rules[x]; if (cssRule.selectorText.indexOf("LI:hover") != -1) { newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover"); document.styleSheets[i].addRule(newSelector , cssRule.style.cssText); } } var getElm = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<getElm.length; i++) { getElm[i].onmouseover=function() { this.className+=" iehover"; } getElm[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" iehover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", stuHover); </script> </head> <body> <h1><a href="http://www.mb5u.com">向上展开的多级CSS菜单</a></h1> <h2>Skeleton pull up menu</h2> <ul id="nav"> <li><a href="#nogo">Home</a></li> <li><a href="#nogo">About us »</a> <ul> <li><a href="#nogo">Who we are</a></li> <li><a href="#nogo">What we do</a></li> </ul> </li> <li><a href="#nogo">Products »</a> <ul> <li><a href="#nogo">Tripods »</a> <ul> <li><a href="#nogo">Monopods</a></li> <li><a href="#nogo">Tripods</a></li> <li><a href="#nogo">Adjutable head</a></li> </ul> </li> <li><a href="#nogo">Films »</a> <ul> <li><a href="#nogo">35mm</a></li> <li><a href="#nogo">Color Print</a></li> </ul> </li> <li><a href="#nogo">Cameras »</a> <ul> <li><a href="#nogo">Compact »</a> <ul> <li><a href="#nogo">Canon</a></li> <li><a href="#nogo">Nikon</a></li> <li><a href="#nogo">Pentax</a></li> </ul> </li> <li><a href="#nogo">Digital »</a> <ul> <li><a href="#nogo">Canon</a></li> <li><a href="#nogo">Nikon »</a> <ul> <li><a href="#nogo">Lenses »</a> <ul> <li><a href="#nogo">Mirror</a></li> <li><a href="#nogo">Macro</a></li> </ul> </li> <li><a href="#nogo">Speedlight</a></li> <li><a href="#nogo">Coolpix »</a> <ul> <li><a href="#nogo">Coolpix S10</a></li> <li><a href="#nogo">Coolpix S500</a></li> </ul> </li> <li><a href="#nogo">D200</a></li> <li><a href="#nogo">D80</a></li> </ul> </li> <li><a href="#nogo">Minolta</a></li> <li><a href="#nogo">Pentax</a></li> </ul> </li> <li><a href="#nogo">SLR »</a> <ul> <li><a href="#nogo">Canon</a></li> <li><a href="#nogo">Nikon</a></li> <li><a href="#nogo">Minolta</a></li> </ul> </li> </ul> </li> <li><a href="#nogo">Flash</a></li> <li><a href="#nogo">Video</a></li> </ul> </li> <li><a href="#nogo">FAQs »</a> <ul> <li><a href="#nogo">Cameras</a></li> <li><a href="#nogo">Film types</a></li> </ul> </li> <li><a href="#nogo">Privacy »</a> <ul> <li><a href="#nogo">Privacy Policy</a></li> <li><a href="#nogo">Privacy Statement</a></li> </ul> </li> <li><a href="#nogo">Contact us</a></li> </ul> </body> </html>
所属频道:
菜单导航特效
/
更新时间:2012-11-03
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
阴影菜单,Div+Js版,微软以前网站曾用过
CSS鼠标滑动菜单
兼容性好的TAB选项卡
很酷的菜单
关联菜单
类似门户网站的CSS双行导航菜单
银灰色三级CSS下拉菜单
鼠标右键菜单,仿系统
一个CSS个性菜单
CSS 竖排背景渐变的菜单
猜你也喜欢看这些
CSS用Alpha改变图片透明度
JavaScript图片预加载代码,显示loading
规定区域的JS拖动展示效果
JS拖拽放大拉伸图片
漂亮实用的商品图片jquery tips提示框(无图片箭头+阴影)
图片旋转展示,仿腾讯QQ网的特效
链接图片无缝向左平滑滚动Js版代码
CSS制作的类似相册浏览的功能
JavaScript图片扭曲变形效果
简单高效的javascript 幻灯片播放
相关链接:
复制本页链接
|
搜索向上展开的多级CSS菜单
特效说明:
菜单导航模板
-
向上展开的多级CSS菜单
。