HTML5導航欄側拉效果是一種非常流行且實用的Web設計技術，可以將頁面導航欄隱藏在屏幕旁邊，只需點擊頁面上的某個按鈕或鏈接，導航欄便會側滑進入視野。下面是一個簡單的HTML5導航欄側拉代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5導航欄側拉效果</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
header {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
#menu-toggle {
display: none;
}
nav {
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
background-color: #111;
padding: 30px;
transition: left 0.5s ease-in;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
margin-bottom: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
#menu-toggle:checked ~ nav {
left: 0;
}
@media screen and (min-width: 768px) {
#menu-toggle {
display: inline-block;
font-size: 26px;
cursor: pointer;
}
nav {
position: static;
width: auto;
height: auto;
background-color: transparent;
padding: 0;
transition: none;
left: 0;
}
nav ul {
display: flex;
align-items: center;
}
nav ul li {
margin: 0 10px;
margin-bottom: 0;
}
nav ul li a {
font-size: 16px;
opacity: 0.8;
transition: opacity 0.2s ease-in-out;
}
nav ul li a:hover {
opacity: 1;
}
}
</style>
</head>
<body>
<header>
<h1>Logo</h1>
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" ><i class="fa fa-bars"></i></label>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
</header>
</body>
</html>在這個代碼示例中，HTML5導航欄側拉效果是通過CSS實現的。當頁面的寬度小于 768 像素時，導航欄將隱藏在屏幕左側，并且只有在用戶點擊頁面上的菜單切換按鈕時才會顯示。此刻，<input> 元素的checked屬性將被設置為 true，這將觸發 CSS 中的偽類選擇器（ ~ ）。因此，我們使用#menu-toggle:checked ~ nav來選擇頁面上與菜單切換按鈕相鄰的<nav>元素，并設置其left屬性為0，使其呈現在屏幕上可見。同時，我們對<nav>設置一個過渡效果，使其顯示動態呈現效果。當屏幕寬度大于或等于768像素時，導航欄將顯示在屏幕上方，而不是隱藏在屏幕左側，該導航欄將采用更傳統的顯示狀態 。