摘要：設(shè)置為相對定位和的高度，加一下過渡屬性給元素加上絕對定位和一些過渡。補(bǔ)充一些美化的樣式還要給滑動的導(dǎo)航美化一下，包括菜單顯示隱藏時的樣式背景色菜單圖標(biāo)等。待會兒會用來進(jìn)行操作酷炫的滑動動畫。

Off-Canvas 滑動導(dǎo)航現(xiàn)在逐漸在移動頁面變得越來越流行了，本文就將討論如何通過 jQuery 增添、刪除類來操作 CSS 過渡和動畫完成這樣的效果。

Font-Awesome

css

jQuery Library

Google Fonts (Raleway 和 Lato)

Demo / Download

引入相關(guān)的庫，如：

Off-Canvas 滑動導(dǎo)航和傳統(tǒng)的導(dǎo)航不同的地方在于：

Container 容器——包裹 body 里的所有標(biāo)簽、控制元素的顯示/隱藏

Canvas 畫布——用于滑動效果制作的 div

Navigation 導(dǎo)航——包裹滑動導(dǎo)航的 div

基本結(jié)構(gòu)：

    

        

        //Sliding Navigation Content Here

        
    

加入主要元素：

        

            

                
 MENU
                

                    

                        

                               HOME
                        
                    
                    

                        

                               ABOUT US
                            
                            
                        

                            

                                OUR TEAM
                            
                            

                                OUR SERVICES
                            
                        
                    
                    

                        

                            
                                PORTFOLIO
                        
                        

                            

                                WEB DESIGN
                            

                            

                                GRAPHIC DESIGN
                            
                        
                    
                    

                        

                            
                                  CONTACT
                        
                    
                
             
            
            
Off Canvas Sliding Navigation
            
Transition effect for off-canvas views with sliding navigation 
            
 ← Back to the Article
       
    

要說明的幾點(diǎn)：

含有 toggle id 的無序列表待會兒將被用于滑動特效

帶有 font-awesome 圖標(biāo)的列表鏈接到每個獨(dú)立的菜單。

如果有子菜單，加上 (+) 按鈕圖標(biāo)，點(diǎn)擊后通過 jQuery 來切換成 (-)。

包含 .toggle-nav 和 #bars 的三條線的圖標(biāo)用于切換導(dǎo)航的顯示隱藏

HTML建好了，接下來開始做酷炫的事情~

基本樣式：

html,
body{
background: #f3efe0;
}

h1, h2, h3{
    text-align: center;
}

h1{
    font-family: "Raleway", Arial, sans-serif;
    font-weight: 700;
    font-size: 45px;
    margin-top: 15px;
    color: #38935f;
}

h3{
    font-family: "Raleway", Arial, sans-serif;
    font-weight: 400;
    font-size: 25px;
    margin-top: 15px;
    color: #918e84;
}

container 把 canvas 和 navigation 包裹起來

#container {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

  
注意：這里使用 vh (viewport’s height) 作高度單位，100% 的高度可以自適應(yīng)屏幕高度。

現(xiàn)在來看看到 canvas 元素。設(shè)置為相對定位和 100% 的高度，加一下過渡屬性：

#canvas {
    width: 100%;
    height: 100%;
    padding: 5.5% 0;
    position: relative;

    -webkit-transform:translateX(0);
    -moz-transform:translateX(0);
    -ms-transform:translateX(0);
     -o-transform:translateX(0);
        transform:translateX(0);

    -webkit-transition:.5s ease all;
    -moz-transition:.5s ease all;
     -o-transition:.5s ease all;
        transition:.5s ease all;
}

給 nav 元素加上絕對定位和一些過渡。

#nav {
    width: 300px;
    height: 100%;
    background: #38935f;
    position: absolute;
    left: -300px;
    top: 0;

    -webkit-transition:.5s ease all;
    -moz-transition:.5s ease all;
     -o-transition:.5s ease all;
        transition:.5s ease all;

/* By default, rotate the menu 90deg inwards */
    -webkit-transform:rotateY(-90deg);
    -moz-transform:rotateY(-90deg);
    -ms-transform:rotateY(-90deg);
     -o-transform:rotateY(-90deg);
        transform:rotateY(-90deg);
}

補(bǔ)充一些美化的樣式：

#bars{
    font-size: 34px;
    margin-left: 49px;
    color: #38935f;
}
#bars:hover{
    color: #48b978
}
#title{
    margin: 0;
    padding: 1em;
    color: rgba(0,0,0,0.4);
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
    font-weight: 300;
    font-size: 2em;
    font-family: "Raleway", Arial;
}
.border{
    border-top: 1px solid rgba(0,0,0,0.2);
}
a.back {
    color: #38935f;
    width: 200px;
    text-decoration: none;
    text-align: center;
    font-family: "Raleway";
    font-size: 20px;
    font-weight: 600;
    display: block;
    margin: 50px auto 0 auto;
    border: 2px solid #38935f;
    padding: 10px;
}
a.back:hover{
    color: #48b978;
    border: 2px solid #48b978;
}

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
}

還要給滑動的導(dǎo)航美化一下，包括菜單顯示、隱藏時的樣式、背景色、菜單圖標(biāo)等。

待會兒會用 jQuery 來進(jìn)行操作酷炫的滑動動畫。

