底部工具栏可以带来很多好处,高度集中网站资源,提供用户更加便捷的操作通道,信息也更加及时有效,底部工具栏已经被广泛应用在包括开心网,校内网等诸多SNS社区领域,也被应用在包括榕树下,csdn等特殊群体的网站,本篇博客将实现它,底部工具栏的实现主要解决IE6不支持fixed属性,线上效果图:
首先定义HTML代码片段:
<div class="footbar_wrap">
<div class="footbar">
<ul>
<li style="width:100px;color:#666;"><a href="http://www.faqee.com" target="_blank">发起网络</a>:</li>
<li class="shang"><a href="#">免费接口</a><span class="thespan">
<p><a href="http://bbs.faqee.com/read.php?tid-6-toread-1.html" target="_blank">天气预报整合</a></p>
<p><a href="http://bbs.faqee.com/read.php?tid-1242-toread-1.html" target="_blank">视频会议整合</a></p>
<p><a href="http://bbs.faqee.com/read.php?tid-28-toread-1.html" target="_blank">聊天室整合</a></p>
<p><a href="http://bbs.faqee.com/read.php?tid-10-toread-1.html" target="_blank">网站客服整合</a></p>
</span></li>
<li class="shang"><a href="#">开源项目</a><span class="thespan">
<p><a href="http://code.google.com/p/luguo/" target="_blank">随机聊天</a></p>
<p><a href="http://code.google.com/p/luguo/" target="_blank">视频随机聊天</a></p>
<p><a href="http://code.google.com/p/vms4android/" target="_blank">视频会议Android版</a></p>
</span></li>
</ul>
<div class="clear"></div>
</div>
</div>
IE6的特殊处理:
<!--[if IE 6]>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(".footbar li:eq(1)").hover(function(){
$(this).css({ border: "1px solid #ccc", background: "#fff"});
$(this).css("border-top", "none");
$(this).css("border-bottom", "none");
$(".thespan:eq(0)").css("display","block");
},
function(){
$(this).css({ border: "none", background: "none"});
$(this).css("border-top", "none");
$(".thespan:eq(0)").css("display","");
})
})
</script>
<![endif]-->
CSS定义:
.footbar_wrap{ position:fixed; bottom:0; left:0;width:100%;}
.footbar{ width:100%; height:24px;line-height:24px; font-size:14px; margin:0 auto; background:url(bg.jpg) repeat-x 0 0; border-left:1px solid #b4b4b4; border-right:1px solid #b4b4b4;}
/*a:link, a:visited {*/
.footbar a {
color: #333;
text-decoration: none;
}
/*a:hover, a:active {*/
.footbar a:hover {
}
* html .footbar_wrap{ position:absolute; left:0; width:101.4%;top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);}
ul{ margin:0; padding:0; }
.lxr{
background: url(chat_icon_5.gif) no-repeat scroll 12px -125px transparent;
}
.shang{
background: url(chat_icon_5.gif) no-repeat scroll 20px -1180px transparent;
}
.xia{
background: url(chat_icon_5.gif) no-repeat scroll 20px -1215px transparent;
}
.chat{
background: url(chat_icon_5.gif) no-repeat scroll 12px -1136px transparent;
}
.footbar li{
width:140px; text-align:center;
float:left;position:relative;
margin-left:1px;list-style: none;
}
.thespan{ position:absolute; top:-110px; left:-1px; font-size:12px;text-align:center;display:none; width:140px;height:110px; border:1px solid #ccc; border-bottom:none;}
.clear{ clear:both;}
.footbar li.shang:hover{ border:1px solid #ccc; border-top:none;
background:url(chat_icon_5.gif) no-repeat scroll 20px -1215px transparent;
background-color:#FFF;
}
.footbar li.lxr:hover{ border:1px solid #ccc; border-top:none;
background:url(chat_icon_5.gif) no-repeat scroll 12px -170px transparent;
background-color:#FFF;
}
.footbar li.chat:hover{ border:1px solid #ccc; border-top:none;
background-colojavascript:mctmp(0);r:#FFF;
}
.footbar li:hover span{ display:block;}
.footbar li p{ margin:0 0 2px 0;}
最终效果可查看:http://www.faqee.com
所有的代码打包见附件!
- 大小: 11.7 KB
分享到:
相关推荐
仿facebook的对话框,非常的漂亮,完整的例子。
仿facebook时间轴,facebooktimerline
一款Android 仿facebook布局效果的例子,很多人在找,今天放出来供大家下载参考。
安卓Android源码——仿facebook布局效果.zip
仿facebook布局效果.zip
仿facebook的label闪光效果.源码展示操作简单
jQuery仿Facebook网格图片画廊是一款图片以网格进行排列布局。当用户点击某张图片之后,会以全屏轮播图的方式展示所有的图片。
此源码属于Z-blog主题,安装前请预先安装 Z-blog 源码,主题内删除了评论功能,完整的仿真Facebook,主题简洁运行速度快。
android仿facebook侧拉菜单
仿Facebook切换表情符号的jQuery插件
这种效果大家都不陌生,网上好多都说是仿人人网的,估计人家牛逼出来的早吧,我也参考了一一些例子,实现起来有三种方法.具体情况源码。
NULL 博文链接:https://iaiai.iteye.com/blog/1895727
ios,storyboard中利用一个开源的库,完成一个类似facebook的左边侧拉菜单。
这是用Jquery开发出来的 页面底部个性导航条 facebook style
Android应用源码开发Demo,主要用于毕业设计学习。
Android 仿facebook布局效果.zip
Android 仿facebook布局效果.zip源码资源下载Android 仿facebook布局效果.zip源码资源下载