|
本帖最后由 老邮局 于 2015-7-23 20:44 编辑
两步走:首先分析下底部导航栏具有的特征,然后再考虑如何实现:
具有的特征:
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的第四行
- <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;
- }
复制代码 openHomeFrameGroup()很简单,里面有个slderbarCallback()后面再说吧,编辑器提醒我帖子超过限制了......
下一篇我们搞定header ,follow me......
文章导航:
从0开始写"脉脉"(一) —— 首页布局分析
从0开始写"脉脉"(二) —— 底部导航栏
从0开始写"脉脉"(三) —— 顶部导航栏
从0开始写"脉脉"(四) —— 再谈顶部导航栏
从0开始写"脉脉"(五) —— 内容页
|
本帖子中包含更多资源 您需要 登录 才可以下载或查看,没有帐号?立即注册
x
|