HTML5導(dǎo)航欄側(cè)拉效果是一種非常流行且實(shí)用的Web設(shè)計(jì)技術(shù)，可以將頁面導(dǎo)航欄隱藏在屏幕旁邊，只需點(diǎn)擊頁面上的某個(gè)按鈕或鏈接，導(dǎo)航欄便會(huì)側(cè)滑進(jìn)入視野。下面是一個(gè)簡單的HTML5導(dǎo)航欄側(cè)拉代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5導(dǎo)航欄側(cè)拉效果</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>在這個(gè)代碼示例中，HTML5導(dǎo)航欄側(cè)拉效果是通過CSS實(shí)現(xiàn)的。當(dāng)頁面的寬度小于 768 像素時(shí)，導(dǎo)航欄將隱藏在屏幕左側(cè)，并且只有在用戶點(diǎn)擊頁面上的菜單切換按鈕時(shí)才會(huì)顯示。此刻，<input> 元素的checked屬性將被設(shè)置為 true，這將觸發(fā) CSS 中的偽類選擇器（ ~ ）。因此，我們使用#menu-toggle:checked ~ nav來選擇頁面上與菜單切換按鈕相鄰的<nav>元素，并設(shè)置其left屬性為0，使其呈現(xiàn)在屏幕上可見。同時(shí)，我們對(duì)<nav>設(shè)置一個(gè)過渡效果，使其顯示動(dòng)態(tài)呈現(xiàn)效果。當(dāng)屏幕寬度大于或等于768像素時(shí)，導(dǎo)航欄將顯示在屏幕上方，而不是隱藏在屏幕左側(cè)，該導(dǎo)航欄將采用更傳統(tǒng)的顯示狀態(tài) 。