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

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

<