本文实例讲述了jquery实现滑出式导航滑出式菜单效果代码。分享给大家供大家参考。具体如下：

这里介绍jquery实现的滑出式导航跟随鼠标滑出的导航效果，鼠标移过后菜单快速从上到下移出，引用了新版的jQuery插件，菜单修改一下就可以用了，比如修改一下背景色或文字大小等。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-滑出-导航-菜单-样式-代码/

具体代码如下：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=utf-8 '/title滑出导航/title脚本类型=' text/JavaScript ' src=' jquery-1。6 .2 .量滴js '/script style type=' text/CSS ' body { font-family : arial；} ul #导航{ list-style:无外无；保证金： 0；padd : 0；位置：固定；right : 10 xtop : 0；宽度： 721 pxz指数： 999999；} ul #导航li { display: inline向左浮动：宽度： 103像素；} ul #导航阿利{背景色-颜色： # E7F2F 9；背景-位置： 50% 10px；背景-重复：不重复；border: 1px实心# BDDCEFborder-radius : 0 0 10px 10px；显示器：块；向左浮动：高度： 25px页边距-顶部：-2px；opacity: 0.7填充-top : 80px；文本对齐：中心；文本装饰：无；线高：25 px宽度： 100像素；font-size :11 pxcolor: # 60ACD8字母间距2 xtext-shadow : 0-1px 1px # FFFFFF；} ul #导航阿利：悬停{底色： # CAE3F 2；} ul #导航主页a {背景： URL(图片/主页。巴布亚新几内亚)不重复；} ul #导航。关于一个{背景： URL(图片/id _ card。巴布亚新几内亚)不重复；} ul #导航。搜索{背景： URL(图片/搜索。巴布亚新几内亚)不重复；} ul #导航。播客{背景： URL(图片/ipod。巴布亚新几内亚)不重复；} ul #导航. RSS提要一个{背景： URL(图片/RSS。巴布亚新几内亚)不重复；} ul #导航。照片{背景： URL(图像/相机。巴布亚新几内亚)不重复；} ul #导航。联系{背景： URL(图片/邮件。png)，不重复；}/style/head dyul id=' navigation ' Li class=' Home ' a href=' Home/a/Li Li class=' About ' a href=' About/a/Li Li class=' Search ' a href=' Search/a/Li Li class=' Photos ' a href=' Photos/a/Li class=' Rss Feed ' a href=' Rss Feed/$(' #导航a ').每个（函数(){ $(此)).停止()。动画({ 'marginTop':'-80px' }，d=150)；});$(' #导航李' .hover(function () { $('a '，$(this)).停止()。动画({ 'marginTop':'-2px' }，200)；}，function () { $('a '，$(this)).停止()。动画({ 'marginTop':'-80px' }，200)；} );});/脚本/正文/html希望本文所述对大家的jquery程序设计有所帮助。