jQuery实现可用于博客的动态滑动菜单完整实例
2015-09-17 00:00
786 查看
本文实例讲述了jQuery实现可用于博客的动态滑动菜单代码。分享给大家供大家参考。具体如下:
这是一款基于jQuery1.3.2的动态滑动菜单特效代码,常用于博客,鼠标滑过菜单,菜单会不断伸出,貌似很漂亮,我比较喜欢,发上来供大家使用或学习参考。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-blog-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" lang="en" xml:lang="en"> <head> <title>jQuery滑动菜单插件</title> <script type="text/javascript" src="jquery1.3.2.js"></script> <script type="text/javascript"> (function($){ $.fn.extend({ tagdrop: function(options) { var defaults = { tagPaddingTop: '90px', tagDefaultPaddingTop: '30px', bgColor: '#B1CCED', bgMoverColor: '#7FB0F0', textColor: '#e0e0e0', textDefaultColor: '#fff' }; var options = $.extend(defaults, options); return this.each(function() { var obj = $(this); var li_items = $("li", obj); $("li", obj).css('background-color', options.bgColor); li_items.mouseover(function(){ $(this).animate({paddingTop: options.tagPaddingTop}, 300); $(this).css('background-color', options.bgMoverColor); $(this).css('color', options.textColor); }).mouseout(function() { $(this).animate({paddingTop: options.tagDefaultPaddingTop}, 500); $("li",$(this).parent()).css('background-color', options.bgColor); $("li",$(this).parent()).css('color', options.textDefaultColor); }); }); } }); })(jQuery); </script> <script type="text/javascript"> $(document).ready(function() { $('.menu').tagdrop({tagPaddingTop: '60px',bgColor: '#B1CCED',bgMoverColor: '#7FB0F0',textColor: '#e0e0e0'}); }); </script> <style> body { margin:0; padding:0; } #nav li {margin: 0; padding: 0;display: inline;list-style-type: none;font-size: 12px;} #nav a:link, #nav a:visited { } #nav a:hover {color: #fff; background:#FF6A00;} #nav a:visited.active, #nav a:link.active {background-color: #fff;color: #FF6A00;} .menu { list-style:none; margin: 0; float:right; } .menu li { float:left; margin:0 auto; cursor:pointer; height:30px; padding:30px 5px 5px 5px; margin:0px 3px 0px 3px; -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius:0px 0px 10px 10px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); color: #FFF; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); font-family: "Lucida Grande",Lucida,Verdana,sans-serif; font-size:13px; font-weight:bold; text-transform:uppercase; } </style> </head> <body> <ul class="menu"> <li>About us</li> <li>Contacts</li> <li>Others</li> <li>Products</li> <li>Portfolio</li> <li>Testemonies</li> </ul> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章推荐
- jquery简单切换插件
- HTML5,Javascript,and jQuery 24-Hour Trainer(4)——初识CSS
- jQuery插件的简要介绍。
- 对REST架构的理解及Jquery+JSON+RESTful WCF (附源码)
- jquery 无法提交 表单 submit无反映
- jquery文档加载几种写法,图片加载写法
- HTML5,Javascript,and jQuery 24-Hour Trainer(3)——Lists and Tables
- JQuery+ajax+jsonp 跨域访问
- 多个jQuery版本共存的处理方案
- jQuery 操作css
- JQuery源码学习(2.1.1)之 版本结构 ---- day1
- jquery 动画效果函数
- Jquery ajax请求导出Excel表格
- 原生js+JQuery在浏览器之间兼容的坑
- lhgdialog简单弹出框解析
- jQuery时间冒泡
- 讨论下jquery中的重复添加和事件绑定(转)
- jQuery按键事件响应的Demo
- jQuery和javascript获取临近节点方法
- jquery选择器 之 获取父级元素、同级元素、子元素