利用jQuery实现百度知道下拉导航菜单代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

74 294 99



特效描述:利用jQuery实现 百度知道 下拉导航 菜单代码。利用jQuery实现百度知道下拉导航菜单代码

代码结构

1. 引入CSS

<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

3. HTML代码

<section id="nav-content" class="nav-menu-content-box">
	<div class="nav-menu-content">
		<div class="nav-menu-content-item">
			<div class="nav-menu-content-cell">
				<div class="nav-menu-content-sell">
					<div class="nav-menu-content-list">
						<div class="nav-menu-content-home">
							<a href="#">首页</a>
						</div>
						<div class="nav-menu-content-info">
							<div class="navMenu-item navMenu-item-one">
								<a href="javascript:;" class="navMenu-title">问题</a>
								<div class="navMenu-item-content">
									<ul>
										<li>
											<a href="javascript:;">全部问题</a>
										</li>
										<li>
											<a href="javascript:;">经济金融</a>
										</li>
										<li>
											<a href="javascript:;">企业管理</a>
										</li>
										<li>
											<a href="javascript:;">法律法规</a>
										</li>
										<li>
											<a href="javascript:;">社会民生</a>
										</li>
										<li>
											<a href="javascript:;">科学教育</a>
										</li>
										<li>
											<a href="javascript:;">健康生活</a>
										</li>
										<li>
											<a href="javascript:;">体育运动</a>
										</li>
										<li>
											<a href="javascript:;">文艺演出</a>
										</li>
										<li>
											<a href="javascript:;">电子数码</a>
										</li>
										<li>
											<a href="javascript:;">电脑网络</a>
										</li>
										<li>
											<a href="javascript:;">娱乐休闲</a>
										</li>
									</ul>
								</div>
							</div>
							<div class="navMenu-item navMenu-item-two">
								<a href="javascript:;" class="navMenu-title">精选</a>
								<div class="navMenu-item-content">
									<ul>
										<li>
											<a href="javascript:;">知道专栏</a>
										</li>
										<li>
											<a href="javascript:;">知道数据</a>
										</li>
										<li>
											<a href="javascript:;">知道日报</a>
										</li>
										<li>
											<a href="javascript:;">知道信息</a>
										</li>
										<li>
											<a href="javascript:;">知道非遗</a>
										</li>
									</ul>
								</div>
							</div>
							<div class="navMenu-item navMenu-item-three">
								<a href="javascript:;" class="navMenu-title">
									用户 <div class="nav-icon">N</div>
								</a>
								<div class="navMenu-item-content">
									<ul>
										<li style="width:100%">
											<a href="javascript:;">知道合伙人(内测)</a>
										</li>
										<li>
											<a href="javascript:;">芝麻团</a>
										</li>
										<li>
											<a href="javascript:;">芝麻将</a>
										</li>
										<li>
											<a href="javascript:;">知道行家</a>
										</li>
										<li>
											<a href="javascript:;">日报作者</a>
										</li>
										<li>
											<a href="javascript:;">知道之星</a>
										</li>
										<div class="navMenu-list-title">
											机构合作
										<div class="navMenu-list-line"></div>
										</div>
										<li>
											<a href="javascript:;">机构行家</a>
										</li>
										<li>
											<a href="javascript:;">开放平台</a>
										</li>
										<li>
											<a href="javascript:;">品牌合作</a>
										</li>
										<div class="navMenu-list-title">
											知道福利
										<div class="navMenu-list-line"></div>
										</div>
										<li>
											<a href="javascript:;">财富商城</a>
										</li>
									</ul>
								</div>
							</div>
							<div class="navMenu-item navMenu-item-four">
								<a href="javascript:;" class="navMenu-title">特色</a>
								<div class="navMenu-item-content">
									<ul>
										<li>
											<a href="javascript:;">
												<span class="navMenu-item-img">
													<img src="img/a1.png" alt="">
												</span>
												<span class="navMenu-item-tex">经验</span>
											</a>
										</li>
										<li>
											<a href="javascript:;">
												<span class="navMenu-item-img">
													<img src="img/b1.png" alt="">
												</span>
												<span class="navMenu-item-tex">宝宝知道</span>
											</a>
										</li>
										<li>
											<a href="javascript:;">
												<span class="navMenu-item-img">
													<img src="img/c1.png" alt="">
												</span>
												<span class="navMenu-item-tex">作业帮</span>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<script type="text/javascript">
	$(document).ready(function(){
		$('.nav-menu-content-box').hover(function() {
			$(this).addClass('dow-hover');
			$(".nav-menu-content").show('slow');
		}, function() {
			$(this).removeClass('dow-hover');
		});
	});
	var maxHeight = 400;
	$(function(){
		$(".nav-menu-content-box > li").hover(function() {
			var $container = $(this),
				$list = $container.find("ul"),
				$anchor = $container.find("a"),
				height = $list.height() * 1.1,
				multiplier = height / maxHeight;
			$container.data("origHeight", $container.height());
			$anchor.addClass("hover");
			$list
				.show()
				.css({
					paddingTop: $container.data("origHeight")
				});
			if (multiplier > 1) {
				$container
					.css({
						height: maxHeight,
						overflow: "hidden"
					})
					.mousemove(function(e) {
						var offset = $container.offset();
						var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
						if (relativeY > $container.data("origHeight")) {
							$list.css("top", -relativeY + $container.data("origHeight"));
						};
					});
			}
		}, function() {
			var $el = $(this);
			$el
				.height($(this).data("origHeight"))
				.find("ul")
				.css({ top: 0 })
				.hide()
				.end()
				.find("a")
				.removeClass("hover");
		});
	});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 收缩导航菜单 二级导航菜单 文字收缩展开 下拉导航菜单 图片收缩展开 竖直导航菜单 图标导航菜单 固定导航菜单 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 收缩收起展开 导航菜单导航条

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到