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菜單，兼容性問題大家自己取舍吧，呵呵。

最后把這款菜單的源碼代碼分享一下，下載地址>>