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

Metro风格jQuery导航菜单特效代码

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

以下是 Metro风格jQuery导航菜单特效代码 的示例演示效果:

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

部分效果截图:

Metro风格jQuery导航菜单特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>Metro风格jQuery导航菜单</title>
<link rel = "stylesheet" type = "text/css" href = "css/element_style.css" />
<script type = "text/javascript" src = "js/jquery.min.js"></script>
<script type = "text/javascript" src = "js/element_script.js"></script>
</head>
<body>

<div class = "navigation"> <!-- Begin div.navigation -->
	<!-- Begin Navigation -->
	<div>
		<span>Home</span> <!-- Title -->
	</div>
	
	<ul> <!-- Begin Navigation Content -->
		<li class = "color1"><a href = "index.html">Home</a></li>
		
		<li><a>Settings</a>
			<ul> <!-- Navigation Sub-Content for Settings-->
				<li><a href = "#">Settings 1</a></li>
				<li><a href = "#">Settings 2</a></li>
				<li><a href = "#">Settings 3</a></li>
				<li><a href = "#">Settings 4</a></li>
				<li><a href = "#">Settings 5</a></li>
				<li><a href = "#">Settings 6</a></li>
				<li><a href = "#">Settings 7</a></li>
			</ul> <!-- /End Navigation Sub-Content for Settings -->
		</li>
		
		<li class = "color2"><a>Gallery</a>
			<ul> <!-- Navigation Sub-Content for Gallery -->
				<li><a href = "#">Apps</a></li>
				<li><a href = "#">Photo</a></li>
				<li><a href = "#">Music</a></li>
				<li><a href = "#">Graphics</a></li>
				<li><a href = "#">Sports</a></li>
			</ul> <!-- /End Navigation Sub-Content for Gallery -->
		</li>
		<li class = "color3"><a href = "#">Contact</a></li>
		<li class = "color4"><a href = "#">About</a></li>
	</ul> <!-- /End Navigation Content -->
</div> <!-- /End div.navigation-->
</body>
</html>

JS代码(element_script.js):

var X;
	var Y;
	var li_size;
	var int_val;
	var permition = true;
	var height_size;
	var li_child;
	var main_nav;
	var coloring;
	var back = true;
	var null_;
	var part = 0;
	$(document).ready(function(){
	main_nav = $('div.navigation>ul').html();
	//Main Navigation HTML$('div.navigation>div').html($('div.navigation>div').html() + '<div id = "back"></div>');
	// Back button/** (div.navigation>ul>li).click() **/
$("div.navigation>ul>li").live('click',function(){
	if(permition == true && $(this).children('ul').html().length){
	int_val = 300;
	Y = $(this).children("a").html();
	li_size = $("div.navigation>ul>li").size();
	for(i = 1;
	i <= li_size;
	i++){
	X = $("div.navigation>ul>li:nth-child(" + String(i) +")").children("a").html();
	if(X != Y)$("div.navigation>ul>li:nth-child(" + String(i) +")").addClass('animated flipIn_left');
	setTimeout(function(){
	$("div.navigation>ul>li:nth-child(" + String(i) +")").removeClass('animated flipIn_left');
}
,int_val);
	int_val = 300 * i;
}
// /End for$('div.navigation>ul').animate({
	opacity:'0.1',marginLeft:'40px'}
,600);
	$("div.navigation>div>span").animate({
	opacity:'0.1',top:'-10px'}
,600,function(){
	$("div.navigation>div>span").html(Y);
	$("div.navigation>div>span").animate({
	opacity:'1',top:'0px'}
,600);
}
);
	permition = false;
	back = true;
	li_child = $(this).children('ul').html();
	coloring = $(this).css("background-color");
	// color variable usesetTimeout(function(){
	$('div.navigation>ul').html(li_child);
	$('div#back').show(300);
	$('div.navigation>ul>li').css('background-color',coloring);
	// Coloring li$('div.navigation>ul').animate({
	opacity:'1',marginLeft:'0px'}
,600);
	$('div.navigation>ul>li').addClass('animated flipIn_right_back');
	setTimeout(function(){
	$('div.navigation>ul>li').removeClass('animated flipIn_right_back');
}
,600);
}
,600);
}
}
);
	/** /End (div.navigation>ul>li).click() **/
