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

jDropDown下拉菜单特效代码

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

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

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

部分效果截图:

jDropDown下拉菜单特效代码

HTML代码(index.html):

<!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" />
<title>jDropDown下拉菜单</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
<!-- menu -->
<link rel="stylesheet" href="css/menu.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/dropdown.class.demo.js"></script>
<script type="text/javascript" language="javascript" src="js/layout.class.js"></script>
</head>

<body>
<div id="page-wrap">
	<!-- layout -->
	<div class="layout">
		<!-- logo -->
		<img src="img/logoandrei.png" alt="jQuery jDropDowns" class="logo" />
		<!-- jDropDown menu -->
		<ul id="jDropDown" class="blue">
			<li class="home"><a href="#">
			<img src="img/homeIcon.png" alt="home"></a></li>
			<li><a href="#">Home page</a>
			<div class="column_2" style="margin-left: 4px;">
				<div class="column">
					<img src="img/about.jpg" alt="about us" style="margin: 20px 0px 0px 10px;" />
					<ul>
						<li><a href="#">About us</a></li>
						<li><a href="#">Documentation</a></li>
						<li><a href="#">Copyright issues</a></li>
					</ul>
				</div>
				<ul class="column">
					<li><a href="#">Lorem ipsum text</a></li>
					<li><a href="#">Dorem sid amed ipsum est</a></li>
					<li><a href="#">Lorem ipsum</a></li>
					<li><a href="#">Succidere est vita lorem</a></li>
					<li><a href="#">Texting lorem ipsum</a></li>
					<li><a href="#">Sid amet dorem upset</a></li>
					<li><a href="#">Lorem ipsum text</a></li>
				</ul>
			</div>
			</li>
			<li><a href="#">Dropdown menu with image </a>
			<div class="column_3" style="margin-left: 4px;">
				<div class="column">
					<img src="img/top-img.jpg" alt="about us" style="margin: 0px auto;" />
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
						<li><a href="#">Sid amet dorem upset</a></li>
					</ul>
				</div>
				<div class="column">
					<img src="img/top-img.jpg" alt="about us" style="margin: 0px auto;" />
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
						<li><a href="#">Sid amet dorem upset</a></li>
					</ul>
				</div>
				<div class="column">
					<img src="img/top-img.jpg" alt="about us" style="margin: 0px auto;" />
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
						<li><a href="#">Sid amet dorem upset</a></li>
					</ul>
				</div>
			</div>
			</li>
			<li><a href="#">Dropdown with text</a>
			<div class="column_3" style="margin-left: -170px;">
				<div class="column grey">
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
						<li><a href="#">Sid amet dorem upset</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
					</ul>
				</div>
				<div class="column">
					<img src="img/top-img.jpg" alt="about us" style="margin: 0px auto;" />
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
					</ul>
				</div>
				<div class="column">
					<img src="img/telphone.png" width="150" alt="about us" style="margin: 0px auto;" />
				</div>
			</div>
			</li>
			<li><a href="#">About with right align</a>
			<div class="column_3" style="margin-left: -327px;">
				<div class="column">
					<img src="img/top-img.jpg" alt="about us" style="margin: 0px auto;" />
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
						<li><a href="#">Sid amet dorem upset</a></li>
					</ul>
				</div>
				<div class="column">
					<img src="img/top-img.jpg" alt="about us" style="margin: 0px auto;" />
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
						<li><a href="#">Sid amet dorem upset</a></li>
					</ul>
				</div>
				<div class="column">
					<img src="img/top-img.jpg" alt="about us" style="margin: 0px auto;" />
					<span class="sectionTitle">Lorem ipsum text</span>
					<ul>
						<li><a href="#">Lorem ipsum text</a></li>
						<li><a href="#">Dorem sid amed ipsum est</a></li>
						<li><a href="#">Lorem ipsum</a></li>
						<li><a href="#">Succidere est vita lorem</a></li>
						<li><a href="#">Texting lorem ipsum</a></li>
						<li><a href="#">Sid amet dorem upset</a></li>
					</ul>
				</div>
			</div>
			</li>
			<li><a href="#">Simple contact</a>
			<div class="column_2" style="margin-left: -202px;">
				<div class="column">
					<span class="sectionTitle">We on map</span>
					<img alt="Google Static Map Embed" src="http://maps.google.com/maps/api/staticmap?size=150x120&maptype=roadmap&markers=size:mid|color:red|San+Francisco,CA|Oakland,CA|San+Jose,CA&sensor=false" style="margin-top: 10px;">
				</div>
				<div class="column">
					<img src="img/contact.jpg" alt="contact us" style="float: right;" />
					<div class="contact">
						<p>Name : Lorem Ipsum</p>
						<p>Adress: Rue 25 , Russia</p>
						<p>Phone : 012 254 144</p>
						<p>E-mail : name@company.com</p>
					</div>
				</div>
			</div>
			</li>
		</ul>
	</div>
