jQuery实现一个淡入淡出下拉菜单 非常简易

前段时间我一直在向大家推荐CSS3和HTML5的东西，尽管看上去很炫，但也有不少网友抱怨兼容性问题，所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件。今天先分享一款利用jQuery实现的淡入淡出下拉菜单，看上去非常简单。先看看效果图。

虽然简单，但看上去还是蛮不错的，不是吗？

我们也可以从这里看到完整的DEMO演示。

接下来我们来简单看看这款下拉菜单源代码，先从HTML代码开始：

<ul class="navigation">
    <li><a href="#">Main Cat 1</a></li>
    <li><a href="#">Main Cat 2  </a>
        <ul>
            <li><a href="#">Sub Cat 2-1</a></li>
            <li><a href="#">Sub Cat 2-2</a></li>
            <li><a href="#">Sub Cat 2-3</a></li>
            <li><a href="#">Sub Cat 2-4</a></li>
            <li><a href="#">Sub Cat 2-5</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li><a href="#">Main Cat 3 </a>
    <ul>
        <li><a href="#">Sub Cat 3-1</a></li>
        <li><a href="#">Sub Cat 3-2</a></li>
        <li><a href="#">Sub Cat 3-3</a></li>
        <li><a href="#">Sub Cat 3-4</a></li>
        <li><a href="#">Sub Cat 3-5</a></li>
        <li><a href="#">Sub Cat 3-6</a></li>
        <li><a href="#">Sub Cat 3-7</a></li>
    </ul>            
        <div class="clear"></div>
    </li>
    <li><a href="#">Main Cat </a></li>
</ul>

然后是CSS代码：

/* Giving a font-family and Size to give good look */
    body{
        font-family: Arial, Helvetica,sans-serif; 
        font-size:15px;
    }
    
    /* Adjusting the margins, paddings and no list styles */
    .navigation  {
        margin:0; 
        padding:0; 
        list-style:none;
    }    
    
    /* Little tricking with positions */
    .navigation  li {
        float:left;            /* Show list items inline */
        width:150px; 
        position:relative; 
    }
        
    /* Playing with Main Categories */
    .navigation  li a {
        background:#262626; 
        color:#fff;
        display:block;      /* Making sure a element covers whole li area */
        padding:8px 7px 8px 7px; 
        text-decoration:none; /* No underline */
        border-top:1px solid #F2861D;
        text-align:center; 
        text-transform:uppercase;
    }

    .navigation  li a:hover {
        color:#F2861D;
    }
        
    /* Sub Cat Menu stuff*/
    .navigation  ul {
        position:absolute; 
        left:0; 
        display:none; /* Hide it by default */
        margin:0 0 0 -1px; 
        padding:0; 
        list-style:none;
        border-bottom:3px solid #F2861D;
    }
        
    .navigation  ul li {
        width:150px; 
        float:left; 
        border-top:none;
    }
        
    /* Sub Cat menu link properties */
    .navigation  ul a {
        display:block;        /* Making sure a element covers whole li area */
        height:15px;
        padding:8px 7px 13px 7px; 
        color:#fff;
        text-decoration:none;    
        border-top:none;
        border-bottom:1px dashed #6B6B6B;
    }
        
    .navigation  ul a:hover {
        color:#F2861D;
    }

接下来是重要的jQuery代码，主要是实现下拉时淡入淡出的效果：

$(document).ready(function () {    
    // hover property will help us set the events for mouse enter and mouse leave
    $('.navigation li').hover(
        // When mouse enters the .navigation element
        function () {
            //Fade in the navigation submenu
            $('ul', this).fadeIn();     // fadeIn will show the sub cat menu
        }, 
        // When mouse leaves the .navigation element
        function () {
            //Fade out the navigation submenu
            $('ul', this).fadeOut();     // fadeOut will hide the sub cat menu        
        }
    );
});

这里用了jQuery的fadeIn()和fadeOut()方法，熟悉jQuery的同学一定不会对它们陌生。

另外，大家可以在这里看到更多漂亮的CSS3菜单，兼容性问题大家自己取舍吧，呵呵。

最后把这款菜单的源码代码分享一下，下载地址>>