標(biāo)簽為例：<body>
<div id="wrapper">
<a href="#" id="menu-toggle">Menu</a>
...</div>
</body>
接下來，在CSS中給這個(gè)按鈕添加樣式，使它看起來像一個(gè)可以點(diǎn)擊的按鈕：
#menu-toggle {
display: block;
width: 50px;
height: 50px;
background-color: #ccc;
color: #fff;
text-align: center;
line-height: 50px;
border-radius: 50%;
position: fixed;
top: 20px;
left: 20px;
z-index: 1000;
}然后，在CSS中添加側(cè)邊欄的樣式。側(cè)邊欄應(yīng)當(dāng)在頁(yè)面加載時(shí)就隱藏起來，只有在按鈕被點(diǎn)擊時(shí)才會(huì)滑出。這個(gè)可以通過CSS的“transform”屬性來實(shí)現(xiàn)。這里的側(cè)邊欄使用一個(gè)固定寬度的元素來表示，實(shí)際應(yīng)用中可以根據(jù)需求自定義寬度：
#wrapper {
position: relative;
overflow-x: hidden;
}
#sidebar {
position: fixed;
width: 250px;
height: 100%;
top: 0;
left: -250px;
background-color: #333;
transform: translateX(-100%);
transition: all 0.3s ease-in-out;
z-index: 999;
}
#sidebar.show {
transform: translateX(0);
}這樣，當(dāng)按鈕被點(diǎn)擊時(shí)，側(cè)邊欄就會(huì)從頁(yè)面左側(cè)向右滑出。點(diǎn)擊按鈕時(shí)，我們需要在JavaScript中添加一個(gè)事件監(jiān)聽器來處理這個(gè)行為，如下所示：
var menuToggle = document.getElementById('menu-toggle');
var sidebar = document.getElementById('sidebar');
menuToggle.addEventListener('click', function(event) {
event.preventDefault();
sidebar.classList.toggle('show');
});這就是完整的HTML5側(cè)邊欄滑動(dòng)菜單的實(shí)現(xiàn)代碼。