</div>
</body>
</html>

JS代码(dropdown.class.demo.js):

/** * Gallery * -------- * * author:Andrei Dinca & Alexandra Ipate _ _ _____ _ /\ | | (_) | __ \(_) / \ _ __ __| |_ __ ___ _ | | | |_ _ __ ___ __ _ / /\ \ | '_ \ / _` | '__/ _ \ | | | | | | '_ \ / __/ _` | / ____ \| | | | (_| | | | __/ | | |__| | | | | | (_| (_| |/_/ \_\_| |_|\__,_|_| \___|_| |_____/|_|_| |_|\___\__,_| * email:andrei.webdeveloper@gmail.com * * version 1.0 release date:2.12.2010 ***/
(function(c){
	c.fn.extend({
	jDropDown:function(d){
	d=c.extend({
	demo:true,effect:"",notMenu:".home",duration:{
	fadeIn:300,fadeOut:60,slideIn:300,slideOut:60}
}
,d);
	return this.each(function(){
	function f(a,g){
	if(g=="open"){
	if(b.effect=="fade")a.find("div:first").css("opacity",0).css("visibility","visible").animate({
	opacity:1,MarginTop:3}
,b.duration.fadeIn);
	else if(b.effect=="slide"){
	var e=a.find("div:first").height();
	a.find("div:first").css("height",0).css("visibility","visible").stop(false,true).animate({
	height:e}
,b.duration.slideIn)}
else a.find("div:first").css("visibility","visible");
	return true}
if(g=="close"){
	if(b.effect=="fade")a.find("div:first").animate({
	opacity:0}
,b.duration.fadeOut,function(){
	c(this).css("visibility","hidden")}
);
	else if(b.effect=="slide"){
	e=a.find("div:first").height();
	a.find("div:first").css("overflow","hidden").stop(false,true).animate({
	height:0}
,b.duration.slideOut,function(){
	c(this).css("visibility","hidden").css("height",e)}
)}
else a.find("div:first").css("visibility","hidden");
	return true}
alert("Uncatch exception. Invalid effect mode!");
	return false}
var b=d,h=c(this);
	h.find("> li").not(b.notMenu).hover(function(){
	var a=c(this);
	h.find(".on").removeClass("on");
	a.find("a").addClass("on");
	if(b.demo)b.effect=c("#effect").val();
	f(a,"open")}
,function(){
	var a=c(this);
	a.find("a").removeClass("on");
	f(a,"close")}
)}
)}
}
)}
)(jQuery);
	$(document).ready(function(){
	$("ul#jDropDown").jDropDown({
	effect:'slide'}
);
}
);

CSS代码(menu.css):

