仿Facebook底部工具栏的实现

底部工具栏可以带来很多好处，高度集中网站资源，提供用户更加便捷的操作通道，信息也更加及时有效，底部工具栏已经被广泛应用在包括开心网，校内网等诸多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

 

所有的代码打包见附件！