专栏首页业余草jquery顶部固定层下拉导航

jquery顶部固定层下拉导航

最近有人在论坛里讨论怎么制作导航菜单!我关注了一下,这里就写了一个简单的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>

运行效果如下:

完整demo下载地址:http://download.csdn.net/download/xmt1139057136/8547089

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第四节)

    本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一...

    剽悍一小兔
  • HTML5的data-*自定义属性

    HTML5增加了一项新功能是自定义数据属性,也就是data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我...

    业余草
  • 使用knockout-sortable实现对自定义菜单的拖拽排序

    关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html

    雪雁-心莱科技
  • jQuery Mobile 自定义标签

    最近在规划产品国际化的需求,涉及到PC Web,移动Web,和各app。设计了多个版本的移动Web均不理想。 由于移动Web采...

    业余草
  • jQuery Mobile中jQuery.mobile.changePage方法使用详解

    jQuery.mobile.changePage方法用的还是很多的。作为一个老手,有必要对jQuery mobile中实用方...

    业余草
  • EasyUI之Form load函数IE8下设置Radio或Checkbox的BUG

    EasyUI的form的load函数很好用,表单赋值就靠它了,简单方便。我们可以指定url以Ajax加载,如:

    雪雁-心莱科技
  • jQuery Mobile图片轮转轮播

    最近一直很忙,刚抽出一点时间,来看了一下camera,非常好用,这里分享一下,与大家共勉!

    业余草
  • jQuery Mobile修改button的内容

    jQuery Mobile修改button的内容。

    业余草
  • 使用jQuery的ajax同步请求吃过的亏

    jQuery是一个很常用的js库。甚至我们开发任何一个项目都首先把jquery导入进行。jQuery太过强大,使用起来非常方便...

    业余草

扫码关注云+社区

领取腾讯云代金券