经验分享程序开发文档资料数据资源其它资源

jQuery全屏大幅下拉菜单导航代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery全屏大幅下拉菜单导航代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery全屏大幅下拉菜单导航代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>jQuery全屏大幅下拉菜单导航代码</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
</head>
<body>

<div class="container">
	<div class="main">
		<nav id="cbp-hrmenu" class="cbp-hrmenu">
			<ul>
				<li>
					<a href="#">Products</a>
					<div class="cbp-hrsub">
						<div class="cbp-hrsub-inner"> 
							<div>
								<h4>Learning &amp; Games</h4>
								<ul>
									<li><a href="#">Catch the Bullet</a></li>
									<li><a href="#">Snoopydoo</a></li>
									<li><a href="#">Fallen Angel</a></li>
									<li><a href="#">Sui Maker</a></li>
									<li><a href="#">Wave Master</a></li>
									<li><a href="#">Golf Pro</a></li>
								</ul>
							</div>
							<div>
								<h4>Utilities</h4>
								<ul>
									<li><a href="#">Gadget Finder</a></li>
									<li><a href="#">Green Tree Express</a></li>
									<li><a href="#">Green Tree Pro</a></li>
									<li><a href="#">Wobbler 3.0</a></li>
									<li><a href="#">Coolkid</a></li>
								</ul>
							</div>
							<div>
								<h4>Education</h4>
								<ul>
									<li><a href="#">Learn Thai</a></li>
									<li><a href="#">Math Genius</a></li>
									<li><a href="#">Chemokid</a></li>
								</ul>
								<h4>Professionals</h4>
								<ul>
									<li><a href="#">Success 1.0</a></li>
									<li><a href="#">Moneymaker</a></li>
								</ul>
							</div>
						</div><!-- /cbp-hrsub-inner -->
					</div><!-- /cbp-hrsub -->
				</li>
				<li>
					<a href="#">Downloads</a>
					<div class="cbp-hrsub">
						<div class="cbp-hrsub-inner">
							<div>
								<h4>Education &amp; Learning</h4>
								<ul>
									<li><a href="#">Learn Thai</a></li>
									<li><a href="#">Math Genius</a></li>
									<li><a href="#">Chemokid</a></li>
								</ul>
								<h4>Professionals</h4>
								<ul>
									<li><a href="#">Success 1.0</a></li>
									<li><a href="#">Moneymaker</a></li>
								</ul>
							</div>
							<div>
								<h4>Entertainment</h4>
								<ul>
									<li><a href="#">Gadget Finder</a></li>
									<li><a href="#">Green Tree Express</a></li>
									<li><a href="#">Green Tree Pro</a></li>
									<li><a href="#">Holy Cannoli</a></li>
									<li><a href="#">Wobbler 3.0</a></li>
									<li><a href="#">Coolkid</a></li>
								</ul>
							</div>
							<div>
								<h4>Games</h4>
								<ul>
									<li><a href="#">Catch the Bullet</a></li>
									<li><a href="#">Snoopydoo</a></li>
									<li><a href="#">Fallen Angel</a></li>
									<li><a href="#">Sui Maker</a></li>
									<li><a href="#">Wave Master</a></li>
									<li><a href="#">Golf Pro</a></li>
								</ul>
							</div>
						</div><!-- /cbp-hrsub-inner -->
					</div><!-- /cbp-hrsub -->
				</li>
				<li>
					<a href="#">Applications</a>
					<div class="cbp-hrsub">
						<div class="cbp-hrsub-inner"> 
							<div>
								<h4>Learning &amp; Games</h4>
								<ul>
									<li><a href="#">Catch the Bullet</a></li>
									<li><a href="#">Snoopydoo</a></li>
								</ul>
								<h4>Utilities</h4>
								<ul>
									<li><a href="#">Gadget Finder</a></li>
									<li><a href="#">Green Tree Express</a></li>
									<li><a href="#">Green Tree Pro</a></li>
									<li><a href="#">Wobbler 3.0</a></li>
									<li><a href="#">Coolkid</a></li>
								</ul>
							</div>
							<div>
								<h4>Education</h4>
								<ul>
									<li><a href="#">Learn Thai</a></li>
									<li><a href="#">Math Genius</a></li>
									<li><a href="#">Chemokid</a></li>
								</ul>
								<h4>Professionals</h4>
								<ul>
									<li><a href="#">Success 1.0</a></li>
									<li><a href="#">Moneymaker</a></li>
								</ul>
							</div>
						</div><!-- /cbp-hrsub-inner -->
					</div><!-- /cbp-hrsub -->
				</li>
				<li>
					<a href="#">Projects</a>
					<div class="cbp-hrsub">
						<div class="cbp-hrsub-inner"> 
							<div>
								<h4>Learning &amp; Games</h4>
								<ul>
									<li><a href="#">Catch the Bullet</a></li>
									<li><a href="#">Snoopydoo</a></li>
									<li><a href="#">Fallen Angel</a></li>
									<li><a href="#">Sui Maker</a></li>
									<li><a href="#">Wave Master</a></li>
									<li><a href="#">Golf Pro</a></li>
								</ul>
								<h4>Utilities</h4>
								<ul>
									<li><a href="#">Gadget Finder</a></li>
									<li><a href="#">Green Tree Express</a></li>
								</ul>
							</div>
							<div>
								<h4>Entertainment</h4>
								<ul>
									<li><a href="#">Gadget Finder</a></li>
									<li><a href="#">Green Tree Express</a></li>
									<li><a href="#">Green Tree Pro</a></li>
									<li><a href="#">Holy Cannoli</a></li>
									<li><a href="#">Wobbler 3.0</a></li>
									<li><a href="#">Coolkid</a></li>
								</ul>
							</div>
						</div><!-- /cbp-hrsub-inner -->
					</div><!-- /cbp-hrsub -->
				</li>
				<li>
					<a href="#">Freeware</a>
					<div class="cbp-hrsub">
						<div class="cbp-hrsub-inner"> 
							<div>
								<h4>Utilities</h4>
								<ul>
									<li><a href="#">Green Tree Pro</a></li>
									<li><a href="#">Wobbler 3.0</a></li>
									<li><a href="#">Coolkid</a></li>
								</ul>
								<h4>Education</h4>
								<ul>
									<li><a href="#">Learn Thai</a></li>
									<li><a href="#">Math Genius</a></li>
									<li><a href="#">Chemokid</a></li>
								</ul>
							</div>
							<div>
								<h4>Professionals</h4>
								<ul>
									<li><a href="#">Success 1.0</a></li>
									<li><a href="#">Moneymaker</a></li>
								</ul>
							</div>
							<div>
								<h4>Learning &amp; Games</h4>
								<ul>
									<li><a href="#">Catch the Bullet</a></li>
									<li><a href="#">Snoopydoo</a></li>
									<li><a href="#">Fallen Angel</a></li>
									<li><a href="#">Sui Maker</a></li>
									<li><a href="#">Wave Master</a></li>
									<li><a href="#">Golf Pro</a></li>
								</ul>
							</div>
						</div><!-- /cbp-hrsub-inner -->
					</div><!-- /cbp-hrsub -->
				</li>
			</ul>
		</nav>
	</div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/cbpHorizontalMenu.min.js"></script>
