範例:Wild Life(行動裝置)

【範例結果】

二、【平版】美化  ( nav 美化及 JQ設定)

CSS美化

/*針對手機右上角icon及#nav美化*/
.navbtn, .navClosebtn{
    display: block; width: 50px; height: 50px; 
    position: absolute; top: 0; right: 0;
    background: transparent; color: #fff; border: none;
    font-size: 30px; cursor: pointer;
}
.navClosebtn{
    background: #eee; color:#000;
}

#nav{
    position:static;
    padding-top: 50px;
}
#nav li{ float: none;}
#nav li a{text-align: center;
        line-height: 50px; padding: 0;
        transition: all .5s;}
#nav li a:hover {
    color:#12004e; background: rgb(206, 194, 100);
}

nav{
    background: rgba(0, 0, 0, 0.6);
    position: fixed; top: 0; bottom: 0;
    width: 100%;
}

JQ設定

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 

$('.navbtn, .navClosebtn').click(function(){
    $('nav').slideToggle();
});

$(window).resize(function(){
    if($('.navbtn').is(':hidden')){
        $('nav').show();
    }else{
        $('nav').hide();
    }
});