/** * Default color scheme * --------------------**/
/* Blue */
.blue{background-color:#0079B8;background:-webkit-gradient(linear,0% 0%,0% 100%,from(#0079B8),to(#0079B8),color-stop(.5,#2399D6));background:-moz-linear-gradient(top,#0079B8 0%,#2399D6 50%,#0079B8 100%);border:1px solid #0079B8;}
ul.blue > li{border-right:1px solid #0178b5;}
/* Black */
.black{background-color:#000000;background:-webkit-gradient(linear,0% 0%,0% 100%,from(#000000),to(#000000),color-stop(.5,#3f3c3c));background:-moz-linear-gradient(top,#000000 0%,#3f3c3c 50%,#000000 100%);border:1px solid #000000;}
ul.black > li{border-right:1px solid #000000;}
/* Red */
.red{background-color:#ce0000;background:-webkit-gradient(linear,0% 0%,0% 100%,from(#ce0000),to(#ce0000),color-stop(.5,#ea3b3b));background:-moz-linear-gradient(top,#ce0000 0%,#ea3b3b 50%,#ce0000 100%);border:1px solid #ce0000;}
ul.red > li{border-right:1px solid #ce0000;}
/* Green */
.green{background-color:#5d9300;background:-webkit-gradient(linear,0% 0%,0% 100%,from(#5d9300),to(#5d9300),color-stop(.5,#75ba00));background:-moz-linear-gradient(top,#5d9300 0%,#75ba00 50%,#5d9300 100%);border:1px solid #5d9300;}
ul.green > li{border-right:1px solid #5d9300;}
/* Light blue */
.lightBlue{background-color:#008c84;background:-webkit-gradient(linear,0% 0%,0% 100%,from(#008c84),to(#008c84),color-stop(.5,#00c09e));background:-moz-linear-gradient(top,#008c84 0%,#00c09e 50%,#008c84 100%);border:1px solid #008c84;}
ul.lightBlue > li{border-right:1px solid #008c84;}
ul#jDropDown a{font-family:Arial,Helvetica,sans-serif;line-height:18px;}
ul#jDropDown ul li a:hover{color:#0079B8;}
/* first li have home class*/
ul#jDropDown > li > a{font:bold 15px Arial;color:#fff;}
/* just that pattern */
ul#jDropDown > li > a{background-image:url(../images/downArrow.png);background-repeat:no-repeat;background-position:2px 11px;height:40px;position:relative;top:15px;margin:0px 5px 0px 5px;padding:4px 15px 4px 15px;}
/* first li have home class*/
ul#jDropDown li.home img{border:0px;}
ul#jDropDown > li > .on,ul#jDropDown > li > a:hover{color:#484848;top:4px;background-color:#fff;padding-top:15px;height:31px;/* css3 */
-moz-border-radius:2px 2px 0 0px;border-radius:2px 2px 0 0px;}
ul#jDropDown > li.home a:hover,ul#jDropDown > li.home a{background:none;top:10px;padding-top:0px;}
/*LEVEL ONE*/
ul#jDropDown{position:relative;left:-10px;height:53px;width:960px;/* css3 */
-moz-border-radius:4px;border-radius:4px;-moz-box-shadow:2px 2px 2px #919191;-webkit-box-shadow:2px 2px 2px #919191;box-shadow:2px 2px 2px #5d5d5d;}
ul#jDropDown li{float:left;font-weight:bold;zoom:1;position:relative;}
ul#jDropDown li a{display:block;}
ul#jDropDown > li:last-child{border-right:none;}
/*LEVEL TWO*/
ul#jDropDown ul{}
ul#jDropDown li .content{left:0;position:absolute;top:100%;visibility:hidden;width:300px;margin-top:5px;border:1px solid #e5e5e5;background-color:#fff;padding:10px 0px 10px 10px;}
ul#jDropDown ul li{border-bottom:1px solid #ccc;float:none;font-size:11px;font-weight:normal;padding:4px 0 4px 0;}
ul#jDropDown ul li:last-child{border-color:#fff;}
ul#jDropDown ul li a{border-right:none;display:inline-block;width:100%;color:#484848;}
/* Column */
.column_1,.column_2,.column_3,.column_4,.column_5{left:0;position:absolute;top:100%;visibility:hidden;margin-top:4px;border:1px solid #e5e5e5;background-color:#fff;border-top:0px;/* CSS3 */
-moz-box-shadow:2px 2px 2px #919191;-webkit-box-shadow:2px 2px 2px #919191;box-shadow:2px 2px 2px #919191;}
.column_1{width:170px;}
.column_2{width:340px;}
.column_3{width:510px;}
.column_4{width:680px;}
.column_5{width:850px;}
ul#jDropDown .column{float:left;width:150px;margin:10px;}
ul#jDropDown .column .sectionTitle{font-weight:bold;display:block;padding:8px 0px 5px 1px;border-bottom:1px solid #ccc;}
ul#jDropDown .column .contact{text-align:right;font:normal 11px Arial;float:right;color:#676767;}
ul#jDropDown .column .contact p{margin:10px 0px 0px 0px;}

CSS代码(style.css):

*{margin:0;padding:0;}
body{font:14px Helvetica,Sans-Serif;background:url('bck.jpg');}
#page-wrap{margin:25px auto;width:960px;}
a{text-decoration:none;}
ul{list-style:none;}
p{margin:15px 0;}
.logo{margin:20px 0px 30px 0px;position:relative;left:50%;margin-left:-179px;}
.layout{border:1px solid #FFFFFF;float:left;width:940px;margin:25px 10px 0px 10px;background:none repeat scroll 0 0 #F4F4F4;padding-bottom:20px;position:relative;/* css3 */
-moz-border-radius:5px;border-radius:5px;-moz-box-shadow:0 0 5px #484848;}
.slideBtn{position:absolute;width:29px;height:42px;top:20px;right:-29px;display:block;background:url(menu_backBtn.png) no-repeat;}
.open{background-position:top left;}
.close{background-position:bottom left;}
.copyright{margin:15px auto;padding:10px;width:920px;border:1px solid #FFFFFF;text-align:right;background:none repeat scroll 0 0 #F4F4F4;/* css3 */
-moz-border-radius:5px;border-radius:5px;-moz-box-shadow:0 0 5px #484848;}
.download{position:absolute;top:-11px;right:-11px;display:block;opacity:0.8;}
.download:hover{opacity:1;}
.download img{border:0px;}
.colorSwich{-moz-border-radius:5px;border-radius:5px;-moz-box-shadow:0 0 5px #484848;background:none repeat scroll 0 0 #F4F4F4;border:1px solid #FFFFFF;margin:0 0 20px;padding:15px 15px 28px;width:250px;position:absolute;top:50px;left:10px;}
.colorSwich h2{border-bottom:1px solid #282828;font-family:"Helvetica Neue",Arial,"Lucida Grande",sans-serif;font-size:18px;margin-bottom:15px;text-transform:uppercase;line-height:34px;color:#282828;}
.colorSwich .content{float:left;width:250px;}
.effecType{margin:10px 0px 10px 0px;}
.colorSwich .content .style{background:none repeat scroll 0 0 #FBFBFB;padding:5px;border:medium none;-moz-box-shadow:0 0 3px #666666;display:block;float:left;cursor:pointer;margin:0px 5px 0px 0px;}
.colorSwich .content .style:hover{-moz-box-shadow:0 0 5px #484848;position:relative;bottom:2px;}
.colorSwich .content .on{-moz-box-shadow:0 0 5px #484848;position:relative;bottom:2px;}
.colorSwich .content .style span{width:34px;height:34px;display:block;}
.colorSwich .content .cp form{float:left;}
.colorSwich .content .cp label{border:0px solid red;width:90px;display:block;float:left;padding:5px 0px 9px 0px;}
.colorSwich .content .cp input{display:block;width:12px;height:12px;background:none repeat scroll 0 0 #FBFBFB;padding:5px;border:medium none;-moz-box-shadow:0 0 3px #666666;float:left;margin:0px 0px 0px 10px;text-indent:-200px;}
.colorSwich .content .cp .btn{width:160px;margin:10px 0px 0px 0px;float:left;;}
.colorSwich .content .cp .btn input{text-indent:0px;width:70px;height:30px;float:left;color:#fff;text-align:center;margin:0px 10px 0px 0px;background-color:#0079B8;background:-webkit-gradient(linear,0% 0%,0% 100%,from(#0079B8),to(#0079B8),color-stop(.5,#2399D6));background:-moz-linear-gradient(top,#0079B8 0%,#2399D6 50%,#0079B8 100%);border:1px solid #0079B8;}
.colorSwich .content .cp input:hover{-moz-box-shadow:0 0 5px #484848;position:relative;bottom:2px;cursor:pointer;}
#getCodeConsole h2{border-bottom:1px solid #282828;font-family:"Helvetica Neue",Arial,"Lucida Grande",sans-serif;font-size:18px;margin-bottom:15px;text-transform:uppercase;line-height:34px;color:#282828;}
#getCodeConsole{-moz-border-radius:5px;border-radius:5px;-moz-box-shadow:0 0 5px #484848;background:none repeat scroll 0 0 #F4F4F4;border:1px solid #FFFFFF;margin:0 0 20px;padding:15px 15px 28px;}
#getCodeConsole .close{display:block;position:absolute;top:12px;right:12px;cursor:pointer;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
120.45 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
120.45 KB
立即下载
樊莎
了解
打赏作者 鼓励作者
Html Js 菜单导航特效6
最新结算
股权转让协议意向书模板
类型: .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
打赏文章