在本教程中，您將使用 JavaScript 和 CSS 創建可擴展的側面導航菜單。最終產品如下圖所示：
1. 創建標記
首先，讓我們為側邊菜單添加一些標記：
<div id="sideNavigation" class="sidenav">
<a href="#" class="close-btn">×</a>
<a href="#">About</a>
<a href="#">Features</a>
<a href="#">Contact Us</a>
</div>
<nav class="topnav">
<a href="#" class="ham-icon">
<svg width="30" height="30" id="icoOpen">
<path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
</svg>
</a>
</nav>
<section id="main">
<h1>This Side Navigation Menu Looks Good!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
登錄后復制
在這里你可以看到我們使用sidenav類創建了一個側邊菜單div。接下來，我們通過 <nav> 標簽添加了實際的頂部欄導航，并且我們使用 SVG 作為側面菜單圖標。
請記住將網站的所有內容放入 div id="main" 容器中，以便它向右滑動。
2. 編寫 JavaScript 代碼
接下來，讓我們添加 JavaScript，該 JavaScript 將使用 ham-icon 類偵聽漢堡包圖標上的單擊事件，以及側面導航菜單滑到屏幕上后出現的關閉按鈕。
document.querySelector("a.ham-icon").addEventListener("click", function(event){
document.getElementById("sideNavigation").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
});
document.querySelector("a.close-btn").addEventListener("click", function(event){
document.getElementById("sideNavigation").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
});
登錄后復制
單擊漢堡包圖標應該會顯示側面導航。我們通過將導航的寬度設置為 250px 并同時向主網站內容添加 250px 的左邊距來實現此目的。
單擊關閉按鈕應該會隱藏側面導航。為此，我們將導航的寬度更改回 0，同時將主網站內容的左邊距設置為 0。
3. 使用 CSS 樣式
最后，我們需要使用一些 CSS 來設置側邊菜單和鏈接的頁面樣式。 CSS 會將所有網頁元素正確放置在我們想要的位置。我們還將在 transition 屬性的幫助下應用一些簡單的動畫。讓我們一次看一下 CSS 的一部分。
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 4rem;
transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
font-family: "Bebas Neue";
}
.sidenav a {
padding: 0.5rem 1rem;
text-decoration: none;
color: #bdbdbd;
display: block;
transition: 0.4s;
white-space: nowrap;
font-size: 2rem;
}
.sidenav a:hover {
color: white;
background: #9e9e9e;
}
登錄后復制
我們將側邊導航的height設置為100%，并將其初始width設置為0以使其隱藏。但是，只有當 overflow-x 屬性的值設置為 hidden 時，側面導航的內容才會保持隱藏。
過渡屬性可確保側面導航寬度的變化不會突然發生，并且緩動功能使其具有一點彈性。
對于側面導航內的鏈接，我們將 white-space 屬性的值設置為 nowrap，以便菜單文本不會溢出多行。
.sidenav .close-btn {
position: absolute;
top: -1rem;
right: 1rem;
font-size: 5rem;
}
.sidenav .close-btn:hover {
background: initial;
transform: scale(1.2);
}
登錄后復制
上面的 CSS 樣式將我們的關閉按鈕與側面導航中的其他鏈接分開。我們對關閉按鈕應用了絕對定位，并防止其背景在懸停時變成淺灰色。當用戶將鼠標懸停在其上方時，它的大小還會放大 20%。
現在，以下 CSS 將通過使用相同的過渡持續時間和相同的緩動函數來確保主要內容位置的移動與導航菜單同步。將 overflow-x 屬性的值設置為 hidden 可確保不會因內容移動而出現水平滾動條。
#main {
transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
padding: 20px;
width: 100%;
}
body {
overflow-x: hidden;
}
登錄后復制
我們還可以借助以下 CSS 為漢堡包圖標添加一點旋轉運動。它在 0.5 秒的時間內將漢堡包圖標旋轉 180 度。
a svg {
transition: all 0.5s ease;
}
a svg:hover {
transform: rotate(180deg);
}
登錄后復制
最后，讓我們通過使用以下 CSS 調整鏈接的間距和大小來使導航菜單具有響應能力。它確保菜單不會在垂直空間較小的屏幕上超出范圍。
@media screen and (max-height: 480px) {
.sidenav {
padding-top: 3rem;
}
.sidenav a {
font-size: 1.5rem;
}
}
登錄后復制
此時您的導航菜單應該類似于以下 CodePen 演示。
4. 移除幻燈片
要使菜單顯示時沒有幻燈片動畫，只需更改 CSS 屬性 transition，如下面的縮寫形式所示：
.sidenav {
transition: 0s;
}
#main {
transition: margin-left 0s;
}
登錄后復制
這將使更改立即出現，因為 transition 中沒有指定延遲。我們使用的默認值是 0.5s。
結論
創建側邊菜單只需要幾行代碼，不需要使用很多資源。使代碼能夠響應不同的設備屏幕分辨率，只需通過針對特定情況添加媒體查詢來修改 CSS。
為了更進一步，您可能希望使用 Bootstrap 或 Bulma 等 CSS 框架來設計菜單樣式。
本文已根據 Monty Shokeen 的貢獻進行了更新。 Monty 是一位全棧開發人員，他也喜歡編寫教程和學習新的 JavaScript 庫。
以上就是使用滑動側導航菜單創建響應式設計的詳細內容，更多請關注www.92cms.cn其它相關文章！