/** li mouse Leave **/
$("div.navigation>ul>li").live('mouseleave',function(){
	$(this).removeClass('animated flipIn_right');
	$(this).removeClass('animated flipIn_left');
	$(this).removeClass('animated flipIn_top');
	$(this).removeClass('animated flipIn_bottom');
	$(this).removeClass('do');
	part = 0;
}
);
	/** /End li mouse Leave **/
/** Mouse move **/
$("div.navigation>ul>li").live( 'mousemove',function(e){
	// For Chome and Safariif($.browser.webkit){
	if(part != 5){
	$(this).addClass('do');
	part = 5;
}
}
// for IE,Mozilla,Operaelse{
	if(((e.clientY - $(this).offset().top) / (e.clientX - $(this).offset().left)) < 1){
	// for Right Triangleif(( (e.clientY - $(this).offset().top) / ($(this).width() - (e.clientX - $(this).offset().left)) ) > 1 ){
	if(part != 1){
	// For Right Turn$(this).removeClass('animated flipIn_bottom');
	$(this).removeClass('animated flipIn_top');
	$(this).removeClass('animated flipIn_right');
	$(this).addClass('animated flipIn_right');
	part = 1;
}
}
else{
	if(part != 2){
	// For Top Turn$(this).removeClass('animated flipIn_bottom');
	$(this).removeClass('animated flipIn_right');
	$(this).removeClass('animated flipIn_left');
	$(this).addClass('animated flipIn_top');
	part = 2;
}
}
}
else if(((e.clientY - $(this).offset().top) / (e.clientX - $(this).offset().left)) > 1){
	// for Left Triangleif(( (e.clientX - $(this).offset().left) / ($(this).height() - (e.clientY - $(this).offset().top))) > 1 ){
	if(part != 3){
	// For bottom Turn$(this).removeClass('animated flipIn_top');
	$(this).removeClass('animated flipIn_left');
	$(this).removeClass('animated flipIn_right');
	$(this).addClass('animated flipIn_bottom');
	part = 3;
}
}
else{
	if(part != 4){
	// For Left Turn$(this).removeClass('animated flipIn_top');
	$(this).removeClass('animated flipIn_right');
	$(this).removeClass('animated flipIn_bottom');
	$(this).addClass('animated flipIn_left');
	part = 4;
}
}
}
else{
	// Other wise$(this).removeClass('animated flipIn_right');
	$(this).removeClass('animated flipIn_left');
	$(this).removeClass('animated flipIn_top');
	$(this).removeClass('animated flipIn_bottom');
	part = 0;
}
}
}
);
	/** /Mouse Move End **/
/** Back Mouse enter **/
$("div#back").mouseenter(function(){
	$('div#back').css('background-position','50px -50px');
}
);
	/** Back Mouse Leave **/
$("div#back").mouseleave(function(){
	$('div#back').css('background-position','0px 0px');
}
);
	/** Back Mouse Down **/
$("div#back").mousedown(function(){
	$('div#back').css('background-position','50px -100px');
}
);
	/** Back Mouse Up **/
$("div#back").mouseup(function(){
	$('div#back').css('background-position','50px -50px');
}
);
	/** div#back click **/
