首页>>导航菜单>>鼠标经过伸缩的导航菜单(2014-05-27)

鼠标经过伸缩的导航菜单

鼠标经过伸缩的导航菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <ul class="menu">  
  2.             <li>About us</li>  
  3.             <li>Contacts</li>  
  4.             <li>Products</li>  
  5.   
  6.         </ul>  

 

CSS Code
  1. .menu {  
  2.              list-style:none;  
  3.              margin: 0;  
  4.     float:rightright;  
  5.          }  
  6.          .menu li {  
  7.              float:left;  
  8.              margin:0 auto;  
  9.              cursor:pointer;  
  10.              height:30px;  
  11.              padding:30px 5px 5px 5px;  
  12.              margin:0px 3px 0px 3px;  
  13.              -moz-border-radius: 0px 0px 10px 10px;  
  14.              -webkit-border-radius:0px 0px 10px 10px;  
  15.              -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);  
  16.              -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);  
  17.                
  18.              color: #FFF;  
  19.              text-shadow: 0 -1px 1px rgba(0,0,0,0.25);  
  20.              font-family: "Lucida Grande",Lucida,Verdana,sans-serif;  
  21.              font-size:13px;  
  22.              font-weight:bold;  
  23.              text-transform:uppercase;  
  24.   
  25.          }  

 

JavaScript Code
  1. <script>  
  2.            (function($){  
  3.                $.fn.extend({  
  4.                    tagdrop: function(options) {  
  5.                        var defaults = {  
  6.                            tagPaddingTop: '90px',  
  7.                            tagDefaultPaddingTop: '30px',  
  8.                            bgColor: '#B1CCED',  
  9.                            bgMoverColor: '#7FB0F0',  
  10.                         textColor: '#e0e0e0',  
  11.                         textDefaultColor: '#fff'  
  12.                        };  
  13.                        var options = $.extend(defaults, options);  
  14.   
  15.                        return this.each(function() {  
  16.                            var obj = $(this);  
  17.                            var li_items = $("li", obj);  
  18.                            $("li", obj).css('background-color', options.bgColor);  
  19.                              
  20.                            li_items.mouseover(function(){  
  21.                                $(this).animate({paddingTop: options.tagPaddingTop}, 300);  
  22.                                $(this).css('background-color', options.bgMoverColor);  
  23.                                $(this).css('color', options.textColor);  
  24.                            }).mouseout(function() {  
  25.                                $(this).animate({paddingTop: options.tagDefaultPaddingTop}, 500);  
  26.                                $("li",$(this).parent()).css('background-color', options.bgColor);  
  27.                                $("li",$(this).parent()).css('color', options.textDefaultColor);  
  28.                            });  
  29.                        });  
  30.                    }  
  31.                });  
  32.            })(jQuery);  
  33.        </script>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_346.html