Xin chào các bạn, hôm nay mình sẽ hướng dẫn cho các bạn tạo 1 menu ngang xổ xuống, và đặc biệt trình đợn thả xuống này bao gồm hình ảnh thumbnail.
Khi rê chuột vào thanh menu, nó sẽ tự động xổ xuống và các hình ảnh sẽ xuuats hiện khi rê chuột vào menu phụ.

DEMO HÌNH ẢNH

Các bạ có thể xem demo trực tiếp tại đây

Cách thực hiện tạo menu xổ xuống có hình ảnh như sau:
Bước 1:
Vào Template ---> Chỉnh sủa HTML ---> bấm Ctrl+F tìm kiếm thẻ ]]> </ B: skin>
Tiếp theo chèn đoạn code sau vào trên thẻ ]]> </ B: skin>

.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinIIsUNqBoZKq-cR5mFVcdfA_v-e8FNNHcILEiivxNGvLHSV7gVgZ1G5Vag9DkvNSD334Y6hLYvVl3g9dFewTfCbGyZVM-WFYnw3juob7OrXSaIFjfyUNvF0p4zhFWqb5o-V08JM1yVIY/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBGgbiZU8DYaNdhyphenhyphen5n-ERR5dAa34GicsL7s6H1qEKlj6eLNaD9FqNTv9iJZXQekz4NwfYILHRS76fr7a0PXXxvzorkwk1tJR7g25CM0btLQiRQ5vsiqh23dK7bib-a6odMnNHMqb2xTo4/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWhYudDLfmQ4QuR0TMzkAA6Q8rtYoIjyIklhGeLcaapni5x8hU_bqRVWnmMRdjIh_Qms92b2LunFtwzeECy7VImFQPkGiilEIzD8HjE7ShwUJ47x97CAtz-3HSbjN9eqNblJGeRgfOx0/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}

Bước 2: Tiếp tục Ctrl+F tìm thẻ </head>

Chèn đoạn code sau vào trước thẻ vừa tìm được

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://helplogger.googlecode.com/svn/trunk/megamenu.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('#megamenuid').megaBloggerMenu({
  postsNumber : 4,
noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT8O5DwcFBf5HTleT0Dp4LMJ2zykwcJOT9vp6qL-vzHLTAtBSzpKynttqg_2HRXkZ7cLVD4tlmIPTBmSHzBo8xL8XtPV2Ap0rOavlr3J2TPPpum3vx7Mpp6NilX0eSETkQF4Zra_80woM/s1600/no_image_available.png'
});
});

$(function(){
$('.search-here').submit(function(e){
    if($('.search-box .search-field').val().length==0){
       $('.search-box .search-alert').fadeIn().css('display','inline-block');
      e.preventDefault();
    }
});
});
</script>

Sau bước này các bạn seve template lại, nếu không có vấn đề gì thì khỏi bàn, còn nếu báo lỗi tức là xung đột code (jQuery plugin đã tồn tại) các bạn xóa bỏ đoạn code trên cùng màu đỏ nhé

postsNumber : 4 : Thay đổi số lượng bài viết có hình ảnh

Để thêm 1 hình ảnh khác khi bài viết không có hình ảnh các bạn thay code màu xanh thanh đoạn code dưới đây

noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT8O5DwcFBf5HTleT0Dp4LMJ2zykwcJOT9vp6qL-vzHLTAtBSzpKynttqg_2HRXkZ7cLVD4tlmIPTBmSHzBo8xL8XtPV2Ap0rOavlr3J2TPPpum3vx7Mpp6NilX0eSETkQF4Zra_80woM/s1600/no_image_available.png'

Bước cuối cùng:
Các bạn tim đoạn code như sau : <div class='main-outer'>

Chèn đoạn code dưới đây vào trên doạn code vừa tìm được:

<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul></li>
<li><a href='http://ADDURLHERE.com'>Normal Link</a></li>
<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>
<div class='clear'/>

Các bạn thay thế URL blog và tên các nhãn cho phù hợp với blog của mình

Save lại và xem thành quả của quá trình làm menu xổ xuống có hình ảnh cho blog của mình.

Chúc thành công

Admin Huỳnh Phụng

Xuất thân là Quản Trị Kinh Doanh. Yêu thích Marketing Online và trở thành Blogger với gần 1000 bài viết về nhiều lĩnh vực. Blog cá nhân http://toilaquantri.com

VNSHARE102

Nhãn

Tạo thanh menu ngang xổ xuống có hình ảnh thumbnail cho blogger

Related Post

Admin Huỳnh Phụng

Movies

Recent Posts