HTML5 左側層疊菜單代碼
在前端開發中，菜單是非常重要的組件之一。左側層疊菜單可以用于管理網站內容、導航等場景。它結構簡單、易于使用，是前端開發中必不可少的一部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左側層疊菜單</title>
<style>
/*清除默認樣式*/
*{
margin: 0;
padding: 0;
}
/*設置菜單容器樣式*/
.menu-container{
width: 200px;
background-color: #f1f1f1;
position: fixed;
z-index: 1;
height: 100%;
overflow: auto;
}
/*設置菜單項樣式*/
.menu-item{
padding: 10px;
margin-bottom: 5px;
background-color: #ffffff;
color: #000000;
}
/*設置活動菜單項樣式*/
.menu-item.active{
background-color: #333333;
color: #ffffff;
}
</style>
</head>
<body>
<div class="menu-container">
<div class="menu-item active">菜單項1</div>
<div class="menu-item">菜單項2</div>
<div class="menu-item">菜單項3</div>
<div class="menu-item">菜單項4</div>
<div class="menu-item">菜單項5</div>
</div>
</body>
</html>上面是一個基本的左側層疊菜單的HTML+CSS代碼和樣式。這個菜單的樣式非常簡單，只需要幾個基本的CSS屬性，就可以做出精美的菜單。其中，我們使用的是position:fixed屬性將菜單固定在瀏覽器窗口的左側，而z-index屬性則使菜單層疊在其他元素上方。同時，我們也使用了overflow:auto屬性使得在菜單高度超過瀏覽器窗口高度時，能夠自動滾動。
在實際開發中，我們可以根據實際需求對菜單進行樣式和事件的改進。例如，我們可以通過JavaScript實現菜單項點擊后的高亮、菜單的展開和折疊等功能，從而為用戶提供更加友好的操作體驗。
上一篇vue組件css樣式
下一篇html5屬性設置