您当前的位置:
干货教程 | 从0开始写"脉脉"（二）·底部导航栏
各位小伙伴们，在上一篇《从0开始写“脉脉”（一）·首页布局分析》中“老邮局”把脉脉的页面布局，从header、main到footer都给大家了相对比较详尽的分析。
那么今天咱们书接上回，和“老邮局”一起来分析下，脉脉的“底部导航栏”都有哪些特性？以及这些特性是如何实现的？
说正题前，我们先整理一下思路，看看写导航栏可以分为哪些步骤？
1.分析底部导航栏所具有的特性；
2.思考这些特性如何实现。
导航栏的特征：
1.首先底部导航栏有一个灰色的背景图片；
2.四组按钮都由两部分（图标和文字）组成，点选不同按钮会打开不同的“窗口组”；
3.按钮未被选中为灰色，选中后换为蓝色图标、文字颜色加深；
4.四组按钮水平均匀分布。
导航栏特性实现方式：
1.背景图片直接用css设置就可以了；
2.每组按钮都由一个图标和文字组成，我们把这两个看成一个整体，用a标签包裹住分别显示图标和文字的标签，当a标签被选中后，触发onclick事件函数处理；
3.此步可以和2合并，用js替换图片。脉脉用的是单选按钮和css的配合来实现，它将a标签和单选按钮绑在了一块，当a标签被选中，同时单选按钮被选中。也就是说每个a标签都对应一个单选按钮，a标签和单选按钮各司其职，a标签打开"窗口组"，单选按钮更新图片；
4.使用css3的水平盒子模型，占用比例为1:1:1:1。
脉脉底部导航栏（请收起你们的口水，忽略那两张妹子照片）
先看下如何布局：
index.html
1. <div id="footer">
2. <form name="Menu"> //四个按钮的父类，这里为底部导航背景图片
3. <input type='radio' name='footers' id='ifooter_home' checked='true' /> // 第一组按钮
4. <a tapmode="homeActive" onclick="jumpFrame('home');"> // 用a标签包裹住里面的图标和文字标签
5. <p class="home"></p> // 图标
6. <center id='hic'>首页</center> // 文字
7. </a>
8. <input type='radio' name='footers' id='ifooter_jobs' /> // 第二组按钮
9. <a tapmode="jobsActive" onclick="jumpFrame('jobs');">
10. <p class="jobs"></p>
11. <center>工作</center>
12. </a>
13. <input type='radio' name='footers' id='ifooter_contacts' /> // 第三组按钮
14. <a tapmode="contactsActive" onclick="jumpFrame('contacts');">
15. <p class="contacts"></p>
16. <center>人脉</center>
17. </a>
18. <input type='radio' name='footers' id='ifooter_myself' /> // 第四组按钮
19. <a tapmode="myselfActive" onclick="jumpFrame('myself');">
20. <p class="myself"></p>
21. <center>个人</center>
22. </a>
23. </form>
24. </div>
复制代码
【行3】 每组按钮旁边配上个单选按钮，当按钮(a标签)被选中，同时触发该单选按钮，而单选按钮被选中则通过css中的设置更换一张蓝色图片；
【行4】 按钮(a标签)被选中，触发onclick事件，执行jumpFrame(‘home’)；
【行5】 导航按钮图片，默认p标签是没有宽高的，在css中我们给他设置宽高，这样图片才能显示出来；
【行6】 按钮对应文字。
依次实现上面的4个步骤：
1.加载背景图片
#footer form{ // 这里是给底部导航加背景图片
padding-top:0.5625em; // 内部子元素距父元素顶部距离(上边距)
height:2.5625em; // 背景图片高度
background:url(../image/footer_menu.png) repeat-x; // 背景图片素材延x轴平铺
-webkit-background-size:auto 3.125em;
font-weight:bold;
}
复制代码
2.显示图片和文字
a、span等标签默认是无宽度和高度的，在使用前需要先给display：block属性，然后定义的宽和高才能生效。
footer,header,section,dialog,menu,a,label,strong,var,em,del,time,figcaption,figure,pre,img,small,mark,cite,code,fieldset,button{ //都给他设置了，后面还得用到
display:block;
}
复制代码
①加载图片：
#footer input[type="radio"] + a p{ // 加载按钮图片，给p标签设置宽高，前面提过其默认是无宽高的
height:1.4375em;
background-repeat:no-repeat; // 无需重复
background-position:center top;
-webkit-background-size:auto 1.55em;
-webkit-transition-duration:200ms;
}
.home{ // 给第一个导航按钮加载图片
background-image:url('../image/tab_feeds_normal.png');
}
.jobs{ // 给第二个导航按钮加载图片
background-image:url('../image/tab_jobs_normal.png');
}
.contacts{ // 给第三个导航按钮加载图片
background-image:url('../image/tab_contacts_normal.png');
}
.myself{ // 给第四个导航按钮加载图片
background-image:url('../image/tab_myself_normal.png');
}
复制代码
②加载文字：
#footer input[type="radio"] + a center{ // 默认情况下，图标下文字样式
font-size:0.75em; // 给p一个高度
color:#000;
opacity:0.3; // 默认情况下透明度
-webkit-transition-duration:200ms;
}
#footer input[type="radio"]:checked + a center{ // 被选中后的透明度
opacity:1;
}
复制代码
3.按钮选中后更换图片
这里的“+”表示同级，在html中可以看出，单选按钮和a标签是同级的。
意思是当单选按钮被选中后，其同级的a标签下的拥有类名为home的p标签更换图标。
#footer input[type="radio"]:checked + a p.home{ // 按钮被选中后，更换蓝色图片
background-image:url('../image/tab_feeds_selected.png');
}
#footer input[type="radio"]:checked + a p.jobs{ // 同上
background-image:url('../image/tab_jobs_selected.png');
}
#footer input[type="radio"]:checked + a p.contacts{
background-image:url('../image/tab_contacts_selected.png');
}
#footer input[type="radio"]:checked + a p.myself{
background-image:url('../image/tab_myself_selected.png');
}
复制代码
4.水平均匀分布
水平盒子模型
#main,#header menu,form,#main > footer,#main > footer > div{ //这里干脆将后面将会用到的一块设置了吧，包括header
display:-webkit-box !important; // 开启盒子模型
display: box !important;
-webkit-box-orient: horizontal; //默认为水平方式，所以这句可以省略
}
#content,form a,#shops ol,#main > footer div,#shop_item,#shop_item li{
box-flex:1;
-webkit-box-flex:1; //比例，#footer > form 下面四个a标签，比例就是1：1：1：1
}
复制代码
上面提到的四步我们都做到了，但看了效果之后发现，单选按钮的小圆圈不太和谐，我们需要把它去掉：
input[type="radio"]{ //底部导航单选按钮小圆圈不显示，只是隐藏并不影响触发它
display:none!important;
}
复制代码
---------------------------------------------------------------------------------------------------
最后我们还剩下一个问题，如何实现第三步描述？
a标签和单选按钮绑在了一块，当a标签被选中，同时单选按钮被选中。我们看一下index.html的第四行：
<a tapmode="homeActive" onclick="jumpFrame('home');">
复制代码
再看下jumpFram()的实现：
function jumpFrame(url){
radioSelect('ifooter_' + url); // 打开底部导航对应的顶部标题导航
radioSelect('iheader_' + url);
if (url == 'home') {
openHomeFrameGroup(0); // 打开home窗口组的0号窗口
} else if (url == 'jobs') {
openJobsFrameGroup(0);
} else if (url == 'myself') {
openMyselfFrameGroup(0);
} else if (url == 'contacts') {
openContactsFrame();
}
}
function radioSelect(id) { // 触发单选按钮
var ret = 0;
var e = $api.byId(id);
if (e && !e.checked) {
e.checked = true;
ret = 1;
}
return ret;
}
复制代码
今天的内容就到这了，下一篇我们搞定header ，follow me......