Cách tạo thanh menu trượt nằm bên trên blog hoặc website
![]() |
ảnh demo |
Đây là cách tạo thanh menu cố định trượt nằm bên dưới blog hoặc website
(xem demo ngay trên blog này)
theo hướng dẫn của: http://www.dynamicdrive.com/ forums/showthread.php?75276- How-to-install-Expandable- Sticky-Bar
theo hướng dẫn của: http://www.dynamicdrive.com/
B1. Vào bố cục của trang và chọn thêm tiện ích mới
B2. Dán đoạn code dưới đây vào widget mới.
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#stickybar{
position:fixed;
color: white;
padding: 5px;
left:0px;
bottom:-125px;
background: #e43a3d;
z-index: 10000;
font-weight:bold;
width:100%;
height:150px
}
#stickybar .button {
border-width:0; float:right;margin-Right:10px; cursor:pointer
}
/*]]>*/
</style>
</head>
<body>
<div id="stickybar" >
<div class="open" ></div>
<img class="button" id="stickybaropen" src="http://www.dynamicdrive. com/dynamicindex17/open.gif" />
<img class="button" id="stickybarclose" src="http://www.dynamicdrive. com/dynamicindex17/close.gif" />
<div style="text-align:center; padding-top:3px"><b>Copyright (c) 2010 Dynamic Drive</a></div>
More content here
</div>
<script type="text/javascript">
/*<![CDATA[*/
var zxcStickyBar={
init:function(o){
var id=o.ID,p=o.Position,t=o. RevealType,r=o.PeekAmount,ms= o.Animate,s=document. getElementById(id);
if (s){
o.sz=-s.offsetHeight
r=o.sz+(typeof(r)=='number'&& r>10?r:-o.sz/4);
o.ud=o.StartOpen===true;
o.s=[s,typeof(p)=='string'&&p. charAt(0).toUpperCase()=='B'?' bottom':'top',r,o.ud?0:r];
o.ms=typeof(ms)=='number'&&ms> 20?ms:100;
o.open=document. getElementById(id+'open');
o.close=document. getElementById(id+'close');
s.style[o.s[1]]=o.s[3]+'px';
o.t=t!='mouseover';
if (t=='mouseover'){
this.addevt(s,t,'slide',o, true)//:this.addevt(s,' mouseup','slide',o);
this.addevt(s,'mouseout',' slide',o,false);
}
else {
this.addevt(o.open&&o.close?o. open:s,'mouseup','slide',o);
this.addevt(o.open&&o.close?o. close:s,'mouseup','slide',o);
}
o.close?o.close.style.display= 'none':null;
}
},
slide:function(o,ud){
o.t?ud=!o.ud:null;
o.ud=ud
this.animate(o,o.s,o.s[3],o. ud?0:o.s[2],new Date(),o.ms);
o.open?o.open.style.display= ud?'none':'inline':null
o.close?o.close.style.display= ud?'inline':'none':null
},
animate:function(o,a,f,t,srt, mS){
clearTimeout(a[5]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[3]=n;
a[0].style[a[1]]=a[3]+'px';
}
if (ms<mS){
a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[3]=t;
a[0].style[a[1]]=t+'px';
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o. addEventListener(t,function(e) { return oop[f](p,p1);},false):o. attachEvent?o.attachEvent('on' +t,function(e){ return oop[f](p,p1); }):null;
}
}
// initialise after the sticky bar DIV has loaded
zxcStickyBar.init({
ID: "stickybar", // the unique ID name of sticky bar DIV. (string)
Position:'bottom', //(optional) the sticky bar position, 'top' or 'bottom'. (string, default = 'top')
RevealType:'mouseover', //(optional) the acivating event type, 'mouseover' or image 'mouseup' (string, default = image 'mouseup')
PeekAmount:35, //(optional) number of pixels to reveal when sticky bar is closed. (number, default = sticky bar height/4)
Animate:200, //(optional) duration of animation (in millisecs) (number, default = 500)
StartOpen:false //(optional) true = the stickey bar starts open. (boolean, default = false = starts at PeekAmount)
});
/*]]>*/
</script>
</body>
</html>
B3. Chỉnh sửa các giá trị cho phù hợp với màu sắc
và kích thước trang của bạn và Save lại.
Lưu ý dòng chữ: "More content here", là chỗ bạn thêm nội dung của bạn vào (cái này tùy ý, bạn có thể tùy chọn mẫu html riêng cho mình để tạo nội dung menu bên trong thanh trượt).
Chúc bạn thành công
Đăng nhận xét