CSS左側菜單折疊按鈕是網頁設計中比較常見的交互方式,可以讓用戶方便地收起和展開菜單。下面是折疊按鈕的HTML結構和CSS樣式:
<div class="menu"> <div class="menu-header"> <button class="collapse-btn">折疊</button> </div> <ul class="menu-list"> <li>菜單項1</li> <li>菜單項2</li> <li>菜單項3</li> </ul> </div> .menu { width: 200px; background-color: #f2f2f2; } .menu-header { height: 40px; line-height: 40px; background-color: #ddd; padding: 0 10px; } .collapse-btn { float: right; } .menu-list { margin: 0; padding: 0; list-style: none; } .menu-list li { padding: 10px; }
折疊按鈕通常放在菜單頭部,用戶點擊按鈕即可收起或展開菜單列表。CSS樣式中使用了浮動和偽類等技巧,使得按鈕能夠完美地與菜單頭部對齊。
在實際應用中,折疊按鈕的樣式可以根據具體需求進行調整,例如改變按鈕的顏色、大小、圖標等。同時,也可以通過JavaScript來實現更復雜的交互效果,例如動畫過渡、滑動展開等。