CSS控制左側(cè)菜單展開是網(wǎng)站開發(fā)中常用的技術(shù)之一。使用CSS可以在頁(yè)面上實(shí)現(xiàn)交互效果和美觀的樣式。下面我們來看一下如何控制菜單的展開。

/*首先定義菜單整體的樣式*/
.menu {
width: 200px;
background-color: #fff;
height: 100%;
position: fixed;
left: -200px;
transition: all 0.3s ease-out;
}
/*菜單展開后的樣式*/
.menu.active {
left: 0;
}
/*鼠標(biāo)懸浮在菜單的樣式*/
.menu:hover {
left: 0;
}
/*定義菜單項(xiàng)的樣式*/
.menu-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
/*選中菜單項(xiàng)的樣式*/
.menu-item.active {
background-color: #eee;
}

上述代碼中，我們首先定義了菜單整體的樣式，并使用了CSS3的transition屬性實(shí)現(xiàn)菜單的平滑展開。當(dāng)菜單項(xiàng)被選中時(shí)會(huì)添加.active類名，從而改變菜單項(xiàng)的樣式。鼠標(biāo)懸浮在菜單上時(shí)會(huì)觸發(fā):hover偽類，菜單會(huì)展開。

接下來讓我們來看一下如何使用JavaScript來控制左側(cè)菜單的展開和隱藏。

// 獲取菜單元素
const menu = document.querySelector('.menu');
// 當(dāng)點(diǎn)擊菜單按鈕時(shí)，切換菜單的展開狀態(tài)
document.querySelector('.menu-button').addEventListener('click', function() {
menu.classList.toggle('active');
});

上述代碼中，我們首先獲取了菜單元素，然后給按鈕添加了點(diǎn)擊事件，每次點(diǎn)擊時(shí)判斷菜單的展開狀態(tài)并切換.active類名。這個(gè)邏輯可以根據(jù)實(shí)際需求來編寫。