从0开始写"脉脉"(二) —— 底部导航栏

老邮局 · 发表于 2014-10-29 18:22:28

本帖最后由老邮局于 2015-7-23 20:44 编辑

》》更多视频教程请关注 www.9y.cm《《

两步走：首先分析下底部导航栏具有的特征，然后再考虑如何实现：

具有的特征：
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、显示图片和文字
Tips：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、按钮选中后更换图片
Tips：这里的“+”表示同级。在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、水平均匀分布
Tips：水平盒子模型

#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
}

复制代码

OK，上面提到的四步我们都做到了，我们看下效果可能是这样：
不怎么和谐，单选按钮的小圆圈我们得去掉它

input[type="radio"]{ //底部导航单选按钮小圆圈不显示，只是隐藏并不影响触发它
display:none!important;
}

复制代码

---------------------------------------------------------------------------------------------------------------------------------------------

Last，我们还剩下一个问题(如何实现中第三步描述的)：a标签和单选按钮绑在了一块，当a标签被选中，同时单选按钮被选中。我们看一下index.html的第四行