米柚网jQuery下拉菜单栏特效代码

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

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

以下是米柚网jQuery下拉菜单栏特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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=gb2312" />
    <meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
    <meta name="description" content="此代码内容为米柚网jQuery下拉菜单栏，属于站长常用代码" />
    <title>米柚网jQuery下拉菜单栏</title>
    <link rel="stylesheet" href="css/menu.css" type="text/css" />
    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="js/jquery.backgroundpos.js" type="text/javascript"></script>
    <script src="js/menu.js" type="text/javascript"></script>
</head>
<body>
    <!-- 代码 开始 -->
    <div class="header">
        <ul class="menu">
            <li class="current first"><a href="#" target="_self">首页</a></li>
            <li><a href="#" target="_self">功能</a></li>
            <li><a href="#" target="_self">下载</a></li>
            <li class="li_3"><a class="noclick" href="#" target="_blank">更多产品</a>
                <dl class="li_3_content">
                    <dt></dt>
                    <dd><a href="#" target="_blank"><span>应用商店</span></a></dd>
                    <dd><a href="#" target="_blank"><span>主题商店</span></a></dd>
                    <dd><a href="#" target="_blank"><span>小米桌面</span></a></dd>
                    <dd class="lastItem"><a href="#" target="_blank"><span>桌面</span></a></dd>
                </dl>
            </li>
            <li class=""><a class="noborder " href="#" target="_self">论坛</a></li>
        </ul>
        <a href="#">
            <img title="MIUI" class="miui_logo" src="images/miui-logo.png" alt="网站logo" /></a>
        <p class="language">中文<span>|</span><a href="#" target="_blank">English</a></p>
    </div>
</body>
</html>

JS代码(jquery.backgroundpos.js):

(function ($){
	var BG_POS = 'bgPos';
	var usesTween = !!$.Tween;
	if (usesTween){
	$.Tween.propHooks['backgroundPosition'] ={
	get:function (tween){
	return parseBackgroundPosition($(tween.elem).css(tween.prop));
}
,set:function (tween){
	setBackgroundPosition(tween);
}
}
;
}
else{
	$.fx.step['backgroundPosition'] = setBackgroundPosition;
}
;
	function parseBackgroundPosition(value){
	var bgPos = (value || '').split(/ /);
	var presets ={
	center:'50%',left:'0%',right:'100%',top:'0%',bottom:'100%'}
;
	var decodePos = function (index){
	var pos = (presets[bgPos[index]] || bgPos[index] || '50%'). match(/^([+-]=)?([+-]?\d+(\.\d*)?)(.*)$/);
	bgPos[index] = [pos[1],parseFloat(pos[2]),pos[4] || 'px'];
}
;
	if (bgPos.length == 1 && $.inArray(bgPos[0],['top','bottom']) > -1){
	bgPos[1] = bgPos[0];
	bgPos[0] = '50%';
}
decodePos(0);
	decodePos(1);
	return bgPos;
}
function setBackgroundPosition(fx){
	if (!fx.set){
	initBackgroundPosition(fx);
}
$(fx.elem).css('background-position',((fx.pos * (fx.end[0][1] - fx.start[0][1]) + fx.start[0][1]) + fx.end[0][2]) + ' ' + ((fx.pos * (fx.end[1][1] - fx.start[1][1]) + fx.start[1][1]) + fx.end[1][2]));
}
function initBackgroundPosition(fx){
	var elem = $(fx.elem);
	var bgPos = elem.data(BG_POS);
	elem.css('backgroundPosition',bgPos);
	fx.start = parseBackgroundPosition(bgPos);
	fx.end = parseBackgroundPosition($.fn.jquery >= '1.6' ? fx.end:fx.options.curAnim['backgroundPosition'] || fx.options.curAnim['background-position']);
	for (var i = 0;
	i < fx.end.length;
	i++){
	if (fx.end[i][0]){
	fx.end[i][1] = fx.start[i][1] + (fx.end[i][0] == '-=' ? -1:+1) * fx.end[i][1];
}
}
fx.set = true;
}
$.fn.animate = function (origAnimate){
	return function (prop,speed,easing,callback){
	if (prop['backgroundPosition'] || prop['background-position']){
	this.data(BG_POS,this.css('backgroundPosition') || 'left top');
}
return origAnimate.apply(this,[prop,speed,easing,callback]);
}
;
}
($.fn.animate);
}
)(jQuery);