<script type="text/javascript">
$(function() {
	cbpHorizontalMenu.init();
});
</script>
</body>
</html>

JS代码(cbpHorizontalMenu.min.js):

var cbpHorizontalMenu=(function(){
	var b=$("#cbp-hrmenu > ul > li"),g=b.children("a"),c=$("body"),d=-1;
	function f(){
	g.on("click",a);
	b.on("click",function(h){
	h.stopPropagation()}
)}
function a(j){
	if(d!==-1){
	b.eq(d).removeClass("cbp-hropen")}
var i=$(j.currentTarget).parent("li"),h=i.index();
	if(d===h){
	i.removeClass("cbp-hropen");
	d=-1}
else{
	i.addClass("cbp-hropen");
	d=h;
	c.off("click").on("click",e)}
return false}
function e(h){
	b.eq(d).removeClass("cbp-hropen");
	d=-1}
return{
	init:f}
}
)();

CSS代码(component.css):

.cbp-hrmenu{width:100%;margin-top:2em;border-bottom:4px solid #47a3da;}
/* general ul style */
.cbp-hrmenu ul{margin:0;padding:0;list-style-type:none;}
/* first level ul style */
.cbp-hrmenu > ul,.cbp-hrmenu .cbp-hrsub-inner{width:90%;max-width:70em;margin:0 auto;padding:0 1.875em;}
.cbp-hrmenu > ul > li{display:inline-block;}
.cbp-hrmenu > ul > li > a{font-weight:700;padding:1em 2em;color:#999;display:inline-block;}
.cbp-hrmenu > ul > li > a:hover{color:#47a3da;}
.cbp-hrmenu > ul > li.cbp-hropen a,.cbp-hrmenu > ul > li.cbp-hropen > a:hover{color:#fff;background:#47a3da;}
/* sub-menu */
.cbp-hrmenu .cbp-hrsub{display:none;position:absolute;background:#47a3da;width:100%;left:0;}
.cbp-hropen .cbp-hrsub{display:block;padding-bottom:3em;}
.cbp-hrmenu .cbp-hrsub-inner > div{width:33%;float:left;padding:0 2em 0;}
.cbp-hrmenu .cbp-hrsub-inner:before,.cbp-hrmenu .cbp-hrsub-inner:after{content:" ";display:table;}
.cbp-hrmenu .cbp-hrsub-inner:after{clear:both;}
.cbp-hrmenu .cbp-hrsub-inner > div a{line-height:2em;}
.cbp-hrsub h4{color:#afdefa;padding:2em 0 0.6em;margin:0;font-size:160%;font-weight:300;}
/* Examples for media queries */
@media screen and (max-width:52.75em){.cbp-hrmenu{font-size:80%;}
}
@media screen and (max-width:43em){.cbp-hrmenu{font-size:120%;border:none;}
.cbp-hrmenu > ul,.cbp-hrmenu .cbp-hrsub-inner{width:100%;padding:0;}
.cbp-hrmenu .cbp-hrsub-inner{padding:0 2em;font-size:75%;}
.cbp-hrmenu > ul > li{display:block;border-bottom:4px solid #47a3da;}
.cbp-hrmenu > ul > li > a{display:block;padding:1em 3em;}
.cbp-hrmenu .cbp-hrsub{position:relative;}
.cbp-hrsub h4{padding-top:0.6em;}
}
@media screen and (max-width:36em){.cbp-hrmenu .cbp-hrsub-inner > div{width:100%;float:none;padding:0 2em;}
}

CSS代码(default.css):

/* General Demo Style */
@import url(http://fonts.useso.com/css?family=Lato:300,400,700);@font-face{font-family:'fontawesome';src:url('../fonts/fontawesome.eot');src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),url('../fonts/fontawesome.svg#fontawesome') format('svg'),url('../fonts/fontawesome.woff') format('woff'),url('../fonts/fontawesome.ttf') format('truetype');font-weight:normal;font-style:normal;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{font-family:'Lato',Calibri,Arial,sans-serif;color:#47a3da;}
a{color:#f0f0f0;text-decoration:none;}
a:hover{color:#000;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
34.24 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
34.24 KB
立即下载
穆芬荣
了解
打赏作者 鼓励作者
Html Js 菜单导航特效1
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章