現在越來越多的網站都采用了HTML5技術，而在這些網站中，手機導航菜單是必不可少的。為了增強用戶體驗，很多開發者設計出了一些很酷的手機導航菜單特效。

//HTML代碼//CSS代碼
.menu {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transform: translateY(-100%);
transition: all 0.3s ease-in-out;
}
.menu-open {
display: none;
}
.menu-open-button {
position: fixed;
z-index: 1001;
top: 20px;
left: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
cursor: pointer;
}
.menu-open-button:hover .hamburger-1,
.menu-open-button:hover .hamburger-2,
.menu-open-button:hover .hamburger-3 {
background-color: #555;
}
.menu-item {
font-size: 54px;
font-weight: 700;
line-height: 1.3;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.2em;
padding: 20px;
margin: 15px;
color: #fff;
background-color: #555;
border-radius: 10px;
text-decoration: none;
transition: background-color 0.3s ease-in-out;
pointer-events: none;
opacity: 0;
transform: translateY(-100%);
transition: all 0.3s ease-in-out 0.2s;
}
.menu-open:checked ~ .menu {
pointer-events: auto;
opacity: 1;
transform: translateY(0%);
}
.menu-open:checked ~ .menu-item {
pointer-events: auto;
opacity: 1;
transform: translateY(0%);
}
@media (max-width: 768px) {
.menu-item {
font-size: 34px;
padding: 10px;
margin: 10px;
}
}

這是一個非常簡單的導航菜單特效，只需添加一個checkbox和相應的CSS動畫即可實現。當用戶點擊菜單按鈕時，菜單會滑動進入頁面，并展示所有菜單項。點擊菜單按鈕再次關閉菜單。這個特效能提供更好的用戶體驗，同時保持了網站的簡潔感。