Tạo Thanh Menu (menu bar) ẩn hiện bên dưới blogspot/website
Sưu tầm từ: http://www.dynamicdrive.com
Xin chia sẽ với các bạn code Tạo Thanh Menu (menu bar) ẩn hiện bên dưới blogspot/website. Với cách làm này, các bạn sẽ có một thanh menu đẹp ẩn hiện bên dưới blog mỗi khi rê chuột vào nó.
Demo: Các bạn nhìn thanh menu bên dưới chân blog nhé.
Cách Tạo Thanh Menu (menu bar) ẩn hiện bên dưới blogspot/website như sau:Copy toàn bộ đoạn code dưới đây và chèn vào 1 tiện ích HTML mới. Chỉnh sửa, thêm bớt các menu cần dùng.
Sau đó lưu lại và xem kết quả.
 |
| ảnh minh họa |
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
© để chọn chủ đề cần xem! ●๋•TIN CÔNG GIÁO & THẾ GIỚI
●๋•THEO CHÚA GIÊ-SU
●๋•THÁNH MẪU MARIA
●๋•SỐNG LỜI CHÚA
●๋•SỐNG ĐẸP +
").addClass("theiaStickySidebar").append(s.sidebar.children()),s.sidebar.append(s.stickySidebar)),s.marginTop=parseInt(s.sidebar.css("margin-top")),s.marginBottom=parseInt(s.sidebar.css("margin-bottom")),s.paddingTop=parseInt(s.sidebar.css("padding-top")),s.paddingBottom=parseInt(s.sidebar.css("padding-bottom"));var i=s.stickySidebar.offset().top,r=s.stickySidebar.outerHeight();s.stickySidebar.css("padding-top",1),s.stickySidebar.css("padding-bottom",1),i-=s.stickySidebar.offset().top,r=s.stickySidebar.outerHeight()-r-i,0==i?(s.stickySidebar.css("padding-top",0),s.stickySidebarPaddingTop=0):s.stickySidebarPaddingTop=1,0==r?(s.stickySidebar.css("padding-bottom",0),s.stickySidebarPaddingBottom=0):s.stickySidebarPaddingBottom=1,s.previousScrollTop=null,s.fixedScrollTop=0,a(),s.onScroll=function(s){if(s.stickySidebar.is(":visible")){if(e("body").width()s.container.width())return void a();var i=e(document).scrollTop(),r="static";if(i>=s.container.offset().top+(s.paddingTop+s.marginTop-s.options.additionalMarginTop)){var n,l=s.paddingTop+s.marginTop+t.additionalMarginTop,c=s.paddingBottom+s.marginBottom+t.additionalMarginBottom,o=s.container.offset().top,d=s.container.offset().top+function(t){var a=t.height();return t.children().each(function(){a=Math.max(a,e(this).height())}),a}(s.container),h=0+t.additionalMarginTop,f=s.stickySidebar.outerHeight()+l+c0?Math.min(m,h):Math.max(m,n-s.stickySidebar.outerHeight()),m=Math.max(m,p),m=Math.min(m,u-s.stickySidebar.outerHeight());var b=s.container.height()==s.stickySidebar.outerHeight();r=!b&&m==h||!b&&m==n-s.stickySidebar.outerHeight()?"fixed":i+m-s.sidebar.offset().top-s.paddingTop<=t.additionalMarginTop?"static":"absolute"}if("fixed"==r)s.stickySidebar.css({position:"fixed",width:s.sidebar.width(),top:m,left:s.sidebar.offset().left+parseInt(s.sidebar.css("padding-left"))});else if("absolute"==r){var y={};"absolute"!=s.stickySidebar.css("position")&&(y.position="absolute",y.top=i+m-s.sidebar.offset().top-s.stickySidebarPaddingTop-s.stickySidebarPaddingBottom),y.width=s.sidebar.width(),y.left="",s.stickySidebar.css(y)}else"static"==r&&a();"static"!=r&&1==s.options.updateSidebarHeight&&s.sidebar.css({"min-height":s.stickySidebar.outerHeight()+s.stickySidebar.offset().top-s.sidebar.offset().top+s.paddingBottom}),s.previousScrollTop=i}},s.onScroll(s),e(document).scroll(function(e){return function(){e.onScroll(e)}}(s)),e(window).resize(function(e){return function(){e.stickySidebar.css({position:"static"}),e.onScroll(e)}}(s))})}(t,a),!0)}(t=e.extend({containerSelector:"",additionalMarginTop:0,additionalMarginBottom:0,updateSidebarHeight:!0,minWidth:0,sidebarBehavior:"modern"},t)).additionalMarginTop=parseInt(t.additionalMarginTop)||0,t.additionalMarginBottom=parseInt(t.additionalMarginBottom)||0,function(t,s){a(t,s)||(console.log("TST: Body width smaller than options.minWidth. Init is delayed."),e(document).scroll(function(t,s){return function(i){a(t,s)&&e(this).unbind(i)}}(t,s)),e(window).resize(function(t,s){return function(i){a(t,s)&&e(this).unbind(i)}}(t,s)))}(t,this)}}(jQuery),$(document).ready(function(){$("#sidebar").theiaStickySidebar({additionalMarginTop:20,additionalMarginBottom:20})})),document.write('