JS代码(menu.js):

$(function (){
	var $menu = $(".menu"),$menuLi = $menu.find("li"),$current = $menu.find('.current'),$li_3 = $menu.find('li.li_3'),$li_3_content = $li_3.find('.li_3_content');
	$menuLi.hover(function (){
	var $this = $(this),num = $menuLi.index($this),current = $menuLi.index($(".first")),len = current - num;
	$menu.css("background-position",(101 * current) + "px" + " bottom");
	$current.removeClass("lihover");
	$menuLi.removeClass("first");
	$this.addClass("first");
	if (len <= 0){
	len = -len;
}
;
	if (num != 4){
	$menu.stop().animate({
	backgroundPosition:(101 * num) + "px" + " bottom"}
,100 * len);
}
else{
	$menu.stop().animate({
	backgroundPosition:(101 * num + 30) + "px" + " bottom"}
,100 * len);
}
}
);
	$li_3.hover(function (){
	$li_3_content.stop(true,true).fadeIn(0);
}
,function (){
	$li_3_content.fadeOut(500,function (){
	$li_3_content.css("display","none");
}
);
}
);
	$menu.mouseleave(function (){
	var $this = $(this),num = $menuLi.index($this),current = $menuLi.index($current),len = current - num;
	$menuLi.removeClass("first");
	$current.addClass("first");
	if (len <= 0){
	len = -len;
}
;
	$menu.stop().animate({
	backgroundPosition:(100 * current + 1) + "px" + " bottom"}
,100 * len);
}
);
	$("a.noclick").click(function (event){
	event.preventDefault();
}
);
}
);

CSS代码(menu.css):

*{margin:0;padding:0;}
ol,ul{list-style:none;}
a:link,a:visited,ins{text-decoration:none;}
img{border:none}
body{background-color:#FFFFFF;font-family:"微软雅黑","宋体","黑体",Arial;}
.header{position:relative;height:90px;background:url(../images/line-solid.gif) repeat-x bottom;width:960px;margin:0 auto;z-index:100;}
.menu{height:40px;background:url(../images/menu_bg_1.gif) no-repeat -99px bottom;z-index:100;background-position:0px 100%;position:absolute;top:50px;right:0;padding-right:1px;}
.menu li{float:left;font-size:14px;text-align:center;line-height:18px;padding:0;}
.menu li.lihover,.menu li.licurrent{padding-bottom:15px;border-bottom:3px solid #FE7700;}
.menu li a{padding:2px 35px;border-right:1px solid #D7D7D7;color:#242424;font-weight:bold;margin:0;border-left:none;display:inline-block;font-size:14px;width:30px;}
.menu li a.noborder{border-right:none;}
.li_3{position:relative;z-index:100;}
.li_3 a.noclick{width:60px;}
.li_3_content{position:absolute;top:20px;left:0px;line-height:40px;z-index:99;display:none;height:188px;*top:18px;width:130px;}
.li_3_content a:hover{color:#f18336 !important;}
.li_3_content dt{height:17px;border-bottom:3px solid #FE7700;*height:19px;line-height:17px;}
.li_3_content dd{border-left:1px solid #E6E4E3;border-right:1px solid #E6E4E3;padding:0 8px;background:#ffffff url(../images/menu.gif) no-repeat bottom;}
.li_3_content dd a{text-align:center;padding:0;border-right:none;color:#666;font-weight:normal;width:auto;}
.li_3_content dd.lastItem{background-image:none;border-bottom:1px solid #E6E4E3;}
.li_3_content dd.lastItem a{border-bottom:none;}
.miui_logo{position:absolute;top:29px;left:0;}
.language{position:absolute;right:0;top:10px;line-height:20px;height:20px;font-size:12px;color:#6D6D6D;text-align:right;}
.language span{color:#A6A6A6;padding:0 3px;}
.language a{color:#A6A6A6;}
.language a:hover{text-decoration:underline;}

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