首先讓我們看一下點擊出現子菜單的效果如下圖:
點擊黃色的按鈕,出現子菜單如下圖:
讓我們先看一下佈局:
<div class="menu">
<div class="sign" id="sign"></div>
<div class="lis" id="lis">
<ul>
<li><a href="">one</a></li>
<li><a href="">two</a></li>
<li><a href="">three</a></li>
<li><a href="">four</a></li>
<li><a href="">five</a></li>
</ul>
</div>
</div>
CSS樣式如下:
ul{
padding-inline-start: 0px;
}
.menu{
margin: 0 auto;
background:#0DA795;
height: 40px;
width: 600px;
}
.sign{
width: 30px;
float: right;
margin-right: 20px;
margin-top: 8px;
height: 25px;
background: rgba(243,193,63,1.00);
border-radius: 5px;
position: relative;
cursor: pointer;//把光標設置成手的形狀
}
.lis{
position: absolute;
top:30px;
display: none;
}
.lis ul li{
list-style: none;
width: 600px;
line-height: 40px;
font-size: 14px;
text-align: center;
border-bottom: 1px solid #565656;
background:#EAEDD5;
}.lis a{
text-decoration: none;
color: black;
}
.lis a:hover{
color: #0da759;
}
CSS樣式裏面特別注意一下position(定位)。
Lis這個類裏面的display:none;因爲一開始子菜單是隱藏起來的。
JiavaScript部分如下:
1、先獲取它們的 ID,獲取它們的ID之後,給第一個ID(sigin)通過OnClick添加一個點擊事件;
2、在聲明一個變量i,第二個ID賦值於i,在用一個分支語句if……else,如果i等於none;那麼就執行第一條語句,如果不等於,就執行第二條語句。
這樣就達到了我們想要的效果,見實現代碼:
<script>
var biaozhi=document.getElementById("sign");
var li=document.getElementById("lis");
biaozhi.onclick=function(){
var i=li.style.display;
if (i=="none"){
li.style.display="block";//第一條語句
}else{
li.style.display="none";//第二條語句
}
}
</script>