Menu sử dụng jQuery nhìn rất đẹp mắt và gọn nhẹ. Thích hợp cho các bạn theo phong cách đơn giản, gọn nhẹ, tất cả sẽ hiện ra khi bạn di cuột vào chữ Menu.
Mời các bạn xem DEMO
☼ Bắt đầu thủ thuật
1. Đầu tiên bạn hãy vào tài khoản blogger
2. Vào Thiết kế chọn Phần tử trang - Thêm tiện ích - HTML/Javarscrip và dán code bên dưới vào sau đó các bạn hãy thay TÊN MENU bằng tên menu của bạn đặt và thay các tên menu 1,2,3... bằng tên mà bạn muốn đặt. Cuối cùng thay địa chỉ link bằng địa chỉ phù hợp.
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></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://code1k.com" id="megaanchor"><img alt="" src="http://lh5.ggpht.com/_BmIFAHM3wdk/TP3v52gPWpI/AAAAAAAAAUE/-DywYqgoN1Q/calendar-month.png" style="border:0px" / /> MENU </a>
<div id="megamenu1" class="megamenu">
<div class="column">
<h3>
<img src="http://lh5.ggpht.com/_BmIFAHM3wdk/TP3v6nOYC1I/AAAAAAAAAUM/S24j8xGyuMU/chart-up.png" alt="" style="border:0px;" / /> TÊN MENU</h3>
<ul>
<li><a href="link"> Tên Menu1 </a></li>
<li><a href="link">Tên menu 2 </a></li>
<li><a href="link">Tên Menu 3 </a></li>
<li><a href="link">Tên menu 4 </a></li>
<li><a href="link"> Tên menu 5 </a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="http://lh5.ggpht.com/_BmIFAHM3wdk/TP3wJUuaDRI/AAAAAAAAAU8/0F3Pgq2D_0A/home.png" alt="" style="border:0px;" / /> TÊN MENU</h3>
<ul>
<li><a href="link">Tên menu 1</a></li>
<li><a href="link">Tên menu 2</a></li>
<li><a href="link">Tên menu 3</a></li>
<li><a href="link">Tên menu 4</a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="http://lh5.ggpht.com/_BmIFAHM3wdk/TP3zm4sh7XI/AAAAAAAAAV0/fXO-Kvv_Z-M/compass.png" alt="" style="border:0px;" / />TÊN MENU</h3>
<ul>
<li><a href="link">Tên menu 1 </a></li>
<li><a href="link"> Tên menu 2</a></li>
<li><a href="link"> Tên menu 3 </a></li>
<li><a href="link"> Tên menu 4 </a></li>
</ul>
</div>
<br style="clear: left" />
<div class="column">
<h3>
<img src="http://1.bp.blogspot.com/_BmIFAHM3wdk/TQR-FErVIGI/AAAAAAAAAxM/HjJFiHjboP0/s1600/Christmas-Ball-5-icon.png" alt="" style="border:0px;" / /> TÊN MENU</h3>
<ul>
<li><a href="link"> Tên menu 1 </a></li>
<li><a href="link"> Tên menu 2</a></li>
<li><a href="link"> Tên menu 3</a></li>
<li><a href="link"> Tên menu 4</a></li>
<li><a href="link"> Tên menu 5</a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="http://lh5.ggpht.com/_BmIFAHM3wdk/TP3wMSIDn0I/AAAAAAAAAVE/bjC9EM_Z4yA/light-bulb-off.png" alt="" style="border:0px;" / /> TÊN MENU</h3>
<ul>
<li><a href="link">Tên menu 1</a></li>
<li><a href="link">Tên menu 2</a></li>
<li><a href="link">Tên menu 3</a></li>
<li><a href="link">Tên menu 4</a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="http://4.bp.blogspot.com/_BmIFAHM3wdk/TQR9LOGe9XI/AAAAAAAAAxI/GaKAN9mFMN4/s1600/Gift-icon.png" alt="" style="border:0px;" / /> TÊN MENU</h3>
<ul>
<li><a href="link">Tên menu 1</a></li>
<li><a href="link">Tên menu 2</a></li>
<li><a href="link">Tên menu 3</a></li>
<li><a href="link">Tên menu 4</a></li>
</ul>
</div>
</div>
Các bạn bấm lưu lại và xem kết quả<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://code1k.com" id="megaanchor"><img alt="" src="http://lh5.ggpht.com/_BmIFAHM3wdk/TP3v52gPWpI/AAAAAAAAAUE/-DywYqgoN1Q/calendar-month.png" style="border:0px" / /> MENU </a>
<div id="megamenu1" class="megamenu">
<div class="column">
<h3>
<img src="http://lh5.ggpht.com/_BmIFAHM3wdk/TP3v6nOYC1I/AAAAAAAAAUM/S24j8xGyuMU/chart-up.png" alt="" style="border:0px;" / /> TÊN MENU</h3>
<ul>
<li><a href="link"> Tên Menu1 </a></li>
<li><a href="link">Tên menu 2 </a></li>
<li><a href="link">Tên Menu 3 </a></li>
<li><a href="link">Tên menu 4 </a></li>
<li><a href="link"> Tên menu 5 </a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="http://lh5.ggpht.com/_BmIFAHM3wdk/TP3wJUuaDRI/AAAAAAAAAU8/0F3Pgq2D_0A/home.png" alt="" style="border:0px;" / /> TÊN MENU</h3>
<ul>
<li><a href="link">Tên menu 1</a></li>
<li><a href="link">Tên menu 2</a></li>
<li><a href="link">Tên menu 3</a></li>
<li><a href="link">Tên menu 4</a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="http://lh5.ggpht.com/_BmIFAHM3wdk/TP3zm4sh7XI/AAAAAAAAAV0/fXO-Kvv_Z-M/compass.png" alt="" style="border:0px;" / />TÊN MENU</h3>
<ul>
<li><a href="link">Tên menu 1 </a></li>
<li><a href="link"> Tên menu 2</a></li>
<li><a href="link"> Tên menu 3 </a></li>
<li><a href="link"> Tên menu 4 </a></li>
</ul>
</div>
<br style="clear: left" />
<div class="column">
<h3>
<img src="http://1.bp.blogspot.com/_BmIFAHM3wdk/TQR-FErVIGI/AAAAAAAAAxM/HjJFiHjboP0/s1600/Christmas-Ball-5-icon.png" alt="" style="border:0px;" / /> TÊN MENU</h3>
<ul>
<li><a href="link"> Tên menu 1 </a></li>
<li><a href="link"> Tên menu 2</a></li>
<li><a href="link"> Tên menu 3</a></li>
<li><a href="link"> Tên menu 4</a></li>
<li><a href="link"> Tên menu 5</a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="http://lh5.ggpht.com/_BmIFAHM3wdk/TP3wMSIDn0I/AAAAAAAAAVE/bjC9EM_Z4yA/light-bulb-off.png" alt="" style="border:0px;" / /> TÊN MENU</h3>
<ul>
<li><a href="link">Tên menu 1</a></li>
<li><a href="link">Tên menu 2</a></li>
<li><a href="link">Tên menu 3</a></li>
<li><a href="link">Tên menu 4</a></li>
</ul>
</div>
<div class="column">
<h3>
<img src="http://4.bp.blogspot.com/_BmIFAHM3wdk/TQR9LOGe9XI/AAAAAAAAAxI/GaKAN9mFMN4/s1600/Gift-icon.png" alt="" style="border:0px;" / /> TÊN MENU</h3>
<ul>
<li><a href="link">Tên menu 1</a></li>
<li><a href="link">Tên menu 2</a></li>
<li><a href="link">Tên menu 3</a></li>
<li><a href="link">Tên menu 4</a></li>
</ul>
</div>
</div>
No comments: