标签:html导航菜单 jquery菜单 html菜单 顶部固定菜单 下拉菜单
最近有人在论坛里讨论怎么制作导航菜单!我关注了一下,这里就写了一个简单的demo。供大家参考。代码如下:
<!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" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jquery顶部固定层下拉导航</title> <style type="text/css"> @charset "utf-8"; /* CSS Document */ html,*,body, div, ul,ol, li,h1,h2,h3,h4,h5,h6,p,span{margin:0;padding:0;} body{font-family:"微软雅黑", Arial, Helvetica, sans-serif;color:#666666;line-height:25px;font-size:14px;background:#f2f2f2 url(bg.gif) repeat-x left top;height:2000PX;} img{vertical-align:middle;} em{font-style:normal;} a img, :link img, :visited img{border:0;} a:link, a:visited{text-decoration:none;color:#666666;} a:hover,a:focus{text-decoration:underline;color:#0573bd;text-decoration:none;} ul, ul li{list-style-type:none;} #top_bg{height:40px;width:100%;background:#333;box-shadow:1px 1px 7px #999;position:fixed;z-index:999;left:0;border-bottom:#C6C6C6 solid 1px;} .top{width:1640px;height:40px;margin:0 auto;} .top .logo_l{width:145px;height:40px;float:left;background:url(logo.png) no-repeat left;} .nav_z{width:auto!important;height:40px;float:left;position:relative;z-index:999 ;} #navul li{float:left;width:80px;height:40px;position:relative;text-align:center;line-height:40px;} #navul li a:link, #navul li a:visited{color:#FFF;font-weight:500;letter-spacing:2px;} #navul li ul{display:none;position:absolute;z-index:999;background:#e6e6e6;border:#c6c6c6 1px solid;border-bottom:none;left:-1px;} #navul li ul li{display:block;width:78px;float:none;height:35px;position:relative;line-height:35px;border-bottom:#C6C6C6 1px solid;font-size:12px;overflow:hidden} #navul li.navmoon{background:#E6E6E6;border:#C6C6C6 1px solid;width:78px;height:38px;line-height:38px;} #navul li.navmoon a{color:#404a58;} #navul li.navhome a:hover{color:#FCFF00;} #navul li.navmoon ul{display:block;} #navul li.navmoon ul a{display:block;width:78px;height:35px;line-height:35px;} #navul li.navmoon ul a:hover{color:#0573bd;background:#FFF;} </style> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#navul > li").not(".navhome").hover(function(){ $(this).addClass("navmoon") },function(){ $(this).removeClass("navmoon") }); }); (function($){ $.fn.capacityFixed = function(options) { var opts = $.extend({},$.fn.capacityFixed.deflunt,options); var FixedFun = function(element) { var top = opts.top; element.css({ "top":top }); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: "absolute", top: top }); } }); element.find(".close-ico").click(function(event){ element.remove(); event.preventDefault(); }) }; return $(this).each(function() { FixedFun($(this)); }); }; $.fn.capacityFixed.deflunt={ right : 0,//相对于页面宽度的右边定位 top:0 }; })(jQuery); </script> </head> <body> <div id="top_bg"> <div class="top"> <a class="logo_l" href="/" title="返回首页"></a> <!--导航开始--> <div class="nav_z"> <ul id="navul" class="cl"> <li> <a href="#">新闻</a> <ul> <li><a href="#">企业文化</a></li> <li><a href="#">企业资质</a></li> <li><a href="#">服务团队</a></li> </ul> </li> <li> <a href="#">视频</a> <ul> <li><a href="#">企业文化</a></li> <li><a href="#">企业资质</a></li> <li><a href="#">服务团队</a></li> </ul> </li> <li> <a href="#">音乐</a> <ul> <li><a href="#">企业文化</a></li> <li><a href="#">企业资质</a></li> <li><a href="#">服务团队</a></li> </ul> </li> <li> <a href="#">图片</a> <ul> <li><a href="#">企业文化</a></li> <li><a href="#">企业资质</a></li> <li><a href="#">服务团队</a></li> </ul> </li> <li> <a href="#">购物</a> <ul> <li><a href="#">企业文化</a></li> <li><a href="#">企业资质</a></li> <li><a href="#">服务团队</a></li> </ul> </li> <li> <a href="#">小说</a> <ul> <li><a href="#">企业文化</a></li> <li><a href="#">企业资质</a></li> <li><a href="#">服务团队</a></li> </ul> </li> <li> <a href="#">社区</a> <ul> <li><a href="#">企业文化</a></li> <li><a href="#">企业资质</a></li> <li><a href="#">服务团队</a></li> </ul> </li> <li> <a href="#">笑话</a> <ul> <li><a href="#">企业文化</a></li> <li><a href="#">企业资质</a></li> <li><a href="#">服务团队</a></li> </ul> </li> <li> <a href="#">游戏</a> <ul> <li><a href="#">企业文化</a></li> <li><a href="#">企业资质</a></li> <li><a href="#">服务团队</a></li> </ul> </li> <li> <a href="#">更多</a> <ul> <li><a href="#">企业文化</a></li> <li><a href="#">企业资质</a></li> <li><a href="#">服务团队</a></li> </ul> </li> <!--可在此处直接添加导航--> </ul> </div><!--导航结束--> <script type="text/javascript"> $(".navbg").capacityFixed(); </script> </div> <div style="text-align:center;margin:350px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>如有不懂,请加qq群:135430763共同学习! </p> <p><a href="http://download.csdn.net/download/xmt1139057136/8547089">完整例子下载</a></p> </div> </div> </body> </html>运行效果如下:
如有不懂,请加qq群:135430763共同学习!
完整demo下载地址:http://download.csdn.net/download/xmt1139057136/8547089
标签:html导航菜单 jquery菜单 html菜单 顶部固定菜单 下拉菜单
原文地址:http://blog.csdn.net/xmtblog/article/details/44750665