|
|
|
|
|
本文解釋一款最常見的簡單大方的導(dǎo)航菜單,這個導(dǎo)航菜單是響應(yīng)式的,能同時滿足在PC和移動端使用。
效果圖
PC端導(dǎo)航菜單
移動端導(dǎo)航菜單
示例介紹
本示例導(dǎo)航菜單由CSS3實(shí)現(xiàn),它是響應(yīng)式的,能同時滿足PC端和移動端的使用要求。
HTML代碼
<div class="c-nav">
<div class="container navFlex">
<div class="flexItem"> <img class="logo" src="logo.png" /> </div>
<div class="flexItem hiden"> <img class="btnImg" src="navBtn.png" /> </div>
<div class="flexItem show">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">品牌故事</a></li>
<li><a href="#">產(chǎn)品中心</a></li>
<li><a href="#">網(wǎng)上商城</a></li>
<li><a href="#">招商加盟</a></li>
<li><a href="#">行業(yè)新聞</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</div>
</div>
</div>
最外層div
是導(dǎo)航條區(qū)域(寬度設(shè)置為100%,即是滿屏)。
第二層div
是導(dǎo)航條容器,位置從logo圖片開始,一直到最后一個菜單名結(jié)束。
有兩個logo的div
,前面的是PC端顯示,第二個是移動端顯示。
ul li
是導(dǎo)航菜單的內(nèi)容。
CSS
.c-nav
設(shè)置導(dǎo)航欄寬度、背景顏色。
.c-nav{
width: 100%;
background-color: rgba(176,204,243,0.8);
}
.navFlex
設(shè)置顯示方式、文字顏色等樣式。
.c-nav .navFlex{
display: flex;
display: -webkit-flex;
justify-content:space-between;
-webkit-justify-content: space-between;
align-items: center;
-webkit-align-content: center;
color: black;
}
ul li
設(shè)置菜單容器樣式,包括位置、字體等樣式。
.c-nav ul li a:hover{...}
設(shè)置菜單鼠標(biāo)懸停時顯示的下橫線的顏色。
.c-nav ul{
list-style: none;
margin-bottom: 0px;
padding-left: 0px;
}
.c-nav ul li{
padding: 15px 0px 15px 0px;
margin-left: 30px;
display: inline-block;
}
.c-nav ul li a{
color: black;
padding-bottom: 2px;
text-decoration: none;
border-bottom: 3px solid transparent;
}
.c-nav ul li a:hover{
border-bottom: 3px solid #000000;
}
JavaScript
本示例用到一點(diǎn)jQuery編程,它主要是監(jiān)控窗口大小變化并對顯示PC還是移動導(dǎo)航做出判斷。另外,對移動端的導(dǎo)航開關(guān)按鈕點(diǎn)擊動作給予響應(yīng),顯示或關(guān)閉導(dǎo)航菜單。
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//用于判斷導(dǎo)航欄的狀態(tài)
var toggle = true;
//導(dǎo)航欄按鈕
$('.btnImg').click(function()
{
if (toggle)
{
$('.btnImg').css("border", "1px solid #b0ccf3");
toggle = false
}
else
{
$('.btnImg').css("border", "1px solid transparent");
toggle = true;
}
$(".show").slideToggle(300);
})
//窗口大小發(fā)生改變
$(window).resize(function()
{
//獲取窗口寬度
var windSize = $(window).width();
if (windSize > 576)
{
$(".show").slideDown(0);
}
else
{
$(".show").slideUp(0);
}
});
</script>
總結(jié)
本文介紹了CSS3 PC/移動響應(yīng)式網(wǎng)頁導(dǎo)航菜單,此菜單非常常見,是一個比較大眾化的用例。喜歡的朋友可以直接下載源碼備用。
相關(guān)文章