[ Yêu cầu ] Tạo menu giống trang phununet.com

Theo yêu cầu của bạn vnbook.tk (vnbook.tk)

[FD's BlOg] - Tiếp tục loạt bài về tạo thanh menu cho blogspot, hôm nay mình lại giới thiệu cho các bạn 1 style menu khác nữa. Với thanh menu này ta sẽ dùng đến jQuery. Đặc điểm của style menu này là mỗi Menu chính sẽ có 1 màu nền riêng, và có các submenu nằm ngay bên dưới sẽ hiển thị khi rê chuột vào (tương tự như các menu VnE mà mình đã giới thiệu).

Xem demo : LIVE DEMO

Hình ảnh minh họa :

☼ Các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML

3. Chèn đoạn code bên dưới vào trước thẻ đóng </head> (nếu chèn đoạn code JS bên dưới vào trong code template nó báo lỗi thì hãy chèn thẳng nó vào trong widget HTML/javascript chứa code của thủ thuật)

<link href="http://data.fandung.com/blog/demo/menu-color/menu.css" rel="stylesheet" type="text/css">


<style type="text/css">
.color-menu {
overflow: hidden;
margin-left: auto;
margin-right: auto;
width: 655px;
text-align: left;
font-family: Arial;
}
</style>


<script src="http://data.fandung.com/js/jquery.js"></script>


<script type="text/javascript">


function changeSub(i)
{
$(".DDSubMenu").css("display","none");
if(i == 0)
{
$('#DDSub0').css('display','block');
}
if(i == 1)
{
$('#DDSub1').css('display','block');
}
if(i == 2)
{
$('#DDSub2').css('display','block');
}
if(i == 3)
{
$('#DDSub3').css('display','block');
}
if(i == 4)
{
$('#DDSub4').css('display','block');
}
if(i == 5)
{
$('#DDSub5').css('display','block');
}
if(i == 6)
{
$('#DDSub6').css('display','block');
}
if(i == 7)
{
$('#DDSub7').css('display','block');
}
if(i == 8)
{
$('#DDSub8').css('display','block');
}
if(i == 9)
{
$('#DDSub9').css('display','block');
}
if(i == 10)
{
$('#DDSub10').css('display','block');
}
if(i == 11)
{
$('#DDSub11').css('display','block');
}
if(i == 12)
{
$('#DDSub12').css('display','block');
}


}


</script>


/* Chú thích : Đoạn code JS trên là để hiển thị các Submenu con, nếu bạn có nhiều hơn 12 menu chính thì cứ việc thêm code tương tự vào, dư cũng ko sao, nhưng tốt nhất nên thêm vừa đủ. */
/* Xóa đoạn chú thích này khi thực hiện */


<script type="text/javascript">


function getParamURL( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}


function menuInit()
{
var catId = getParamURL("Cat_ID");
var id= parseInt(catId);
if(id==null || id.toString()=="NaN")
id=0;
$('.item[id^=div]').each(function(){
var id = $(this).attr('id');
$('#'+id+' > div').css('background',$(this).attr('colortab'));
$('#'+id+' > div > div').css('background',$(this).attr('colortab'));
});
$('.item > [class^=item]').css('background-color')
var obj = $('.item[select="'+ id.toString() + '"]');
if(id!=0)
$('#' + obj.attr('id')).attr('class','item_select');
$('.item_select > div').css("background",$('.item_select').attr('colortab'));
$('.item_select > div > div').css("background",$('.item_select').attr('colortab'));
$('.horizontalbar').css("background",$('.item_select').attr('colortab'));
$('.item').mouseover(function(){


$('.item_selected').attr('class','item');
$(this).attr('class','item_selected');
$('.horizontalbar').css("background",$(this).attr('colortab'));
changeSub($(this).attr('select'));
})


/// Control link of menu's item
var url = window.location.href;
var headUrl = window.location.href;
if(headUrl.indexOf("ChuyenMuc")>=0 && headUrl.indexOf("ChuyenMucCon")<0)
{
if(headUrl.indexOf("?")>=0)
headUrl = headUrl.substring(0,url.indexOf("?"));


}
else
{
headUrl = "#";
}
$('.item').click(function(){
if($(this).attr("select")=="0")
{
window.location.href = "http://www.fandung.com";
return;
}
// thay dòng http://wwww.fandung.com thành địa chỉ URL blog của bạn


if(url.indexOf("&")>=0)


url = headUrl;
window.location.href = url;
})
}
</script>

4. Save template
5. Tạo 1 widget HTML/Javascript và dán code HTML bên dưới vào :

<div class="color-menu">
<div>

<div style="height: 29px; padding-left: 10px;">
<div id="div0" class="item" style="width: 56px;" select="0" colortab="#ff6d00">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

<div class="item5">
<div class="inside">Home</div>
</div>
</div>

<div class="item" style="width: 2px;"> </div>

<div id="div1" class="item" style="width: 56px;" select="1" colortab="#afc904">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

<div class="item5">
<div class="inside">Menu 1</div>
</div>
</div>

<div class="item" style="width: 2px;"> </div>

<div id="div2" class="item" style="width: 56px;" select="2" colortab="#FA0707">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

<div class="item5">
<div class="inside">Menu 2</div>
</div>
</div>

<div class="item" style="width: 2px;"> </div>

<div id="div3" class="item" style="width: 56px;" select="3" colortab="#A0CAC9">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

<div class="item5">
<div class="inside">Menu 3</div>
</div>
</div>

<div class="item" style="width: 2px;">
</div>

<div id="div4" class="item" style="width: 56px;" select="4" colortab="#980270">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

<div class="item5">
<div class="inside">Menu 4</div>
</div>
</div>

<div class="item" style="width: 2px;"> </div>

<div id="div5" class="item" style="width: 56px;" select="5" colortab="#0839D8">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

<div class="item5">
<div class="inside">Menu 5</div>
</div>
</div>

<div class="item" style="width: 2px;"> </div>

<!-- Chú thích (xóa đoạn code in nghiêng này đi khi thực hiện)-->

<!--code trên dùng với 5 menu chính, nếu muốn thêm meu chính thì chỉ việc thay thêm code như bên dưới vào ngay vị trí này :

<div id="div6" class="item" style="width: 56px;" select="6" colortab="#F839D8">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

<div class="item5">
<div class="inside">Menu 6</div>
</div>
</div>

<div class="item" style="width: 2px;"> </div>

Code màu cam trong đoạn code trên là để tùy chỉnh độ rộng của các menu chính cho phù hợp với với tên hiển thị của các menu chính. Như trong bản demo, mình đều dùng chung kích thước là 56px.

Code màu xanh chính là màu nền của menu chính.
Code màu đỏ là để liên kết với SubMenu
-->

<!-- END Chú thích -->

</div>

<div class="horizontalbar" style="background: rgb(0, 98, 189) none repeat scroll 0% 0%; overflow: hidden; height: 5px; z-index: 1000000000;"></div>

</div>

<!-- START SubMenu -->

<div style="overflow: hidden; height: 27px; clear: both; color: rgb(51, 51, 51); width: 100%; text-align: right; background-image: url(http://farm4.static.flickr.com/3448/3811418642_f21be69ed6_o.png); background-repeat: repeat;" id="divSubMenu">

<div id="DDSub0" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 480px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="http://www.fandung.com/feeds/posts/default">RSS posts</a> | <a href="http://www.fandung.com/feeds/comments/default">RSS Comments</a>
</div>
</div>

<div id="DDSub1" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 488px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 1.1</a> | <a href="#">Sub 1.2</a> | <a href="#">Sub 1.3</a>
</div>
</div>

<div id="DDSub2" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 430px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 2.1</a> | <a href="#">Sub 2.2</a> | <a href="#">Sub 2.3</a>
</div>
</div>

<div id="DDSub3" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 372px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 3.1</a> | <a href="#">Sub 3.2</a> | <a href="#">Sub 3.3</a>
</div>
</div>

<div id="DDSub4" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 312px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 4.1</a> | <a href="#">Sub 4.2</a> | <a href="#">Sub 4.3</a>
</div>
</div>

<div id="DDSub5" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 255px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 5.1</a> | <a href="#">Sub 5.2</a> | <a href="#">Sub 5.3</a>
</div>
</div>

<!-- Chú thích (xóa đoạn code in nghiêng này đi khi thực hiện) -->
<!--
Nếu muốn thêm các Submenu cho các menu tiếp theo (Menu 6, Menu 7, ...) thì các bạn thêm code bên dưới vào ngay vị trí này:

<div id="DDSub6" class="DDSubMenu" style="overflow: hidden; height: 28px; width: 100%; display: none;">

<div style="padding-top: 5px; padding-left: 10px; padding-right: 197px; font-size: 12px; color: rgb(51, 51, 51);">
<a href="#">Sub 6.1</a> | <a href="#">Sub 6.2</a> | <a href="#">Sub 6.3</a>
</div>
</div>

-->
<!-- END Chú thích -->

</div>

<!-- END SubMenu -->

<script>
menuInit();
</script>

</div>

- Chú ý đoạn code màu tím, đây chính là code để căn cho các SubMenu nằm ngay bên dưới Menu chính (đây là lệnh căn lề phải, các bạn điều chỉnh lại để cho các Submenu dược hiển thị tốt nhất)

Chúc các bạn thành công.