本文实例讲述了jQuery实现可用于博客的动态滑动菜单的方法。分享给大家供大家参考。具体如下： 复制代码 代码如下: jQuery滑动菜单插件 <br /> (function($){<br /> $.fn.extend({<br /> tagdrop: function(options) {<br /> var defaults = {<br /> tagPaddingTop: '90px',<br /> tagDefaultPaddingTop: '30px',<br /> bgColor: '#B1CCED',<br /> bgMoverColor: '#7FB0F0',<br /> textColor: '#e0e0e0',<br /> textDefaultColor: '#fff'<br /> };<br /> var options = $.extend(defaults, options);<br /> return this.each(function() {<br /> var obj = $(this);<br /> var li_items = $("li", obj);<br /> $("li", obj).css('background-color', options.bgColor);<br /> li_items.mouseover(function(){<br /> $(this).animate({paddingTop: options.tagPaddingTop}, 300);<br /> $(this).css('background-color', options.bgMoverColor);<br /> $(this).css('color', options.textColor);<br /> }).mouseout(function() {<br /> $(this).animate({paddingTop: options.tagDefaultPaddingTop}, 500);<br /> $("li",$(this).parent()).css('background-color', options.bgColor);<br /> $("li",$(this).parent()).css('color', options.textDefaultColor);<br /> });<br /> });<br /> }<br /> });<br /> })(jQuery);<br /> <br /> $(document).ready(function() {<br /> $('.menu').tagdrop({tagPaddingTop: '60px',bgColor: '#B1CCED',bgMoverColor: '#7FB0F0',textColor: '#e0e0e0'});<br /> });<br /> <br /> body {<br /> margin:0;<br /> padding:0;<br /> }<br /> #nav li {margin: 0; padding: 0;display: inline;list-style-type: none;font-size: 12px;}<br /> #nav a:link, #nav a:visited {<br /> }<br /> #nav a:hover {color: #fff; background:#FF6A00;}<br /> #nav a:visited.active, #nav a:link.active {background-color: #fff;color: #FF6A00;}<br /> .menu {<br /> list-style:none;<br /> margin: 0;<br /> float:right;<br /> }<br /> .menu li {<br /> float:left;<br /> margin:0 auto;<br /> cursor:pointer;<br /> height:30px;<br /> padding:30px 5px 5px 5px;<br /> margin:0px 3px 0px 3px;<br /> -moz-border-radius: 0px 0px 10px 10px;<br /> -webkit-border-radius:0px 0px 10px 10px;<br /> -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br /> color: #FFF;<br /> text-shadow: 0 -1px 1px rgba(0,0,0,0.25);<br /> font-family: "Lucida Grande",Lucida,Verdana,sans-serif;<br /> font-size:13px;<br /> font-weight:bold;<br /> text-transform:uppercase;<br /> }<br /> About us Contacts Others Products Portfolio Testemonies 希望本文所述对大家的jQuery程序设计有所帮助。
