本節(jié)將分享如何從0實(shí)現(xiàn)一個(gè)響應(yīng)式導(dǎo)航欄。
響應(yīng)式導(dǎo)航欄是靜態(tài)網(wǎng)站特別常見(jiàn)的需求，多數(shù)網(wǎng)站都是基于Twitter推出的Bootstrap硝皂。所以掌握從0開(kāi)發(fā)一個(gè)響應(yīng)式導(dǎo)航欄的前端很少拉盾，本節(jié)將帶大家一探究竟。
什么是響應(yīng)式導(dǎo)航欄
要想 知道什么是響應(yīng)式導(dǎo)航欄帖池，我們需要從兩個(gè)方面去理解：
- 首先，是導(dǎo)航欄的定義：指位于頁(yè)面頂部或者側(cè)邊區(qū)域的一排水平導(dǎo)航按鈕吭净，起著鏈接站點(diǎn)或者軟件內(nèi)的各個(gè)頁(yè)面的作用睡汹；
- 其次，是響應(yīng)式的定義：響應(yīng)式確切稱為響應(yīng)式布局寂殉，是Ethan Marcotte在2010年5月份提出的一個(gè)概念囚巴，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本，它是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的彤叉。
結(jié)合響應(yīng)式布局和導(dǎo)航欄的概念庶柿，我們就知道我們要實(shí)現(xiàn)的是一組兼容不同終端的導(dǎo)航按鈕。
布局的常識(shí)
網(wǎng)頁(yè)制作最重要的就是網(wǎng)頁(yè)布局秽浇，先布局浮庐，后細(xì)節(jié)，只有在選擇了合適的網(wǎng)站布局以后柬焕，才可以順利的進(jìn)行接下來(lái)的工作审残。
好的網(wǎng)頁(yè)布局能夠讓前端開(kāi)發(fā)人員更好地把握網(wǎng)頁(yè)的整體結(jié)構(gòu)，提高代碼的書寫效率斑举，復(fù)用性搅轿，和后期維護(hù)。
常見(jiàn)的布局有：
- 靜態(tài)布局：即最開(kāi)始的網(wǎng)頁(yè)設(shè)計(jì)富玷，所有的網(wǎng)頁(yè)尺寸都用px作為單位璧坟；
- 流式布局：使用%百分比定義寬度，頁(yè)面元素寬度按照屏幕分辨率進(jìn)行適配調(diào)整赎懦，元素大小會(huì)變化但整體布局不便雀鹃，需要配合max-width或min-width等屬性控制尺寸流動(dòng)范圍，如柵格系統(tǒng)励两；
- 自適應(yīng)布局：分別為不同的屏幕分辨率定義布局黎茎，即創(chuàng)建多個(gè)靜態(tài)布局，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)范圍伐蒋；
- 響應(yīng)式布局：結(jié)合流水布局和自適應(yīng)布局，搭配媒體查詢技術(shù)的使用迁酸，元素位置和大小都會(huì)變先鱼，適應(yīng)pc和移動(dòng)端，和自適應(yīng)一樣奸鬓，都需要檢測(cè)設(shè)備焙畔，根據(jù)不同設(shè)備展示不同的樣式；
- 彈性布局：包裹文字各元素的尺寸采用em/rem(為順應(yīng)不同網(wǎng)頁(yè)字體大小展現(xiàn)而產(chǎn)生的串远，em相對(duì)其父元素宏多，rem始終相對(duì)頁(yè)面根元素)做單位，而頁(yè)面主要?jiǎng)澐謪^(qū)域的尺寸仍使用百分?jǐn)?shù)或px澡罚，瀏覽器默認(rèn)字體16px伸但，所以1 em = 16px，為了計(jì)算方便通常將頁(yè)面根元素設(shè)置為62.5%留搔，1 rem = 10px更胖。
布局選擇建議：
- 如果只做PC端，靜態(tài)布局是最好的選擇；
- 如果只做移動(dòng)端却妨，且高度和元素間距不高饵逐，彈性布局是最好的選擇；
- 如果兼容PC和移動(dòng)端彪标，響應(yīng)式布局是最好的選擇倍权。
顯然，我們要做的響應(yīng)式導(dǎo)航欄就是要兼容多端捞烟，所以需要采用響應(yīng)式布局薄声。
如何實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄
- 設(shè)置 Meta 標(biāo)簽：大多數(shù)移動(dòng)瀏覽器將HTML頁(yè)面放大為寬的視圖（viewport）以符合屏幕分辨率。你可以使用視圖的meta標(biāo)簽來(lái)進(jìn)行重置坷襟。下面的視圖標(biāo)簽告訴瀏覽器奸柬，使用設(shè)備的寬度作為視圖寬度并禁止初始的縮放。在
<head>標(biāo)簽里加入這個(gè)meta標(biāo)簽婴程。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
user-scalable = no 屬性能夠解決 iPad 切換橫屏之后觸摸才能回到具體尺寸的問(wèn)題廓奕。
- 首先，設(shè)定頁(yè)面的大體布局档叔，在index.html文件中加入如下內(nèi)容：
<header>
<nav>
<div class="navbar-header">
<a href="#" class="navbar-logo">Logo</a>
<button class="navbar-toggle" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="navList">
<li><a href="#" class="active">首頁(yè)</a></li>
<li><a href="#">產(chǎn)品服務(wù)</a></li>
<li><a href="#">聯(lián)系我們</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>
</div>
</nav>
</header>
<section class="content-wrap">
<!-- 網(wǎng)站內(nèi)容 -->
<img src="skills.jpg" alt="前端技能圖">
</section>
<footer class="foot-wrap">
<p>?2018 慕課網(wǎng)學(xué)習(xí) </p>
<p>京ICP備180043275號(hào)-2</p>
</footer>
其中桌粉，header標(biāo)簽包含的是導(dǎo)航欄的部分，section標(biāo)簽包含的是前端技能圖的部分衙四，footer標(biāo)簽包含的是頁(yè)腳部分铃肯。
然后在index.css中，添加如下的css樣式：
* {
box-sizing: border-box;
}
body {
margin: 0;
}
button:focus {
outline: none;
}
a {
text-decoration: none;
color: white;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav {
height: 60px;
padding: 20px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
background-color:#171717;
}
.navbar-header {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.navbar-toggle {
height: 37px;
width: 30%;
text-align: center;
display: none;
border: none;
background-color: #171717;
}
.navbar-toggle span {
display: block;
width: 30px;
margin: 3px 0;
border-bottom: 2px solid #fff;
}
.navbar-logo {
display: block;
}
.navbar-nav li {
display: inline-block;
padding: 0.5em;
}
.navbar-nav li a{
border-radius:3px;
padding:4px 8px;
}
.navbar-nav li a:hover{
color:#171717;
background-color:#fff;
box-shadow:1px 1px 1px 0 #fff
}
.active {
color:#171717;
background-color:#fff;
box-shadow:1px 1px 1px 0 #fff
}
.content-wrap {
height: calc(100% - 196px);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.content-wrap img{
height: 100%;
width: auto;
}
.foot-wrap {
width: 100%;
height: 120px;
line-height: 50px;
text-align: center;
background-color: #695f5f;
}
@media(max-width: 768px) {
nav {
display: block;
padding: 0px;
}
.navbar-header {
padding: 10px 0px 10px 10px;
}
.navbar-toggle {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 30%;
text-align: center;
}
.collapse {
display: none;
}
.navbar-collapse {
height: 100%;
width:30%;
right: 0;
position:fixed;
background-color:#171717;
}
.navbar-collapse li {
width: 100%;
border-bottom: 1px solid #fff;;
text-align: center;
}
}
最后传蹈，在在index.html文件中的body標(biāo)簽的底部添加js控制的相關(guān)代碼：
<script>
var toggleButton = document.querySelector('.navbar-toggle');
var collapsedElm = document.querySelector('.navbar-collapse');
toggleButton.addEventListener('click', function() {
collapsedElm.classList.toggle('collapse');
});
var navList = document.getElementById('navList');
var oList=navList.getElementsByTagName("a");
for(var i=0;i<oList.length;i++){
oList[i].onclick=function(){
for(var j=0;j<oList.length;j++){
oList[j].className="";
}
this.className+="active";
}
}
</script>
最終效果
-
pc 端效果：
Screen Shot 2019-01-06 at 1.47.02 PM.png -
h5移動(dòng)端效果：
Screen Shot 2019-01-06 at 1.47.28 PM.png
點(diǎn)擊折疊導(dǎo)航欄后：
Screen Shot 2019-01-06 at 1.48.53 PM.png
