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

jQuery图文下拉菜单特效代码

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

以下是 jQuery图文下拉菜单特效代码 的示例演示效果:

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

部分效果截图:

jQuery图文下拉菜单特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery</title>
<link href="css/megamenu.css" rel="stylesheet">
<style>html, body{height:100%}body{background: #fff url(img/back.png) repeat;margin: 0;padding: 0;}.content{margin: 50px 50px 700px 50px;}.megamenu{margin: 0 0 0 0;}.megamenu > li.grid .megapanel .row [class*="col"]{background: #ccc !important;}.megamenu h4{margin-top: 0;}.megamenu .adress{}.megamenu .adress label{float: left;width: 100%;margin-bottom: 2px;}</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/megamenu.js"></script>
<script>$(document).ready(function(){$(".megamenu").megamenu();});</script>
</head>

<body>

<div class="content">
	<ul class="megamenu skyblue">
		<li class="active"><a href="#">Home</a></li>
		<li class="grid"><a href="#">Grid</a><div class="megapanel">
			<div class="row">
				<div class="col1">
				</div>
				<div class="col1">
				</div>
				<div class="col1">
				</div>
				<div class="col1">
				</div>
				<div class="col1">
				</div>
				<div class="col1">
				</div>
			</div>
			<div class="row">
				<div class="col2">
				</div>
				<div class="col1">
				</div>
				<div class="col1">
				</div>
				<div class="col1">
				</div>
				<div class="col1">
				</div>
			</div>
			<div class="row">
				<div class="col3">
				</div>
				<div class="col1">
				</div>
				<div class="col1">
				</div>
				<div class="col1">
				</div>
			</div>
			<div class="row">
				<div class="col4">
				</div>
				<div class="col1">
				</div>
				<div class="col1">
				</div>
			</div>
			<div class="row">
				<div class="col5">
				</div>
				<div class="col1">
				</div>
			</div>
			<div class="row">
				<div class="col6">
				</div>
			</div>
			<div class="row">
				<div class="col3">
				</div>
				<div class="col3">
				</div>
			</div>
			<div class="row">
				<div class="col2">
				</div>
				<div class="col1">
				</div>
				<div class="col1">
				</div>
				<div class="col2">
				</div>
			</div>
			<div class="row">
				<div class="col1">
				</div>
				<div class="col4">
				</div>
				<div class="col1">
				</div>
			</div>
			<div class="row">
				<div class="col4">
				</div>
				<div class="col2">
				</div>
			</div>
			<div class="row">
				<div class="col2">
				</div>
				<div class="col3">
				</div>
				<div class="col1">
				</div>
			</div>
		</div>
		</li>
		<li><a href="#">Images</a><div class="megapanel">
			<div class="row">
				<div class="col1">
					<img src="img/1.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/2.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/3.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/4.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/5.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/6.jpg" title="image" /></div>
			</div>
			<div class="row">
				<div class="col1">
					<img src="img/7.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/8.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/9.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/10.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/11.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/12.jpg" title="image" /></div>
			</div>
			<div class="row">
				<div class="col1">
					<img src="img/13.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/14.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/15.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/16.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/17.jpg" title="image" /></div>
				<div class="col1">
					<img src="img/18.jpg" title="image" /></div>
			</div>
		</div>
		</li>
		<li><a href="#">Dropdown</a><ul class="dropdown">
			<li><a href="#">Dropdown item</a></li>
			<li><a href="#">Dropdown item</a></li>
			<li><a href="#">Dropdown item</a><ul class="dropdown">
				<li><a href="#">Dropdown item</a></li>
				<li><a href="#">Dropdown item</a></li>
				<li><a href="#">Dropdown item</a><ul class="dropdown">
					<li><a href="#">Dropdown item</a></li>
					<li><a href="#">Dropdown item</a></li>
					<li><a href="#">Dropdown item</a></li>
					<li><a href="#">Dropdown item</a></li>
				</ul>
				</li>
				<li><a href="#">Dropdown item</a></li>
			</ul>
			</li>
			<li><a href="#">Dropdown item</a></li>
		</ul>
		</li>
		<li><a href="#">Contact</a><div class="megapanel">
			<div class="row">
				<div class="col3">
					<form class="contact">
						<label for="name">Name</label><input id="name" type="text" /><label for="email">E-mail</label><input id="email" type="text" /><label for="message">Message</label><textarea rows="8" id="message"></textarea><input type="submit" value="Send" /></form>
				</div>
				<div class="col3">
					<h4>Contact info</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
					Curabitur commodo velit at eros feugiat ullamcorper sed sit 
					amet velit. Cras in mattis nulla, quis vehicula tellus. Donec 
					non ultricies tellus. Praesent venenatis, purus et aliquet sodales.</p>
					<p>Augue velit semper turpis, id vehicula augue lacus nec lorem. 
					Proin ultricies risus vel mauris placerat ultricies. Curabitur 
					bibendum vulputate mi sed tincidunt. Aenean eu risus a ipsum 
					auctor mattis. Proin sagittis eget lorem sit amet vehicula. 
					Curabitur bibendum vulputate mi sed tincidunt.</p>
					<div class="adress">
						<label><strong>Megamenu Inc.</strong></label><label>Level 
						123, 123 Elizabeth St, Melbourne</label><label>Victoria 
						1234</label><label>Australia</label><label>Phone: (012) 
						345 6789</label><label><a href="#">megamenu@megamenu.com</a></label></div>
				</div>
			</div>
		</div>
		</li>
		<li class="right"><a href="#">Right</a></li>
	</ul>
</div>
</body>

</html>

JS代码(megamenu.js):

$.fn.megamenu=function(e){
	function r(){
	$(".megamenu").find("li,a").unbind();
	if(window.innerWidth<=768){
	o();
	s();
	if(n==0){
	$(".megamenu > li:not(.showhide)").hide(0)}
}
else{
	u();
	i()}
}
function i(){
	$(".megamenu li").bind("mouseover",function(){
	$(this).children(".dropdown,.megapanel").stop().fadeIn(t.interval)}
).bind("mouseleave",function(){
	$(this).children(".dropdown,.megapanel").stop().fadeOut(t.interval)}
)}
function s(){
	$(".megamenu > li > a").bind("click",function(e){
	if($(this).siblings(".dropdown,.megapanel").css("display")=="none"){
	$(this).siblings(".dropdown,.megapanel").slideDown(t.interval);
	$(this).siblings(".dropdown").find("ul").slideDown(t.interval);
	n=1}
else{
	$(this).siblings(".dropdown,.megapanel").slideUp(t.interval)}
}
)}
function o(){
	$(".megamenu > li.showhide").show(0);
	$(".megamenu > li.showhide").bind("click",function(){
	if($(".megamenu > li").is(":hidden")){
	$(".megamenu > li").slideDown(300)}
else{
	$(".megamenu > li:not(.showhide)").slideUp(300);
	$(".megamenu > li.showhide").show(0)}
}
)}
function u(){
	$(".megamenu > li").show(0);
	$(".megamenu > li.showhide").hide(0)}
var t={
	interval:250}
;
	var n=0;
	$(".megamenu").prepend("<li class='showhide'><span class='title'>MENU</span><span class='icon1'></span><span class='icon2'></span></li>");
	r();
	$(window).resize(function(){
	r()}
)}

CSS代码(megamenu.css):

.megamenu{margin:0;padding:0;width:100%;list-style:none;display:inline-block;position:relative;font-family:Calibri,Arial;font-size:15px;border:solid 1px #ccc}
.megamenu li{float:left;display:inline}
.megamenu>li>a{float:left;padding:20px 30px 20px 30px;color:#555;font-weight:200;text-decoration:none;text-transform:uppercase;transition:color .4s ease-in-out;-moz-transition:color .4s ease-in-out;-webkit-transition:color .4s ease-in-out;-o-transition:color .4s ease-in-out}
.megamenu>li:hover>a,.megamenu>li.active>a{background:#dbdbdb}
.megamenu>li.right{float:right}
.megamenu .dropdown,.megamenu .dropdown li .dropdown{list-style:none;margin:0;padding:0;display:none;position:absolute;z-index:999;width:160px;border:solid 1px rgba(0,0,0,0.1);background:#fff}
.megamenu .dropdown{top:59px}
.megamenu .dropdown li .dropdown{left:160px;top:inherit}
.megamenu .dropdown li{clear:both;width:100%;border-bottom:solid 1px rgba(0,0,0,0.1)}
.megamenu .dropdown li:last-child{border-bottom:0}
.megamenu .dropdown li a{float:left;width:100%;padding:10px 25px;text-decoration:none;display:block;border:0 none;font-size:14px;color:#444;background:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;transition:color .4s ease-in-out;-moz-transition:color .4s ease-in-out;-webkit-transition:color .4s ease-in-out;-o-transition:color .4s ease-in-out}
.megamenu .dropdown li:hover>a{background:#dbdbdb}
.megamenu>li>.megapanel{position:absolute;display:none;background:#fff;width:100.2%;top:58px;left:-1px;z-index:99;padding:20px 30px 20px;border:solid 1px #ccc;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.megamenu .megapanel ul{margin:0;padding:0}
.megamenu .megapanel img{width:100%;border:solid 1px #dedede;cursor:pointer;-webkit-transition:border .3s linear;-moz-transition:border .3s linear;-o-transition:border .3s linear;transition:border .3s linear}
.megamenu .megapanel img:hover{border:solid 1px #777}
.megamenu form.contact input,.megamenu form.contact textarea{font-family:Calibri,Arial;font-size:16px;color:#444;outline:0}
.megamenu form.contact input[type="text"],.megamenu form.contact textarea{width:100%;margin-bottom:20px;padding:5px 10px;border:solid 1px #dedede;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border .3s linear;-moz-transition:border .3s linear;-o-transition:border .3s linear;transition:border .3s linear}
.megamenu form.contact input[type="text"]{height:40px}
.megamenu form.contact input[type="text"]:focus,.megamenu form.contact textarea:focus{border:solid 1px #999}
.megamenu form.contact input[type="submit"]{width:100px;height:35px;border:0;color:#fff;cursor:pointer;background:#999}
.megapanel .row{width:100%;margin-top:15px}
.megapanel .row:first-child{margin-top:0}
.megapanel .row:before,.megapanel .row:after{display:table;content:"";line-height:0}
.megapanel .row:after{clear:both}
.megapanel .row .col1,.megapanel .row .col2,.megapanel .row .col3,.megapanel .row .col4,.megapanel .row .col5,.megapanel .row .col6{display:block;width:100%;min-height:20px;float:left;margin-left:2.127659574468085%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.megapanel .row [class*="col"]:first-child{margin-left:0}
.megapanel .row .col1{width:14.893617021276595%}
.megapanel .row .col2{width:31.914893617021278%}
.megapanel .row .col3{width:48.93617021276595%}
.megapanel .row .col4{width:65.95744680851064%}
.megapanel .row .col5{width:82.97872340425532%}
.megapanel .row .col6{width:100%}
.megamenu>li.showhide{display:none;width:100%;height:50px;cursor:pointer;color:#555;border-bottom:solid 1px rgba(0,0,0,0.1);background:#eee;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYmRiZGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top,#eee 0,#dbdbdb 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#eee),color-stop(100%,#dbdbdb));background:-webkit-linear-gradient(top,#eee 0,#dbdbdb 100%);background:-o-linear-gradient(top,#eee 0,#dbdbdb 100%);background:-ms-linear-gradient(top,#eee 0,#dbdbdb 100%);background:linear-gradient(to bottom,#eee 0,#dbdbdb 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#dbdbdb',GradientType=0)}
.megamenu>li.showhide span.title{margin:15px 0 0 25px;float:left}
.megamenu>li.showhide span.icon1:after{position:absolute;content:"";right:25px;top:15px;height:3px;width:25px;font-size:50px;border-top:3px solid #fff;border-bottom:3px solid #fff;z-index:1}
.megamenu>li.showhide span.icon2:after{position:absolute;content:"";right:25px;top:27px;height:3px;width:25px;font-size:50px;border-top:3px solid #fff;border-bottom:3px solid #fff;z-index:1}
.skyblue,.skyblue>li.showhide{background:#0194be;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAxOTRiZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMTg2YWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background:-moz-linear-gradient(top,#0194be 0,#0186ab 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#0194be),color-stop(100%,#0186ab));background:-webkit-linear-gradient(top,#0194be 0,#0186ab 100%);background:-o-linear-gradient(top,#0194be 0,#0186ab 100%);background:-ms-linear-gradient(top,#0194be 0,#0186ab 100%);background:linear-gradient(to bottom,#0194be 0,#0186ab 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0194be',endColorstr='#0186ab',GradientType=0)}
.skyblue li>a,.skyblue>li.showhide span{color:#fff}
.skyblue>li:hover>a,.skyblue>li.active>a,.skyblue .dropdown li:hover>a{color:#fff;background:#0180a3}
.skyblue .megapanel img:hover,.skyblue form.contact input[type="text"]:focus,.skyblue form.contact textarea:focus{border:solid 1px #0194be}
.skyblue form.contact input[type="submit"]{background:#0194be}
@media(max-width:768px){.megamenu>li{display:block;width:100%;border-bottom:solid 1px rgba(0,0,0,0.1);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.megamenu>li:hover,.megamenu>li.active{border-top:0}
.megamenu>li>a{padding:15px 25px}
.megamenu>li:hover>a,.megamenu>li.active>a{padding:15px 25px}
.megamenu a{width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.megamenu .dropdown,.megamenu .dropdown li .dropdown{width:100%;display:none;left:0;border-left:0;position:static;border:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.megamenu .dropdown li{background:#fff!important;border:0}
.megamenu .dropdown>li>a{padding-left:40px!important}
.megamenu>li>.megapanel{position:static;margin-top:50px}
.megapanel .row [class*="col"]{float:none;display:block;width:100%;margin-left:0;margin-top:15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.megapanel .row:first-child [class*="col"]:first-child{margin-top:0}
.megapanel .row{margin-top:0}
.black{background:#222}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
1.66 MB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
1.66 MB
立即下载
潘莎
了解
打赏作者 鼓励作者
Html Js 菜单导航特效2
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章