html 菜单左右滑动效果,jquery实现左右滑动菜单效果代码

这里演示了三种背景颜色左右滑动jquery菜单导航效果，IE下有问题，本菜单使用了CSS3的部分属性，因此建议使用火狐或Chrome等浏览器获取最佳效果。当把鼠标移到菜单上的时候，对应菜单项的背景会变化，而且本菜单具有圆角的效果。

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

三种背景颜色左右滑动菜单导航

.webwidget_menu_glide{

padding: 5px;

-moz-border-radius-topright: 10px;

-moz-border-radius-topleft: 10px;

-webkit-border-top-left-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-radius-topright: 10px;

-khtml-border-radius-topleft: 10px;

border-radius-topright: 10px;

border-radius-topleft: 10px;

-moz-border-radius-bottomright: 10px;

-moz-border-radius-bottomleft: 10px;

-webkit-border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

-khtml-border-radius-bottomright: 10px;

-khtml-border-radius-bottomleft: 10px;

border-radius-bottomright: 10px;

border-radius-bottomleft: 10px;

border-radius:10px;

}

.webwidget_menu_glide .webwidget_menu_glide_sprite{

width: 100px;

height: 20px;

background-color: fuchsia;

position: absolute;

-moz-border-radius-topright: 10px;

-moz-border-radius-topleft: 10px;

-webkit-border-top-left-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-radius-topright: 10px;

-khtml-border-radius-topleft: 10px;

border-radius-topright: 10px;

border-radius-topleft: 10px;

-moz-border-radius-bottomright: 10px;

-moz-border-radius-bottomleft: 10px;

-webkit-border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

-khtml-border-radius-bottomright: 10px;

-khtml-border-radius-bottomleft: 10px;

border-radius-bottomright: 10px;

border-radius-bottomleft: 10px;

border-radius:10px;

}

.webwidget_menu_glide ul{

padding: 0px;

margin: 0px;

font-family:Arial;

}

.webwidget_menu_glide ul li{

float: left;

list-style: none;

position: relative;

text-align: center;

margin-right: 10px;

width: 100px;

}

.webwidget_menu_glide ul li a{

color: black;

text-decoration: none;

font-weight: bold;

}

.webwidget_menu_glide ul li ul{

-moz-border-radius-bottomright: 7px;

-moz-border-radius-bottomleft: 7px;

-webkit-border-bottom-left-radius: 7px;

-webkit-border-bottom-right-radius: 7px;

-khtml-border-radius-bottomright: 7px;

-khtml-border-radius-bottomleft: 7px;

border-radius-bottomright: 7px;

border-radius-bottomleft: 7px;

border-radius:7px;

padding-bottom: 5px;

position: absolute;

z-index: 999999;

display: none;

}

.webwidget_menu_glide ul li ul li{

-moz-border-radius-topright: 0px;

-moz-border-radius-topleft: 0px;

-webkit-border-top-left-radius: 0px;

-webkit-border-top-right-radius: 0px;

-khtml-border-radius-topright: 0px;

-khtml-border-radius-topleft: 0px;

border-radius-topright: 0px;

border-radius-topleft: 0px;

border-radius:0px;

margin: 0px;

float: none;

border:none;

word-wrap:break-word;

}

.webwidget_menu_glide ul li ul li a{

padding-left: 5px;

padding-right: 5px;

font-weight: normal;

}

(function(a){

a.fn.webwidget_menu_glide=function(p){

var p=p||{};

var f=p&&p.menu_text_size?p.menu_text_size:"12px";

var g=p&&p.menu_text_color?p.menu_text_color:"blue";

var h=p&&p.menu_margin?p.menu_margin:"10px";

var i=p&&p.menu_width?p.menu_width:"100px";

var j=p&&p.menu_height?p.menu_height:"20px";

var k=p&&p.menu_sprite_color?p.menu_sprite_color:"red";

var l=p&&p.menu_background_color?p.menu_background_color:"black";

var m=p&&p.sprite_speed?p.sprite_speed:"fast";

f += "px";

h += "px";

i += "px";

j += "px";

var n=a(this);

if(n.children("ul").length==0||n.find("li").length==0){

n.append("Require menu content");

return null

}

s_m(n.children("ul").children("li"),h,i,j);

s_m_t_c(n.find("a"),g,j,f);

n.css("background-color",l);

if(n.children("ul").children("li").is(".current")){

var o=n.children("ul").children("li").filter(".current").offset()

}else{

var o=n.children("ul").children("li:first").offset()

}

var q=o.left+'px';

s_m_s_c(n.find(".webwidget_menu_glide_sprite"),k,i,j,q);

n.children("ul").children("li").hover(function(){

var b=$(this).offset();

var c=b.left+'px';

n.find(".webwidget_menu_glide_sprite").stop().animate({

left:c

},m)

},function(){

n.find(".webwidget_menu_glide_sprite").stop().animate({

left:q

},m)

});

n.children("ul").children("li").children("ul").children("li").hover(function(){},function(){});

function s_m_t_c(a,b,c,d){

a.css("color",b);

a.css("line-height",c);

a.css("font-size",d)

}

function s_m(a,b,c,d){

style="margin-right:"+b+"; width: "+c+"; height: "+d+";";

a.attr("style",style)

}

function s_m_s_c(a,b,c,d,e){

a.css("background-color",b);

a.css("width",c);

a.css("height",d);

a.css("left",e)

}

}

})(jQuery);

Demo1 $(function() { $("#webwidget_menu_glide1").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#FFF", menu_sprite_color:"red", menu_background_color:"#C91A3E", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide1" }); }); Home News About Contact More...

Demo2 $(function() { $("#webwidget_menu_glide2").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#CCC", menu_sprite_color:"#666", menu_background_color:"#000", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide2" }); }); Home News About Contact More...

Demo3 $(function() { $("#webwidget_menu_glide3").webwidget_menu_glide({menu_width:"100", menu_height:"23", menu_text_size:"12", menu_text_color:"#FFF", menu_sprite_color:"#86C7EF", menu_background_color:"#0F67A1", menu_margin:"2", sprite_speed:"normal", container:"webwidget_menu_glide3" }); }); Home News About Contact More...