$("div#back").live('click',function(){
	if(back == true){
	$('div.navigation>ul>li').addClass('animated flipIn_left');
	$('div.navigation>ul').animate({
	opacity:'0.1',marginLeft:'40px'}
,400);
	setTimeout(function(){
	$('div.navigation>ul').removeClass('animated flipIn_left');
	$('div.navigation>ul').html(main_nav);
	$('div.navigation>ul>li').addClass('animated flipIn_right_back');
	$('div.navigation>ul').animate({
	opacity:'1',marginLeft:'0px'}
,600);
	$("div#back").hide(300);
	setTimeout(function(){
	$('div.navigation>ul>li').removeClass('animated flipIn_right_back');
}
,400);
}
,400);
	permition = true;
	$("div.navigation>div>span").animate({
	opacity:'0.1',top:'-10px'}
,600,function(){
	$("div.navigation>div>span").html('Home');
	$("div.navigation>div>span").animate({
	opacity:'1',top:'0px'}
,600);
}
);
	back = false;
}
}
);
	/** /End div#back click **/
}
);

CSS代码(element_style.css):

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);body{margin:0px;padding:0;}
/* ====== Navigation Main ====== */
div.navigation{font-family:Open Sans;background-color:#180052;padding-top:5px;padding-bottom:30px;}
/* ====== Navigation Menu ====== */
div.navigation>ul{margin:0px;margin-top:15px;}
div.navigation>ul>li{list-style:none;display:inline-block;height:90px;width:90px;background-color:#DB542D;text-align:center;line-height:90px;margin-top:2px;margin-bottom:2px;}
div.navigation ul li a{cursor:pointer;}
div.navigation>ul>li>a{position:relative;display:block;color:white;font-size:14px;text-decoration:none;}
/* ====== Back Button ====== */
div#back{position:relative;float:right;display:none;height:50px;width:50px;background-image:url('back.png');margin-right:40px;top:-15px;}
/* ====== Sub menu====== */
div.navigation>ul>li>ul{position:absolute;padding:0;margin-top:3px;display:none;}
div.navigation>ul>li>ul>li{position:relative;float:left;display:block;background-color:#604C9F;height:50px;line-height:50px;list-style:none;margin-right:3px;}
div.navigation>ul>li>ul>li>a{position:relative;display:block;font-size:14px;height:100%;width:100%;color:white;text-decoration:none;}
/* ====== Color class ======*/
div.navigation .color1{background-color:#0097aa;}
div.navigation .color2{background-color:#9f00a7;}
div.navigation .color3{background-color:#0a55be;}
div.navigation .color4{background-color:#bb1d48;}
/* ====== title span ====== */
div.navigation span{position:relative;font-family:'Open Sans';font-weight:300;font-size:16px;margin-left:40px;font-size:28px;color:white;}
/* ======== Fliping ======== */
.animated{-webkit-animation-duration:0.4s;-moz-animation-duration:0.4s;-o-animation-duration:0.4s;animation-duration:0.4s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}
.flipIn_right{-webkit-animation-name:flipIn_right;-moz-animation-name:flipIn_right;-o-animation-name:flipIn_right;animation-name:flipIn_right;}
.flipIn_left{-webkit-animation-name:flipIn_left;-moz-animation-name:flipIn_left;-o-animation-name:flipIn_left;animation-name:flipIn_left;}
.flipIn_top{-webkit-animation-name:flipIn_top;-moz-animation-name:flipIn_top;-o-animation-name:flipIn_top;animation-name:flipIn_top;}
.flipIn_bottom{-webkit-animation-name:flipIn_bottom;-moz-animation-name:flipIn_bottom;-o-animation-name:flipIn_bottom;animation-name:flipIn_bottom;}
.flipIn_right_back{-webkit-animation-name:flipIn_right_back;-moz-animation-name:flipIn_right_back;-o-animation-name:flipIn_right_back;animation-name:flipIn_right_back;}
@-webkit-keyframes flipIn_left{0%{-webkit-transform:perspective(400px) rotateY(0deg);}
100%{-webkit-transform:perspective(400px) rotateY(-25deg);}
}
@-moz-keyframes flipIn_left{0%{-moz-transform:perspective(400px) rotateY(0deg);}
100%{-moz-transform:perspective(400px) rotateY(-25deg);}
}
@-o-keyframes flipIn_left{0%{-o-transform:perspective(400px) rotateY(0deg);}
100%{-o-transform:perspective(400px) rotateY(-25deg);}
}
@keyframes flipIn_left{0%{transform:perspective(400px) rotateY(0deg);}
100%{transform:perspective(400px) rotateY(-25deg);}
}
/* /flip right*/
@-webkit-keyframes flipIn_right{0%{-webkit-transform:perspective(400px) rotateY(0deg);}
100%{-webkit-transform:perspective(400px) rotateY(25deg);}
}
@-moz-keyframes flipIn_right{0%{-moz-transform:perspective(400px) rotateY(0deg);}
100%{-moz-transform:perspective(400px) rotateY(25deg);}
}
@-o-keyframes flipIn_right{0%{-o-transform:perspective(400px) rotateY(0deg);}
100%{-o-transform:perspective(400px) rotateY(25deg);}
}
@keyframes flipIn_right{0%{transform:perspective(400px) rotateY(0deg);}
100%{transform:perspective(400px) rotateY(25deg);}
}
/* /flip left*/
@-webkit-keyframes flipIn_top{0%{-webkit-transform:perspective(400px) rotateX(0deg);}
100%{-webkit-transform:perspective(400px) rotateX(20deg);}
}
@-moz-keyframes flipIn_top{0%{-moz-transform:perspective(400px) rotateX(0deg);}
100%{-moz-transform:perspective(400px) rotateX(20deg);}
}
@-o-keyframes flipIn_top{0%{-o-transform:perspective(400px) rotateX(0deg);}
100%{-o-transform:perspective(400px) rotateX(20deg);}
}
@keyframes flipIn_top{0%{transform:perspective(400px) rotateX(0deg);}
100%{transform:perspective(400px) rotateX(20deg);}
}
/* /flip top*/
@-webkit-keyframes flipIn_bottom{0%{-webkit-transform:perspective(400px) rotateX(0deg);}
100%{-webkit-transform:perspective(400px) rotateX(-20deg);}
}
@-moz-keyframes flipIn_bottom{0%{-moz-transform:perspective(400px) rotateX(0deg);}
100%{-moz-transform:perspective(400px) rotateX(-20deg);}
}
@-o-keyframes flipIn_bottom{0%{-o-transform:perspective(400px) rotateX(0deg);}
100%{-o-transform:perspective(400px) rotateX(-20deg);}
}
@keyframes flipIn_bottom{0%{transform:perspective(400px) rotateX(0deg);}
100%{transform:perspective(400px) rotateX(-20deg);}
}
/* /flip bottom*/
@-webkit-keyframes flipIn_right_back{0%{-webkit-transform:perspective(400px) rotateY(-40deg);}
100%{-webkit-transform:perspective(400px) rotateY(0deg);}
}
@-moz-keyframes flipIn_right_back{0%{-moz-transform:perspective(400px) rotateY(-40deg);}
100%{-moz-transform:perspective(400px) rotateY(0deg);}
}
@-o-keyframes flipIn_right_back{0%{-o-transform:perspective(400px) rotateY(-40deg);}
100%{-o-transform:perspective(400px) rotateY(0deg);}
}
@keyframes flipIn_right_back{0%{transform:perspective(400px) rotateY(-40deg);}
100%{transform:perspective(400px) rotateY(0deg);}
}
/* /flip left back*/
.do{transform:scale(0.98,0.98);-webkit-transform:scale(0.98,0.98);/* Safari and Chrome */
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
37.58 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
37.58 KB
立即下载
于琼蓉
了解
打赏作者 鼓励作者
Html Js 菜单导航特效4
最新结算
股权转让协议意向书模板
类型: .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
打赏文章