Bạn là một Blogger yêu thích sự đơn giản? Nếu vậy bạn chắc hẳn sẽ thích loại menu này. Nó được kết hợp hiệu ứng xổ xuống đẹp mắt và hiển thị dưới dạng bảng.
DEMO
1. Đăng nhập Blogger
2. > Bố cục > Thêm tiện ích > HTML/Javascrip
3. > Dán code vào
5. > Save
DEMO
#Thêm menu
Để thêm loại menu này vào cũng rất đơn giản:1. Đăng nhập Blogger
2. > Bố cục > Thêm tiện ích > HTML/Javascrip
3. > Dán code vào
<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: 10; 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://namkna.blogspot.com/" id="megaanchor"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzJR7NkWSVolt2EbzyiXwj_mAAeJ-GjLPxi7UJDg8gK6FzE-wPxoTm-nfxQc-5tzJFW8A_SBj0FGuhNq_mF0h5BOZQHVI_363YNp_Wc8sKr8cwuikLEl3p10V7GxfILEEtHNm7cth6X5A/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/AVvXsEgfojhvx_2WjBnCqV-SQOpRYukqqQGg5P-2YjDnB3gJRXEjm6riX9IFgdmtVaz5MmJXRy2UjqvJUMLH-ew6TeVohCVYDO1zxkW4Ft2ESHyFHMW1-TtBiNoV9HWIIoDbtittBBNaQQvAzSA/s1600/Megaanchor-menu-namkna-ngoctra-2.gif" alt="" style="border:0px;" / /> Sản phẩm</h3> <ul> <li><a href="http://khanh98.blogspot.com/"> Hài xuân 2012 </a></li> <li><a href="http://khanh98.blogspot.com/"> Hài xuân 2011 </a></li> <li><a href="http://khanh98.blogspot.com/"> Châu tinh trì </a></li> <li><a href="http://khanh98.blogspot.com/"> Thư giãn cuối tuần </a></li> <li><a href="http://khanh98.blogspot.com/"> Chọn lọc </a></li> </ul> </div> <div class="column"> <h3> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwmBR7QGZ4gj08uBxCd3ENcQEq0gyJ3YSj-d6vytMSxj15j0GttUhTMK22LhyphenhyphenY1lH_pK9qe_3-giVxn7G3bGA2nOPyKO5cDiEWrwdDDJJotgY1ezXQDTIwhSvi2EDfMJX1aHonrpcL7NE/s1600/Megaanchor-menu-namkna-ngoctra-3.gif" alt="" style="border:0px;" / /> Trang chủ</h3> <ul> <li><a href="http://khanh98.blogspot.com/">Trang chủ</a></li> <li><a href="http://www.blogger.com/home">Đăng nhập</a></li> <li><a href="http://khanh98.blogspot.com/">Control Panel</a></li> <li><a href="http://kanh98.blogspot.com/">Thoát</a></li> </ul> </div> <div class="column"> <h3> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTmMfF54mFglf_Grp_PitJDALseThedq-CQfIckBtKoqixQZT284OhLwLKpvEi6RJ-Gf_Z1pfM8-O7asJeD8ksjAh9F7SgIN9Zj1CHXqrI9_mk1LUd8V4MjANuV0kO216RHrAP7RsNE3g/s1600/Megaanchor-menu-namkna-ngoctra-3_2.gif" alt="" style="border:0px;" / /> Story</h3> <ul> <li><a href="http://khanh98.blogspot.com/"> Love story </a></li> <li><a href="http://khanh98.blogspot.com/"> Blogradio </a></li> <li><a href="http://khanh98.blogspot.com/"> Quà tặng cuộc sống </a></li> <li><a href="http://khanh98.blogspot.com/"> 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/AVvXsEh5WU-LgU4pKD4MIbj_d2WEiBXRiy4XLfyN4oZgPqOxFwnV1yxMHEvlj68p2jW3znXu_DHUhYa0nhdQzsRXDE4okaHA9-hRgGO4q2jRlpCf1ilHDgHzrrfDh09Kag5xK5Il9kZFaMCPAA4/s1600/Megaanchor-menu-namkna-ngoctra-3_3.gif" alt="" style="border:0px;" / /> Thủ thuật</h3> <ul> <li><a href="http://khanh98.blogspot.com/"> Blogspot </a></li> <li><a href="http://khanh98.blogspot.com/"> Blog Yahoo </a></li> <li><a href="http://khanh98.blogspot.com/"> Messenger</a></li> <li><a href="http://khanh98.blogspot.com/"> World-PPT</a></li> <li><a href="http://khanh98.blogspot.com/"> Photoshop</a></li> </ul> </div> <div class="column"> <h3> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiXetgH2nnNw7hazSad4Gh9FVdr2-dmwFLQ8wDQFkzySlAFrguv3tCfWlTs1El8iC0StD4gUsuKA8i07cG4z3SrwIwIEui0vnYP4iWgZnip2CNFlvH6b1AvQIJjyTgimFrgIhGjZO2hps/s1600/Megaanchor-menu-namkna-ngoctra-3_4.gif" alt="" style="border:0px;" / /> Download</h3> <ul> <li><a href="http://khanh98.blogspot.com/">Làm phim</a></li> <li><a href="http://khanh98.blogspot.com/">IDM</a></li> <li><a href="http://khanh98.blogspot.com/">Miễn phí</a></li> <li><a href="http://khanh98.blogspot.com/">Phim</a></li> </ul> </div> <div class="column"> <h3> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTMhUPT8Ju68YmqG3F-Mh9tbAXKhiD6sinTNxfnP0nUrK8lvs9ZWBcb0nVzGJt-HbtMsMxf25AEm7jhaFAG3-UfTz0EuCclP0__THuw_jJYsB1m8l6jT22G4OUpGYKdcFdn6AvwEfiAuE/s1600/Megaanchor-menu-namkna-ngoctra-3_4_2.gif" alt="" style="border:0px;" / /> Nge nhạc</h3> <ul> <li><a href="http://khanh98.blogspot.com/">Nhạc hình</a></li> <li><a href="http://khanh98.blogspot.com/">Nhạc vàng</a></li> <li><a href="http://khanh98.blogspot.com/">Không lời</a></li> <li><a href="http://khanh98.blogspot.com/">Quốc tế</a></li> </ul> </div> </div>4. >
- Nếu trong blog của bạn đã có đoạn scrip màu đỏ thì xóa đoạn màu đỏ đi
- Thay thế phần màu xanh tùy ý của bạn
- Thay http://khanh98.blogspot.com/ thành liên kết bạn muốn
- Nếu không thích các hình ảnh trong menu thì thay các liên kết .gif ở trong code đến hình ảnh bạn muốn
5. > Save
Comments
Post a Comment
» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.