jquery实现Slide Out Navigation滑出式菜单效果代码
2015-09-07 16:49
696 查看
本文实例讲述了jquery实现Slide Out Navigation滑出式菜单效果代码。分享给大家供大家参考。具体如下:
这里介绍jquery实现的Slide Out Navigation跟随鼠标滑出的导航效果,鼠标移过后菜单快速从上到下移出,引用了新版的jQuery插件,菜单修改一下就可以用了,比如修改一下背景色或文字大小等。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-slide-out-nav-menu-style-codes/
具体代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Slide Out Navigation</title> <script type='text/javascript' src='jquery-1.6.2.min.js'></script> <style type="text/css"> body{ font-family:arial;} ul#navigation { list-style: none outside none; margin: 0; padding: 0; position: fixed; right: 10px; top: 0; width: 721px; z-index: 999999; } ul#navigation li { display: inline; float: left; width: 103px; } ul#navigation li a { background-color: #E7F2F9; background-position: 50% 10px; background-repeat: no-repeat; border: 1px solid #BDDCEF; border-radius: 0 0 10px 10px; display: block; float: left; height: 25px; margin-top: -2px; opacity: 0.7; padding-top: 80px; text-align: center; text-decoration: none; line-height:25px; width: 100px; font-size:11px; color: #60ACD8; letter-spacing: 2px; text-shadow: 0 -1px 1px #FFFFFF; } ul#navigation li a:hover { background-color: #CAE3F2; } ul#navigation .home a { background: url(images/home.png) no-repeat; } ul#navigation .about a { background: url(images/id_card.png) no-repeat; } ul#navigation .search a { background: url(images/search.png) no-repeat; } ul#navigation .podcasts a { background: url(images/ipod.png) no-repeat; } ul#navigation .rssfeed a { background: url(images/rss.png) no-repeat; } ul#navigation .photos a { background: url(images/camera.png) no-repeat; } ul#navigation .contact a { background: url(images/mail.png) no-repeat; } </style> </head> <body> <ul 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> <li class="rssfeed"><a href="">Rss Feed</a></li> <li class="podcasts"><a href="">Podcasts</a></li> <li class="contact"><a href="">Contact</a></li> </ul> <script type="text/javascript"> $(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script> </body> </html>
希望本文所述对大家的jquery程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- 底部Popwindow形式菜单的类的封装
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 一步一步跟我学易语言之第二个易程序菜单设计
- IE右键菜单被修改
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法