用户登录  |  用户注册
首 页源码下载网络学院最新源码源码排行屏蔽广告
当前位置:新兴网络 > 网络学院 > 网页制作 > HTML

可关闭的网页底部的工具条菜单

减小字体 增大字体 作者:佚名  来源:本站整理  发布时间:2010-08-18 18:54:00
附件下载.rar
HTML code运行代码复制代码编辑
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>可关闭的网页底部的工具条菜单</title>
<script type="text/javascript" src="http://www.newxing.com/img/jquery-1.3.2.js"></SCRIPT>
<style>
/* 固定底(顶)部菜单 */
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style:normal;}
a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}
a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.bnav{ text-align:left;height:25px;overflow:hidden;width:98%;line-height:25px;background:#fff; margin:0 1%;border:#B4B4B4 1px solid; border-bottom:none;z-index:999;position:fixed;bottom:0;left:0;_position:absolute;/* for IE6 */_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible;}
.close{position:absolute;right:5px;height:25px;width:16px;text-indent:-9999px;padding-left:10px;}
.close a{background:url(http://www.newxing.com/img/201008/close.gif) no-repeat center; width:16px;display:block;}
.bnav2{height:24px;line-height:24px; margin:1px; margin-bottom:0;background:#E5E5E5; }
.bnav .s1{ position:absolute;left:10px;}
.bnav .s1 img{ padding-top:3px;margin-right:7px;}
.bnav .s2{ position:absolute;right:30px; color:#888;}
.bnav .s2 span{ padding-right:10px;}
.bnav .s2 a{margin:0 6px;}
.rolltext{position:absolute;left:160px;height:25px;line-height:25px; overflow: hidden;}
.rolltext dt,.rolltext dd{float:left;width: auto;}
.rolltext a{display:block;height:25px;overflow:hidden;}
.bnav3{height:25px;width:16px;line-height:25px; margin:0 1%; padding-right:6px;border-bottom:none;z-index:999;position:fixed;bottom:0;right:0;_position:absolute;/* for IE6 */_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible;}
.bnav3 a{background:url(http://www.newxing.com/img/201008/open.gif) no-repeat center; display:block;height:25px;width:16px; text-indent:-5000px;}
</style>
</head>
<body>
<script type="text/javascript">
var closeBN = $.cookie("bnav");
if (closeBN == "0"){closeNav();}
function showNav(){
 $(".openClose").toggle();
 $.cookie("bnav", "1", {expires: 1});
}
function closeNav(){
 $(".openClose").toggle();
 $.cookie("bnav", "0", {expires: 1});
}
// 单行滚动
function SingleScroll(){
 $(".rolltext dd").animate({marginTop:"-25px"},500,function(){
  $(this).css({marginTop:"0px"}).find("a:first").appendTo(this);
 });
}
$(document).ready(function(){
 setInterval("SingleScroll()",3000);
});
</SCRIPT>
<div class="bnav openClose">
    <div class="bnav2">
        <span class="s1">
            <a href="#"><img src="http://www.newxing.com/img/201008/qqonline.gif"></a><a href="#"><img src="http://www.newxing.com/img/201008/qqonline2.gif"></a>
        </span>
        <dl class="rolltext">
            <dt>特别声明:</dt>
            <dd>
                <a href="#">庆双节期间,商城有专人值班,请上帝们放心购物</a>
                <a href="#">天悦所售手机为大陆行货、全国联保商品</a>
                <a href="#">部分少量港行、欧行机器我们都已特别注明</a>
                <a href="#">请上帝们就不要再咨询同类问题啦,客服电话要爆喽</a>
            </dd>
        </dl>
        <span class="s2">
            <span><a href="#">[登录]</a><a href="#">[免费注册]</a></span><a href="#">购物车</a>|<a href="#">帮助中心</a>|<a href="#">在线留言</a>
        </span>
        <span class="close"><a href="javascript:void(0)" onclick="closeNav()" title="关闭">关闭</a></span>
    </div>
</div>
<div class="bnav3 openClose" style="display:none;"><a href="javascript:void(0)" onclick="showNav()" title="打开">打开</a></div>
</body>
</html>

Tags:工具条 菜单 关闭 网页底部

作者:佚名
  • 好的评价 如果您觉得此文章好,就请您
      0%(0)
  • 差的评价 如果您觉得此文章差,就请您
      0%(0)

网络学院评论评论内容只代表网友观点,与本站立场无关!

   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论