Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn
.home-back{overflow:hidden}
.home-input{width:965px;overflow:hidden;margin:0 auto}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}
ol,ul{list-style:none}
.menu{width:965px;position:relative;height:41px;z-index:10000}
.menu ul{width:965px}
.menu ul li ul{visibility:hidden;position:absolute;height:0;left:0;border-top:1px solid #fff;width:192px}
.menu table{position:absolute;top:0;left:0}
.menu ul li{float:left;position:relative;margin:0 1px 0 0;width:192px;text-align:left}
.menu ul #item1{background:#0077ff url(https://lh5.googleusercontent.com/-OvKSsCHPsr0/UPAA-lDiHYI/AAAAAAAABBs/4-CTSY2qcAk/h0/book.png) 10px no-repeat;}
.menu ul #item1 a:hover{background:#ff6060 url(https://lh5.googleusercontent.com/-OvKSsCHPsr0/UPAA-lDiHYI/AAAAAAAABBs/4-CTSY2qcAk/h0/book.png) 10px no-repeat;}
.menu ul #item2{background:#0077ff url(https://lh6.googleusercontent.com/-fu5BRDB1ZWc/UO_O4xs78sI/AAAAAAAABA8/wzo3GAyB7SY/s0/audio-book.png) 10px no-repeat;}
.menu ul #item2 a:hover{background:#ff6060 url(https://lh6.googleusercontent.com/-fu5BRDB1ZWc/UO_O4xs78sI/AAAAAAAABA8/wzo3GAyB7SY/s0/audio-book.png) 10px no-repeat;}
.menu ul #item3{background:#0077ff url(https://lh4.googleusercontent.com/-zfqtCiJJtkM/UO_PiXOD4DI/AAAAAAAABBE/bmeLQjGrBp0/s0/story.png) 10px no-repeat;}
.menu ul #item3 a:hover{background:#ff6060 url(https://lh4.googleusercontent.com/-zfqtCiJJtkM/UO_PiXOD4DI/AAAAAAAABBE/bmeLQjGrBp0/s0/story.png) 10px no-repeat;}
.menu ul #item4{background:#0077ff url(https://lh3.googleusercontent.com/-g1OSqIhZokQ/UO_P4WUWD8I/AAAAAAAABBM/2EkmvzTW-WM/s0/apply.png) 10px no-repeat;}
.menu ul #item4 a:hover{background:#ff6060 url(https://lh3.googleusercontent.com/-g1OSqIhZokQ/UO_P4WUWD8I/AAAAAAAABBM/2EkmvzTW-WM/s0/apply.png) 10px no-repeat;}
.menu ul #item5{background:#0077ff url(https://lh4.googleusercontent.com/-EHjhoJ2ijD0/UO_P5Ty_b0I/AAAAAAAABBQ/EVusbB1AU8c/s0/product.png) 10px no-repeat;}
.menu ul #item5 a:hover{background:#ff6060 url(https://lh4.googleusercontent.com/-EHjhoJ2ijD0/UO_P5Ty_b0I/AAAAAAAABBQ/EVusbB1AU8c/s0/product.png) 10px no-repeat;}
.menu ul li.last{margin:0;width:140px}
.menu ul li a,.menu ul li a:visited{display:block;padding:10px 0 10px 40px;text-decoration:none !important;color:#fff;font-weight:bold;font-size:16px;}
.menu ul ul li{border-bottom:1px solid #fff}
* html .menu ul ul{top:35px}
.menu ul li ul li a,.menu ul li ul li a:visited{background-color:#7fff46;color:#000;font-size:13px;font-weight:bold;height:auto;line-height:22px;padding:5px 5px 5px 7px;padding-left:40px}
.menu ul li ul li a:hover{color:#fff;}
.menu ul a:hover{color:#fff;}
.menu ul li:hover ul,.menu ul a:hover ul{visibility:visible}
.menu ul:hover ul ul{visibility:hidden}
.menu ul ul li.active a{background-color:#3488cf !important}
.menu ul ul li.active a:hover{color:#fff}
.menu ul ul li.active:hover a{color:#fff}
#navigation-panel{overflow:visible;position:relative}
/* main image box */
#main-image-box{margin:0;width:965px;height:390px;position:relative;margin-bottom:20px;z-index:1}
#main-image-box #book{background-image:url("https://lh3.googleusercontent.com/-cKBs_Ke0XZg/UPxqcJsaHOI/AAAAAAAABjQ/jFnqWEjixsY/s0/dxhbook1.png");clip:rect(0 192px 390px 0)}
#main-image-box #book .container{margin:314px 0 0 53px}
#main-image-box #audio-book{background-image:url("https://lh5.googleusercontent.com/-lI1N-wkYeys/UPxqb5kNjSI/AAAAAAAABjU/PKi1LP3_POQ/s0/dxhbook2.png");clip:rect(0 385px 390px 193px)}
#main-image-box #audio-book .container{margin:40px 0 0 300px}
#main-image-box #story{background-image:url("https://lh4.googleusercontent.com/-HByleaIXv0k/UPxqcBHTTFI/AAAAAAAABjM/k_5_pDNdpLA/s0/dxhbook3.png");clip:rect(0 578px 390px 386px)}
#main-image-box #story .container{margin:60px 0 0 230px}
#main-image-box #apply{background-image:url("https://lh6.googleusercontent.com/-z9H94MnsZk0/UPxqdoZbyDI/AAAAAAAABjc/MaqTKgVpDxI/s0/dxhbook4.png");clip:rect(0 771px 390px 579px)}
#main-image-box #apply .container{margin:115px 0 0 129px}
#main-image-box #product{background-image:url("https://lh3.googleusercontent.com/-cKBs_Ke0XZg/UPxqcJsaHOI/AAAAAAAABjQ/jFnqWEjixsY/s0/dxhbook1.png");clip:rect(0 965px 390px 772px)}
#main-image-box #product .container{margin:190px 0 0 170px}
#main-image-box .clip{width:965px;height:390px;position:absolute;top:0;left:0;display:block;background-color:#fff;background-position:center top;background-repeat:no-repeat;z-index:1}
#main-image-box .facets:hover{clip:rect(0 965px 390px 0) !important}
#main-image-box .facets:hover .container{display:block}
#main-image-box .facets:hover{z-index:10 !important}
Lưu ý:
- Bạn thay những ảnh trong đoạn mã trên bằng ảnh của mình với kích thước bằng với ảnh trong demo (đã có trong file tải về - mình không làm ảnh sprite cho các icon của menu vì để các bạn không rành về photoshop dễ tùy chỉnh hơn)
- Chiều rộng của menu là 965px, muốn chỉnh chiều rộng này các bạn phải chỉnh đồng bộ cả trong #main-image-box thì menu mới cân đối được (công thức cũng không phức tạp lắm nhưng nếu nhiều bạn yêu cầu mình sẽ update sau)
Bước 2: Tìm kiếm thẻ đóng </head> và thêm vào ngay trước nó đoạn mã sau:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://dxhbook.googlecode.com/files/jquery.clip.js" type="text/javascript"></script>
<script src="http://dxhbook.googlecode.com/files/jquery.facets.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#main-image-box').children().removeClass('facets').end().facets({
control: 'ul#mainlevel',
clipSpacing: 5,
animationSpeed: 400,
activePanel: true,
beforeMax: function(index) {
$('#main-image-box .clip:eq('+index+') .container').show();
},
beforeMin: function(index) {
$('#main-image-box .clip:eq('+index+') .container').hide();
}
});
});
</script>
Lưu ý:
- Hiệu ứng của menu chỉ hoạt động với phiên bản jQuery 1.7.2 trở về trước (những phiên bản từ 1.8 đến bản mới nhất hiện tại 1.9.0 menu sẽ không hoạt động)
- Bạn nên tải file javascrip về và up lên hot riêng để tối ưu cho blog của bạn.
Bước 3: Đặt menu vào vị trí bạn muốn trong template với cấu trúc:
<b:if cond="data:blog.url == data:blog.homepageUrl">
<div class="home-back">
<div class="home-input">
<div id="navigation-panel">
<div class="menu">
<ul class="menu" id="mainlevel">
<li id="item1"><a href="#">BOOK</a>
<ul>
<li><a href="#">Book 1</a></li>
<li><a href="#">Book 2</a></li>
<li><a href="#">Book 3</a></li>
<li><a href="#">Book 4</a></li>
</ul>
</li>
<li id="item2"><a href="#">MUSIC</a></li>
<li id="item3"><a href="#">STORY</a>
<ul>
<li><a href="#">Story 1</a></li>
<li><a href="#">Story 2</a></li>
</ul>
</li>
<li id="item4"><a href="#">RELAX</a></li>
<li id="item5"><a href="#">PRODUCT</a></li>
</ul>
</div>
<div id="main-image-box">
<div class="clip facets" id="book">
<div class="container"/>
</div>
<div class="clip facets" id="audio-book">
<div class="container"/>
</div>
<div class="clip facets" id="story">
<div class="container"/>
</div>
<div class="clip facets" id="apply">
<div class="container"/>
</div>
<div class="clip facets" id="product">
<div class="container"/>
</div>
</div>
</div>
</div>
</div>
</b:if>
Saver lại template và tận hưởng!!!
