Home >Web Front-end >JS Tutorial >jQuery implements the effect of closing the toolbar menu fixed at the bottom (top)

jQuery implements the effect of closing the toolbar menu fixed at the bottom (top)

PHPzforward: 2016-05-16 15:33:331078browse

This article mainly introduces jQuery to realize the effect of closing the toolbar menu fixed at the bottom (top), realizing fixed position display and the function of expanding and closing in response to mouse clicks. It involves jQuery dynamically operating page elements in response to mouse events. For related tips on style attributes, friends in need can refer to

This article describes an example of how jQuery can close the toolbar menu effect fixed at the bottom (top). Share it with everyone for your reference, the details are as follows:

This is a toolbar menu that can be closed and is always at the bottom of the page. You have seen more of the one that floats at the top of the page. In terms of form, this item is similar to There is no difference in the others. It just floats at the bottom of the page with a close button. Generally speaking, this effect can be used as advertising banners, website prompts, and some places that require special attention from users.

A screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/ js/2015/jquery-fixed-buttom-adv-line-codes/

The specific code is as follows:

<!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>
<title>固定底（顶）部菜单</title>
<script type="text/javascript" src="jquery1.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(images/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(images/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>
<p class="bnav openClose">
 <p class="bnav2">
  <span class="s1">
   <a href="#"><img src="images/qqonline.gif"></a><a href="#"><img src="images/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>
 </p>
</p>
<p class="bnav3 openClose" style="display:none;"><a href="javascript:void(0)" onclick="showNav()" title="打开">打开</a></p>
</body>
</html>

The above is the entire content of this chapter. For more related tutorials, please Visit jQuery Video Tutorial!

Statement：

This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Detailed explanation of the return function in Javascript and the usage of the javascript return keyword_javascript skillsNext article：Detailed explanation of the return function in Javascript and the usage of the javascript return keyword_javascript skills

See more

jQuery implements the effect of closing the toolbar menu fixed at the bottom (top)

Related articles