Menu "Megaanchor" dạng nén cho mọi website - blogspot với jQuery

<script type="text/javascript"src="http://tanchau123.googlecode.com/files/Code_Tanchau123.blogspot.com.txt"></script>
<style type="text/css">
.megamenu{
position: absolute;
display: none;
left: 0;
top: 0;
background: white;
border: 1px solid #f06b24;
border-width: 5px 5px;
padding: 10px;
font: normal 12px verdanal;
z-index: 100;
}
.megamenu .column{
float: left;
width: 180px;
margin-right: 5px;
}
.megamenu .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.megamenu .column ul li{
padding-bottom: 5px;
}
.megamenu .column h3{
background: #e0e0e0;
font: bold 13px verdana;
margin: 0 0 5px 0;
}
.megamenu .column ul li a{
text-decoration: none;
}
.megamenu .column ul li a:hover{
color: red;
}
</style>
<script type="text/javascript">
jQuery.noConflict();
var jkmegamenu={
effectduration: 300, //duration of animation, in milliseconds
delaytimer: 200, //delay after mouseout before menu should be hidden, in milliseconds
//No need to edit beyond here
megamenulabels: [],
megamenus: [], //array to contain each block menu instances
zIndexVal: 1000, //starting z-index value for drop down menu
$shimobj: null,
addshim:function($){
$(document.body).append('<iframe id="outlineiframeshim" src="'+(location.protocol=="https:"? 'blank.htm' : 'about:blank')+'" style="display:none; left:0; top:0; z-index:999; position:absolute; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')
this.$shimobj=$("#outlineiframeshim")
},
alignmenu:function($, e, megamenu_pos){
var megamenu=this.megamenus[megamenu_pos]
var $anchor=megamenu.$anchorobj
var $menu=megamenu.$menuobj
var menuleft=($(window).width()-(megamenu.offsetx-$(document).scrollLeft())>megamenu.actualwidth)? megamenu.offsetx : megamenu.offsetx-megamenu.actualwidth+megamenu.anchorwidth //get x coord of menu
//var menutop=($(window).height()-(megamenu.offsety-$(document).scrollTop()+megamenu.anchorheight)>megamenu.actualheight)? megamenu.offsety+megamenu.anchorheight : megamenu.offsety-megamenu.actualheight
var menutop=megamenu.offsety+megamenu.anchorheight //get y coord of menu
$menu.css({left:menuleft+"px", top:menutop+"px"})
this.$shimobj.css({width:megamenu.actualwidth+"px", height:megamenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})
},
showmenu:function(e, megamenu_pos){
var megamenu=this.megamenus[megamenu_pos]
var $menu=megamenu.$menuobj
var $menuinner=megamenu.$menuinner
if ($menu.css("display")=="none"){
this.alignmenu(jQuery, e, megamenu_pos)
$menu.css("z-index", ++this.zIndexVal)
$menu.show(this.effectduration, function(){
$menuinner.css('visibility', 'visible')
})
}
else if ($menu.css("display")=="block" && e.type=="click"){ //if menu is hidden and this is a "click" event (versus "mouseout")
this.hidemenu(e, megamenu_pos)
}
return false
},
hidemenu:function(e, megamenu_pos){
var megamenu=this.megamenus[megamenu_pos]
var $menu=megamenu.$menuobj
var $menuinner=megamenu.$menuinner
$menuinner.css('visibility', 'hidden')
this.$shimobj.css({display:"none", left:0, top:0})
$menu.hide(this.effectduration)
},
definemenu:function(anchorid, menuid, revealtype){
this.megamenulabels.push([anchorid, menuid, revealtype])
},
render:function($){
for (var i=0, labels=this.megamenulabels[i]; i<this.megamenulabels.length; i++, labels=this.megamenulabels[i]){
if ($('#'+labels[0]).length!=1 || $('#'+labels[1]).length!=1) //if one of the two elements are NOT defined, exist
return
this.megamenus.push({$anchorobj:$("#"+labels[0]), $menuobj:$("#"+labels[1]), $menuinner:$("#"+labels[1]).children('ul:first-child'), revealtype:labels[2], hidetimer:null})
var megamenu=this.megamenus[i]
megamenu.$anchorobj.add(megamenu.$menuobj).attr("_megamenupos", i+"pos") //remember index of this drop down menu
megamenu.actualwidth=megamenu.$menuobj.outerWidth()
megamenu.actualheight=megamenu.$menuobj.outerHeight()
megamenu.offsetx=megamenu.$anchorobj.offset().left
megamenu.offsety=megamenu.$anchorobj.offset().top
megamenu.anchorwidth=megamenu.$anchorobj.outerWidth()
megamenu.anchorheight=megamenu.$anchorobj.outerHeight()
$(document.body).append(megamenu.$menuobj) //move drop down menu to end of document
megamenu.$menuobj.css("z-index", ++this.zIndexVal).hide()
megamenu.$menuinner.css("visibility", "hidden")
megamenu.$anchorobj.bind(megamenu.revealtype=="click"? "click" : "mouseenter", function(e){
var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]
clearTimeout(menuinfo.hidetimer) //cancel hide menu timer
return jkmegamenu.showmenu(e, parseInt(this.getAttribute("_megamenupos")))
})
megamenu.$anchorobj.bind("mouseleave", function(e){
var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]
if (e.relatedTarget!=menuinfo.$menuobj.get(0) && $(e.relatedTarget).parents("#"+menuinfo.$menuobj.get(0).id).length==0){ //check that mouse hasn't moved into menu object
menuinfo.hidetimer=setTimeout(function(){ //add delay before hiding menu
jkmegamenu.hidemenu(e, parseInt(menuinfo.$menuobj.get(0).getAttribute("_megamenupos")))
}, jkmegamenu.delaytimer)
}
})
megamenu.$menuobj.bind("mouseenter", function(e){
var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]
clearTimeout(menuinfo.hidetimer) //cancel hide menu timer
})
megamenu.$menuobj.bind("click mouseleave", function(e){
var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]
menuinfo.hidetimer=setTimeout(function(){ //add delay before hiding menu
jkmegamenu.hidemenu(e, parseInt(menuinfo.$menuobj.get(0).getAttribute("_megamenupos")))
}, jkmegamenu.delaytimer)
})
} //end for loop
if(/Safari/i.test(navigator.userAgent)){ //if Safari
$(window).bind("resize load", function(){
for (var i=0; i<jkmegamenu.megamenus.length; i++){
var megamenu=jkmegamenu.megamenus[i]
var $anchorisimg=(megamenu.$anchorobj.children().length==1 && megamenu.$anchorobj.children().eq(0).is('img'))? megamenu.$anchorobj.children().eq(0) : null
if ($anchorisimg){ //if anchor is an image link, get offsets and dimensions of image itself, instead of parent A
megamenu.offsetx=$anchorisimg.offset().left
megamenu.offsety=$anchorisimg.offset().top
megamenu.anchorwidth=$anchorisimg.width()
megamenu.anchorheight=$anchorisimg.height()
}
}
})
}
else{
$(window).bind("resize", function(){
for (var i=0; i<jkmegamenu.megamenus.length; i++){
var megamenu=jkmegamenu.megamenus[i]
megamenu.offsetx=megamenu.$anchorobj.offset().left
megamenu.offsety=megamenu.$anchorobj.offset().top
}
})
}
jkmegamenu.addshim($)
}
}
jQuery(document).ready(function($){
jkmegamenu.render($)
})
</script>
<script type="text/javascript">
//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
</script>
<a href="http://tanchau123.blogspot.com/" id="megaanchor"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpboL6xvLxOUHZWknRfMdRzPTuuFufePnB93EGdF0yFdVP9DFztYqNfKIu5QQN2Hfkhbk6PUmM1tnWP3ntlRXgvZg5MR_Kc4yuIBX3VJBkV6jaXFdJlZB98Q1zpjGgX5k1USA8-o9VTFU/s1600/Megaanchor-menu-namkna-ngoctra-1.gif" style="border:0px"/ > MENU </a>
<div id="megamenu1" class="megamenu">
<div class="column">
<h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7opUcpkSRJk2-4ij-x7FhWYoLwUmCZOIpButX-WFf0sKcrSvliDXsyVJkAsnw-VIMxkUfXjk3pZmrZHZLvFPj4T4rVth3QwhUnvOLcDI-6X9evuDNXurmljgF6g-KLalw7weqTupLfuw/s1600/Megaanchor-menu-namkna-ngoctra-2.gif" alt="" style="border:0px;"/ >Phim</h3>
<ul>
<li><a href="http://tanchau123.blogspot.com/p/phim-bo.html"> Phim Bộ </a></li>
<li><a href="http://tanchau123.blogspot.com/p/code-du-phong.html"> Kinh Dị </a></li>
<li><a href="http://tanchau123.blogspot.com/p/lien-he.html"> Hành Động </a></li>
<li><a href="http://tanchau123.blogspot.com/p/phim-hai-huoc.html"> Hài Hước </a></li>
<li><a href="http://tanchau123.blogspot.com/p/phim-vo-thuat.html"> Võ Thuật </a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3xUggs0ZnSw0cL6Jexb3sk3OS3wh6IcM36H75xVqNbA3ASPhb88Oa-oI5nYWkyiuJkOaifkCh3P5txOYHWt0kb75QQJee_k8XoUUeesXCTPtwmI-LfBoRl_mTx4R0rzf0V3GEcXrwKXM/s1600/Megaanchor-menu-namkna-ngoctra-3.gif" alt="" style="border:0px;"/ > Xem </h3>
<ul>
<li><a href="http://tanchau123.blogspot.com/">VTV</a></li>
<li><a href="http://www.blogger.com/home">Đăng nhập</a></li>
<li><a href="http://namkna.blogspot.com/">Control Panel</a></li>
<li><a href="http://namkna.blogspot.com/">Thoát</a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvjFSxEjKUCG7ds80ezzhwdICOdrkLOyn0gB1XWnbHtqfUk-ySL7ZB4KcNRXWyh53dvkBiA4OWizOavZwc6UXcnunNS6dwEoinQZdo_a00Gn8AsSKn0wR9otZ6B5ajDSNLmso7hatRU2s/s1600/Megaanchor-menu-namkna-ngoctra-3_2.gif" alt="" style="border:0px;"/ > Story</h3>
<ul>
<li><a href="http://namkna.blogspot.com/search/label/Love%20-%20Friend"> Love story </a></li>
<li><a href="http://namkna.blogspot.com/search/label/BlogRadio"> Blogradio </a></li>
<li><a href="http://namkna.blogspot.com/2011/02/qua-tang-cuoc-song_7172.html"> Quà tặng cuộc sống </a></li>
<li><a href="http://namkna.blogspot.com/2011/12/khoanh-khac-ky-dieu-tuyen-tap.html"> Khoảnh khắc kỳ diệu </a></li>
</ul>
</div>
<br style="clear: left" />
<div class="column">
<h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXMkHFR3jAMIcrBiHX_bJJ7Q98XFu8UXXPfqYeAcZrUKMDZj1iAyi4SYtavFhXAaomognddcQLs0ngE_hT7A-oFAb9IebRu1uEBiYs0sFLljTBO-5yBeH5FPfyDdMYK1r238HeUuuXYV4/s1600/Megaanchor-menu-namkna-ngoctra-3_3.gif" alt="" style="border:0px;"/ > Thủ thuật</h3>
<ul>
<li><a href="http://namkna.blogspot.com/search/label/Blogspot-tips"> Blogspot </a></li>
<li><a href="http://namkna.blogspot.com/search/label/BlogYahoo-Tips"> Blog Yahoo </a></li>
<li><a href="http://namkna.blogspot.com/search/label/Yahoo"> Messenger</a></li>
<li><a href="http://namkna.blogspot.com/search/label/World-PPT"> World-PPT/a></li>
<li><a href="http://namkna.blogspot.com/p/photo-editor-online-photoshop-online_24.html"> Photoshop</a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnA9i-1OZnbCJeOYtzuj4C7226SyIeDDQcjbxyutxLbltH3BBnZ1SsfAk4istNulhm8EsjmFG38CmSJHztQ7MLLrxNQM7-hJ_o89pVlcAOIm7dJJuUCL7l0KFPB-hVl3w62kiTHr7HpRQ/s1600/Megaanchor-menu-namkna-ngoctra-3_4.gif" alt="" style="border:0px;"/ > Download</h3>
<ul>
<li><a href="http://namkna.blogspot.com/search/label/Lam-Phim">Làm phim</a></li>
<li><a href="http://namkna.blogspot.com/search/label/IDM-Downloand">IDM</a></li>
<li><a href="http://namkna.blogspot.com/search/label/Phan%20Mem">Miễn phí</a></li>
<li><a href="http://namkna.blogspot.com/2011/02/nhac-hinh.html#">Phim</a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KBApPBpmNFJTlKHS32frrYRpQdO_l-R6-5_SKWeCN7WotUr7esgYFSpLchFZ0KJDYQkFzRfwOjpXbHTvCG7JFo499xHOtQoyq9a6tXIT7FHYGYYreqPuvjH3rQBhWxeFpcZpX8aZWMc/s1600/Megaanchor-menu-namkna-ngoctra-3_4_2.gif" alt="" style="border:0px;"/ > Nge nhạc</h3>
<ul>
<li><a href="http://namkna.blogspot.com/2011/02/nhac-hinh.html">Nhạc hình</a></li>
<li><a href="http://namkna.blogspot.com/2011/02/quang-le-va-nhung-ca-khuc-tru-tinh-hay_26.html">Nhạc vàng</a></li>
<li><a href="http://namkna.blogspot.com/2011/01/music.html">Không lời</a></li>
<li><a href="http://namkna.blogspot.com/2011/01/nhac-quoc-te.html">Quốc tế</a></li>
</ul>
</div>
</div>