Fixed Fade Out Menu 實際執行畫面

Fixed Fade Out Menu 當你向下滾動頁面選單會呈現半透明的狀態，成為幾乎是透明的。當用戶將鼠標懸停在它的菜單，然後再次變得不透明。我們將有一些鏈接，一個搜索輸入和一個回到最上方和到達頁尾的按鈕，讓使用者導航到該頁面的頂部或底部。

使用方法：
首先載入程式所需要的 JavaScript 程式碼
//使用 Google AJAX API 取得 jQuery 1.7.2 的 min 版本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


導航選單部份的設計
<div id="nav">
 <ul>
  <li><a class="top" href="#top"><span></span></a></li>
  <li><a class="bottom" href="#bottom"><span></span></a></li>
  <li><a>Link 1</a></li>
  <li><a>Link 2</a></li>
  <li><a>Link 3</a></li>
  <li><a>Link 4</a></li>
  <li><a>Link 5</a></li>
  <li><a>Link 6</a></li>
  <li class="search">
   <input type="text"/>
   <input class="searchbutton" type="submit" value=""/>
  </li>
 </ul>
</div>

接下來設計CSS的樣式表
#nav{ /* 選單的主體 */
    height:35px;
    border-bottom:1px solid #ddd;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    background:#fff url(../images/nav.png) repeat-x center left;
    z-index:999999;
}
#nav ul{
    height:25px;
    list-style:none;
    margin:6px auto 0px auto;
    width:600px;
}
#nav ul li{
    display:inline;
    float:left;
    margin:0px 2px;
}
#nav a{
    font-size:11px;
    font-weight:bold;
    float:left;
    padding: 2px 4px;
    color:#999;
    text-decoration: none;
    border:1px solid #ccc;
    cursor: pointer;
    background:transparent url(../images/overlay.png) repeat-x center left;
    height:16px;
    line-height:16px;
}
#nav a:hover{
    background:#D9D9DA none;
    color: #fff;
}
#nav a.top span, #nav a.bottom span{
    float:left;
    width:16px;
    height:16px;
}
#nav a.top span{
    background:transparent url(../images/top.png) no-repeat center center;
}
#nav a.bottom span{
    background:transparent url(../images/bottom.png) no-repeat center center;
}
#nav ul li.search{
    float:right;
}
#nav input[type="text"]{
    float:left;
    border:1px solid #ccc;
    margin:0px 1px 0px 50px;
    padding:2px 2px 2px 2px;
}
input.searchbutton{
    border:1px solid #ccc;
    padding:1px;
    cursor:pointer;
    width:30px;
    height:22px;
    background:#E8E9EA url(../images/search.png) no-repeat center center;
}
input.searchbutton:hover{
    background-color:#D9D9DA;
}

最後加入 JavaScript 的程式碼
$(function() {
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        if(scrollTop != 0)
            $('#nav').stop().animate({'opacity':'0.2'},400);
        else
            $('#nav').stop().animate({'opacity':'1'},400);
    });
    $('#nav').hover(
        function (e) {
            var scrollTop = $(window).scrollTop();
            if(scrollTop != 0){
                $('#nav').stop().animate({'opacity':'1'},400);
            }
        },
        function (e) {
            var scrollTop = $(window).scrollTop();
            if(scrollTop != 0){
                $('#nav').stop().animate({'opacity':'0.2'},400);
            }
        }
    );
});

作者網站：http://tympanus.net/codrops/2009/12/11/fixed-fade-out-menu-a-css-and-jquery-tutorial/
檔案大小：3 KB
檔案下載：http://tympanus.net/Tutorials/FixedFadeOutMenu/FixedFadeOutMenu.zip
檔案備份：下載