#toggle {
    list-style: none;
    margin-top: 40px;
}
#toggle div:hover {
    background: rgba(0,0,0,0.2);
    -webkit-box-shadow:inset 0 -1px rgba(0,0,0,0);
    -moz-box-shadow:inset 0 -1px rgba(0,0,0,0);
    box-shadow:inset 0 -1px rgba(0,0,0,0);
    color: #fff;
}
#toggle div.active {
    background: #1f9d55;
}
#toggle div {
    cursor: pointer;
    display: block;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
 span.menu-icons {
    font-size: 20px;
    height: 20px;
    width: 22px;
    float: left;
    margin: 11px 0px 10px 37px;
    color: #fff;
}
span.the-btn {
    float: right;
    font-size: 20px;
    height: 30px;
    width: 43px;
    margin-top: 10px;
    margin-right: 8px;
    padding:0;
    color: #fff;
}
#toggle ul {
    list-style: disc;
    display: none;
    color: #fff;
    background: rgba(0,0,0,0.2);
    -webkit-box-shadow:inset 0 -1px rgba(0,0,0,0);
    -moz-box-shadow:inset 0 -1px rgba(0,0,0,0);
    box-shadow:inset 0 -1px rgba(0,0,0,0);
}
#toggle li a {
    line-height: 41px;
    color: #fff;
    list-style: circle;
    width: 240px;
    padding: 0;
    margin: 0 0 0 50px;
}
#toggle a {
    margin: 0 0 0 47px;
    padding: 0;
    font-family: "Lato";
    color: #fff;
    line-height: 41px;
    font-weight: normal;
    font-size: 18px;
    text-decoration: none;
}
#toggle ul li {
    margin-left: 109px;
}
#toggle ul li a:hover{
    background: #1f9d55;
}
#toggle ul li a {
     margin-left: 0;
}

最后進(jìn)行動畫樣式設(shè)置：將用到 transform 屬性和從左到右 3D 旋轉(zhuǎn)變換。

#nav {
    width: 300px;
    height: 100%;
    background: #38935f;
    position: absolute;
    left: -300px;
    top: 0;

    -webkit-transition:.5s ease all;
    -moz-transition:.5s ease all;
    -o-transition:.5s ease all;
    transition:.5s ease all;

/* By default, rotate the menu 90deg inwards */
    -webkit-transform:rotateY(-90deg);
    -moz-transform:rotateY(-90deg);
    -ms-transform:rotateY(-90deg);
     -o-transform:rotateY(-90deg);
        transform:rotateY(-90deg);
}

#container.display-nav #canvas {
   -webkit-transform:translateX(300px);
   -moz-transform:translateX(300px);
    -ms-transform:translateX(300px);
     -o-transform:translateX(300px);
        transform:translateX(300px);
}

/* transition the menu with perspective on "show-nav" */
#container.display-nav #nav {
   -webkit-transform-origin:100% 50%;
   -moz-transform-origin:100% 50%;
    -ms-transform-origin:100% 50%;
     -o-transform-origin:100% 50%;
        transform-origin:100% 50%;

   -webkit-transform:perspective(600px) rotateY(0deg);
   -moz-transform:perspective(600px) rotateY(0deg);
    -ms-transform:perspective(600px) rotateY(0deg);
     -o-transform:perspective(600px) rotateY(0deg);
        transform:perspective(600px) rotateY(0deg);
}

首先通過 .toggle-nav 元素切換效果，給元素增刪 display-nav 類來完成效果。

// 調(diào)用toggleNavigation
$(function() {
    $(".toggle-nav").click(function() {
        toggleNavigation();
    });
});

// toggleNavigation 方法
function toggleNavigation() {
    if ($("#container").hasClass("display-nav")) {
        // 關(guān)閉 Nav
        $("#container").removeClass("display-nav");
    } else {
        // 打開 Nav
        $("#container").addClass("display-nav");
    }
}

現(xiàn)在，整個塊元素能正確地顯示，已經(jīng)有了 off-page canvas，也完成了 jQuery 滑動效果。如下這段代碼，利用 $currIcon=$(this).find(“span.the-btn”) 創(chuàng)建一個變量來傳遞當(dāng)前菜單圖標(biāo)，然后把所有的圖標(biāo)做成折疊狀態(tài)（用加號圖標(biāo)），用 toggle 類把加/減圖標(biāo)存儲在 $curricon 里。

$("#toggle > li > div").click(function () {
    if (false == $(this).next().is(":visible")) {
        $("#toggle ul").slideUp();
    }

    var $currIcon=$(this).find("span.the-btn");

    $("span.the-btn").not($currIcon).addClass("fa-plus").removeClass("fa-minus");

    $currIcon.toggleClass("fa-minus fa-plus");

    $(this).next().slideToggle();

    $("#toggle > li > div").removeClass("active");
    $(this).addClass("active");

});

Demo / Download

現(xiàn)在已經(jīng)成功地完成了一個很棒的 off-canvas 導(dǎo)航菜單。希望這篇文章對讀者能有啟發(fā)，如果你還感興趣，那就一塊來動手實現(xiàn)一個吧。

原文 How to Create Off-Canvas Sliding Navigation Menu
編譯 SegmentFault