本文实例讲述了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;
