CSS 手機導航特效是制作移動端網頁時常用的一種效果，下面就來介紹一種簡單的實現方法。

code {
font-family: Consolas,Monaco,Andale Mono,monospace;
font-size: 16px;
}

首先，我們需要準備一個菜單按鈕和一個導航菜單。菜單按鈕可以使用一個 div 元素，并設置背景圖片以顯示菜單圖標。導航菜單則使用一個 ul 列表，并設置 display: none; 隱藏起來。

<div class="menu-button"></div>
<ul class="nav-menu">
<li><a href="#">菜單項1</a></li>
<li><a href="#">菜單項2</a></li>
<li><a href="#">菜單項3</a></li>
</ul>

接下來，我們可以使用 CSS 代碼實現菜單按鈕點擊后導航菜單的顯示和隱藏效果。首先要設置菜單按鈕的 position:fixed; 和 z-index:999;，使其在頁面中固定且顯示在最上層。然后，為菜單按鈕添加一個點擊事件，使用 jQuery 的 toggleClass() 方法來切換菜單按鈕的顯示樣式，并使用 slideToggle() 方法來顯示或隱藏導航菜單。

.menu-button {
position: fixed;
z-index: 999;
width: 40px;
height: 40px;
background-image: url("menu-icon.png");
background-size: cover;
}
.nav-menu {
display: none;
}
.show {
background-image: url("close-icon.png");
}
.menu-button.show + .nav-menu {
display: block;
}
$(".menu-button").click(function() {
$(this).toggleClass("show");
$(".nav-menu").slideToggle();
});

通過以上幾步，我們就可以實現一個簡單的 CSS 手機導航特效。當用戶點擊菜單按鈕時，導航菜單就會從頁面頂部滑落下來，并且菜單按鈕會切換成關閉按鈕；再次點擊菜單按鈕時，導航菜單會隱藏，并且菜單按鈕會恢復原樣。