html--簡單左側菜單欄的實現

 

(圖片地址：https://panjiachen.github.io/vue-element-admin/#/dashboard)
如圖示這種豎向排列的菜單欄，展示效果比較好，而且交互比較直觀，下面來介紹一下實現步驟
1.先把整體布局寫出來
1.1由於子菜單展開收縮會變化div大小，所以使用flex彈性盒子。

<div class="box">
　　<ul class="ulList">
　　　　<li class="liList">
　　　　　　<p onclick="menu_active(ulOne)">這是第一個子菜單</p>
　　　　　　<ul class="childUl" id="ulOne" style="display: none;">
　　　　　　　　<li>選項1.1</li>
　　　　　　　　<li>選項1.2</li>
　　　　　　</ul>
　　　　</li>
　　　　<li class="liList">
　　　　　　<p onclick="menu_active(ulTwo)">這是第二個子菜單</p>
　　　　　　<ul class="childUl" id="ulTwo" style="display: none;">
　　　　　　　　<li>選項2.1</li>
　　　　　　　　<li>選項2.2</li>
　　　　   </ul>
　 　　 </li>
　　　　<li class="liList">
　　　　　　<p onclick="menu_active(ulThree)">這是第三個子菜單</p>
　　　　　　<ul class="childUl" id="ulThree" style="display: none;">
　　　　　　　　<li>選項3.1</li>
　　　　　　　　<li>選項3.2</li>
　　　　　　　　<li>選項3.3</li>
　　　　　　</ul>
　　　　</li>
　　　　<li class="liList">
　　　　　　<p onclick="menu_active(ulFour)">這是第四個子菜單</p>
　　　　　　<ul class="childUl" id="ulFour" style="display: none;">
　　　　　　　　<li>選項4.1</li>
　　　　　　</ul>
　　　　</li>
　　</ul>
</div>

*{
　　margin: 0;
　　padding: 0;
}
.box{
　　width: 300px;
　　top: 10%;
　　left: 10%;
　　display: flex;
　　position: absolute;
}
.ulList{
　　width: 100%;
　　display: flex;
　　left: 20%;
　　top: 20%;
　　flex-direction: column;
　　background-color: grey;
　　position: absolute;
　　list-style: none;
}
.liList{
　　width: 100%;
　　height:100px;
　　display: flex;
　　flex-direction: column;
　　background-color: #FF9900;
　　position: relative;
}
.liList p{
　　font-size: 20px;
　　text-align: center;
}

 

1.2先把子菜單下的ul隱藏。
這里要注意一點：list-style設置為none時，會發現li前邊的點雖然消失了，但還是占着空間，如下圖所示

 

出現此原因是因為默認情況下，li是有margin和padding的，此時只需要給其設置都為0即可，為了方便，直接全局修改：

*,body{
　　margin: 0;
　　padding: 0;
}

 

1.3給一級ul設置了flex，其下的每一個選項下的子菜單欄是不需要再設置flex的，只需要給每一個ul設置寬度，然后每一個li設置相同用的高度和寬度即可。

.liList ul{
width: 100%;
position: relative;
}
.liList ul li{
width: 100%;
height: 60px;
line-height: 60px;
background-color: #FF4400;
list-style: none;
text-align: center;
position: relative;
}

 

2.給每一個菜單選項添加點擊事件，選擇展開或者隱藏子菜單
這里使用到選擇語句進行判斷

function menu_active(ulId){
　　if(ulId.style.display == "none"){
　　　　ulId.style.display = "block"
　　}else{
　　　　ulId.style.display = "none"
　　}
}

 

寫到這里，代碼基本寫完了，那就渲染一下看看效果

 

誒？為什么效果和我想得不一樣？
這里會發現二級菜單展示的時候，會被一級菜單覆蓋掉。仔細尋找后發現問題出在高度設置上

.liList{
　　width: 100%;
　　line-height: 80px;
　　display: flex;
　　flex-direction: column;
　　background-color: #FF9900;
　　position: relative;
}

 

給每一個一級菜單設置了一個100px的高度！這就使得無論怎么改動二級菜單，始終是和一級菜單沖突的，把它去掉就好了。

 

好啦，一個使用ul列表的豎向菜單欄就做好了✌！
當然你也可以自己渲染的更美觀一些✌✌✌
后續如果要給每一個菜單選項添加鏈接的話也是不難的。

--2022.3.26 21:44