干货教程 | 从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......