多色css3导航菜单jquery特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是多色css3导航菜单jquery特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>多色css3导航菜单jquery特效</title>
    <link media="screen" rel="stylesheet" type="text/css" href="assets/css/style.css">
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/init.js"></script>
    <script type="text/javascript" src="assets/js/easing.js"></script>
</head>
<body>
    <div id="wrapper">
        <div id="menu">
            <ul>
                <li><a href="">Web Design </a></li>
                <li><a href="">jQuery</a></li>
                <li><a href="">Html5 & Css3</a></li>
                <li><a href="">PHP</a></li>
                <li><a href="">Photoshop</a></li>
                <li> <a href="">Illustrator</a></li>
                <li>  <a href="">Wordpress</a></li>
                <li> <a href="">Tutorials</a></li>
                <li><a href="">Tutorialpot</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

JS代码(init.js):

jQuery(document).ready(function($){
	/*define easing you can omit this ifyou don't want to use the easing plugin*/
jQuery.easing.def = "easeInOutBack";
	/* create the span tht will be animated across the menu*/
/* declare our many variables for easy ref*/
var $span = $('<span class="colourful"></span>');
	$span.insertBefore($("#menu ul"));
	var $menu_link = $('#menu li a'),$hovered = $('#menu a.hovered'),/**/
$hovered_pos = $hovered.position('#menu');
	/*position of hovered menu item*/
/* declare our many colors that can confuse a chameleon*/
var $colour_arr = ['#fbb92e','#f8d52f','#b4f62f','#54f7a8','#3ff7f3','#3a97fa','#6835f9','#d544f6','#f650ab'];
	/*iterate through all menu links and apply colors to border top */
$menu_link.each(function(index){
	$menu_link.eq(index).css('border-color',$colour_arr[index]);
}
);
	/* all the magic happens here*/
function init (){
	if($hovered_pos){
	$span.css('left',$hovered_pos);
	var index = 0;
	/* search for the selected menu item*/
for(i=0;
	i<$menu_link.length;
	i++){
	if($($menu_link[i]).hasClass('hovered')){
	index = i;
}
}
$span.css('background',$colour_arr[index]);
}
/*mouseenter funtion*/
$menu_link.each(function( intIndex ){
	$(this).on ("mouseenter",function(event){
	var x = $(this).position('#menu');
	x = x.left;
	$span.css('background',$colour_arr[intIndex]);
	$span.stop();
	$span.animate({
	left:x}
,600);
}
);
}
);
	/* mouseout function*/
$menu_link.each(function( intIndex ){
	$(this).on ("mouseleave",function(event){
	$span.stop();
	var x = -100;
	if($hovered_pos){
	x = $hovered_pos;
	var index = 0;
	for(i=0;
	i<$menu_link.length;
	i++){
	if($($menu_link[i]).hasClass('hovered')){
	index = i;
}
}
$span.css('background',colour_arr[index]);
}
$span.animate({
	left:x}
,600);
}
);
}
);
}
/* call init our function*/
init();
}
);

CSS代码(style.css):

/* eric meyer css reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:21px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
/* remember to define focus styles! */
:focus{outline:0;}
/* remember to highlight inserts somehow! */
ins{text-decoration:none;}
del{text-decoration:line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse;border-spacing:0;}
/* end eric meyer css reset */
/* =Layout--------------------------------------------------------------------------------------------------------*/
html,body{background:#f9f9f9;font-family:Georgia,Arial,sans-serif;color:#FFF;font-size:12px;line-height:21px;}
a:link,a:visited,a:active{color:#FFF;text-decoration:none;}
a:hover{text-decoration:underline;}
/* =Menu--------------------------------------------------------------------------------------------------------*/
#menu{float:left;position:relative;top:0;left:0;overflow:hidden;}
#menu .colourful{display:block;position:absolute;background:#f0ad22;height:38px;width:85px;top:4px;left:-100px;}
#menu ul{margin:0;padding:0;list-style:none;float:left;position:relative;top:0;left:0;z-index:1;}
#menu li{float:left;margin:0 1px 0 0;}
#menu a:link,#menu a:visited,#menu a:hover,#menu a:active{color:#000;text-align:center;display:block;border:solid;border-width:4px 0 0;line-height:40px;width:85px;}
#menu li a:hover{text-decoration:none;color:#fff;text-shadow:0 0 1px #999;}

附件:下载该文件资源,减少时间成本(增值服务)