本文实例讲述了jquery实现左右滑动菜单效果代码。分享给大家供大家参考。具体如下：
这里演示了三种背景颜色左右滑动jquery菜单导航效果，IE下有问题，本菜单使用了CSS3的部分属性，因此建议使用火狐或Chrome等浏览器获取最佳效果。当把鼠标移到菜单上的时候，对应菜单项的背景会变化，而且本菜单具有圆角的效果。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-left-right-move-style-menu-codes/
具体代码如下：
<!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>三种背景颜色左右滑动菜单导航</title> <style> .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; } </style> </link> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> (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"10px"; var i=p&&p.menu_width"100px"; var j=p&&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"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){ +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); </script> </head> <body> <table width="600"> <tr> <td><h2>Demo1</h2> <br/> <br/> <script language="javascript" type="text/javascript"> $(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" }); }); </script> <div id="webwidget_menu_glide1"> <div></div> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">More...</a></li> </ul> <div></div> </div></td> </tr> <tr> <td><h2>Demo2</h2> <br/> <br/> <script language="javascript" type="text/javascript"> $(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" }); }); </script> <div id="webwidget_menu_glide2"> <div></div> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">More...</a></li> </ul> <div></div> </div></td> </tr> <tr> <td><h2>Demo3</h2> <br/> <br/> <script language="javascript" type="text/javascript"> $(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" }); }); </script> <div id="webwidget_menu_glide3"> <div></div> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">More...</a></li> </ul> <div></div> </div></td> </tr> </table> </body> </html>
希望本文所述对大家的jquery程序设计有所帮助。
【jquery实现左右滑动菜单效果代码】相关文章：
★ jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
★ jquery插件splitScren实现页面分屏切换模板特效
★ javascript实现dom动态创建省市纵向列表菜单的方法