前端開發css實戰:使用css制作網頁中的多級菜單
在日常工作中,大家都會遇到一些顯示隱藏類菜單,比如頁頭導航、二維碼顯示隱藏、文本提示等等......而這些效果都是可以使用純css實現的(而且非常簡單),使用css的優勢顯而易見,它可以使頁面中的javascript變得更少。
實現邏輯:
核心:hover偽類控制子元素的顯示隱藏,添加css3動畫; (沒錯就是這樣簡單)
:hover偽類,適用於當用戶指向一個元素時,例如用戶的鼠標指向一個段落p。當用戶鼠標離開元素時,恢復元素原有的樣式顯示
實現代碼:
<style type="text/css"> *{margin: 0; padding: 0;}
ul{ list-style: none; }
a{text-decoration: none;}
.nav{ height: 50px;
font-size: 14px;
background-color:#0081C2;
}
.nav ul{ width: 90%; margin: 0 auto;}
.nav ul li{
display: inline-block;
width: 15%; height:50px;
text-align: center; line-height: 45px;
position: relative;
}
/*menu相對li定位 並默認隱藏*/
.menu{ position: absolute;
left: 0; top:50px;
width: 100%; background-color: #005580;
line-height: 33px;
display: none;
}
.menu p{ width: 100%; height: 35px;}
.menu p a:hover{ color: #dfdfdf;}
.nav ul li a{display: block;
width: 100%; height: 100%;
color: #ffffff; text-align: center;
}
/*當li鼠標hover時顯示*/
.nav ul li:hover{ background-color: #00007D;}
.nav ul li:hover .menu{ display: block;}
</style>
<div class="nav">
<ul>
<li>
<a href="#">菜單選項一</a>
<div class="menu">
<p><a href="#">二級菜單1</a></p>
<p><a href="#">二級菜單2</a></p>
<p><a href="#">二級菜單3</a></p>
<p><a href="#">二級菜單4</a></p>
</div>
</li>
<li>
<a href="#">菜單選項二</a>
<div class="menu">
<p><a href="#">二級菜單1</a></p>
<p><a href="#">二級菜單2</a></p>
<p><a href="#">二級菜單3</a></p>
<p><a href="#">二級菜單4</a></p>
</div>
</li>
<li><a href="#">菜單選項三</a></li>
<li><a href="#">菜單選項四</a></li>
<li><a href="#">菜單選項五</a></li>
<li><a href="#">菜單選項六</a></li>
</ul>
</div>
效果:
來看看實現的思路:
.nav ul li:hover{ background-color: #00007D;} .nav ul li:hover .menu{ display: block;}
這就是核心;也就是這兩行css搞定了一個豎向的二級菜單,當li元素hover鼠標移上的時候將menu顯示,如果我們需要給它添加一個動畫效果,可以使用css3來搞定
.menu{ position: absolute; left: 0; width: 100%; background-color: #005580; line-height: 33px; z-index: -1; transition: all 500ms; //添加一個500ms的css3動畫效果 top: -200px; opacity: 0; }
.nav ul li:hover .menu{ top: 50px;opacity: 1;} //hover時改變他它的top與透明度
下面博主也給出javascript的寫法,這種寫法用在需要從服務端獲取較多數據的情況下,通過ajax異步獲取菜單數據,所以必須用到javascript事件控制二級菜單;
.nav ul li.active{ background-color: #00007D;} .nav ul li.active .menu{top: 50px;opacity: 1;}
$(".nav>ul>li").hover(function(){ //hover事件
....其他代碼
$(this).siblings("li").removeClass("active"); $(this).addClass("active"); //激活狀態 顯示menu },function(){ $(".nav>ul>li").removeClass("active"); });
最后總結:
css的偽類hover可以做出很多更有趣的效果。
當可以使用css解決一個效果的時候,應該盡量使用css解決,已減少javascript性能開銷
------------------------------------合理規划你的學習路線,是成功的不二法門----------------------------------------