JQuery 横向下拉导航延迟版
2012-07-18 00:06
204 查看
<!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=gb2312" /> <title>JQuery 横向下拉导航延迟版 </title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".subNavLi").hover(function(){ //鼠标的over函数 $(this).addClass("current"); subNav=$(this).children("ul"); //获得要显示的ul,即子菜单 timeoutid=setTimeout(function(){ //延迟处理,防止鼠标无意划过时,子菜单出现 if(subNav.css("display")=="none"){ //鼠标指向有子菜单的元素时, subNav.slideToggle(); //显示子菜单 } },200); }, function(){ //鼠标的out函数 $(this).removeClass("current"); clearTimeout(timeoutid); if(subNav.css("display")=="block"){ //鼠标移出子菜单元素时, subNav.slideToggle(); //子菜单消失 } }); }); </script> <style type="text/css"> * { margin:0; padding:0; } li { display:inline; } li ul { display:none; position:absolute; padding-top:30px; } li.current { background:#eee; } li.current a { color:#f00; } </style> </head> <body> <div class="container"> <ul class="menu"> <li><a href="#">首页</a></li> <li class="subNavLi"><a href="#">原创作品</a> <ul class="subNav"> <li><a href="#">1111111111111111111111</a></li> <li><a href="#">1111111111111111111111</a></li> <li><a href="#">1111111111111111111111</a></li> </ul> </li> <li class="subNavLi"><a href="#">设计素材</a> <ul class="subNav"> <li><a href="#">SubNav</a></li> <li><a href="#">SubNav</a></li> <li><a href="#">SubNav</a></li> <li><a href="#">SubNav</a></li> </ul> </li> <li class="subNavLi"><a href="#">佳作欣赏</a> <ul class="subNav"> <li><a href="#">SubNav Link</a></li> <li><a href="#">SubNav Link</a></li> <li><a href="#">SubNav Link</a></li> <li><a href="#">SubNav Link</a></li> <li><a href="#">SubNav Link</a></li> <li><a href="#">SubNav Link</a></li> </ul> </li> <li><a href="#">论坛</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html>
相关文章推荐
- 一款jQuery立体感动态下拉导航菜单特效
- 基于jQuery动画二级下拉导航菜单
- 美观的导航菜单 -- JQuery实现,支持横向, 竖向
- jquery二级导航菜单--可弹出下拉层 UL/LI结构
- 可控制导航下拉方向的jQuery下拉菜单代码
- jquery实现的横向二级导航效果代码
- jQuery实现简单下拉导航效果
- jquery实现的固定位置下拉隐藏上拉显示悬浮导航菜单特效
- 【荐】jQuery+Css打造位于网页顶部漂亮黄色下拉导航
- jQuery三级下拉列表导航菜单代码分享
- jQuery实现淡入淡出二级下拉导航菜单的方法
- 纯CSS下拉导航和jquery下拉导航对比
- jQuery 实现下拉导航 二级导航
- jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
- jQuery下拉导航及用position定层叠优先级
- jQuery实现淡入淡出二级下拉导航菜单的方法
- 横向导航下拉菜单显示在下个div之上
- jquery实现无限分级横向导航菜单的方法
- jquery实现适用于门户站的导航下拉菜单效果代码