本文实例讲述了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?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）;</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" class="webwidget_menu_glide"><div class="webwidget_menu_glide_sprite"></div><ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li class="current"><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">More...</a></li></ul><div style="clear: both"></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" class="webwidget_menu_glide"><div class="webwidget_menu_glide_sprite"></div><ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li class="current"><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">More...</a></li></ul><div style="clear: both"></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" class="webwidget_menu_glide"><div class="webwidget_menu_glide_sprite"></div><ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li class="current"><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">More...</a></li></ul><div style="clear: both"></div></div></td> </tr></table></body></html>希望本文所述对大家的jquery程序设计有所帮助。
易网时代-编程资源站