Thu Thuật yêu cầu : Menu Sohoa (Bản hoàn thiện) - Cập nhật 6/8/2009

Theo yêu cầu của bạn Tài (www.teentai.com)

[FD's BlOg] - Theo yêu cầu, hôm nay mình lại giới thiệu cho các bạn 1 style menu khác, cũng tương tự menu giống VnExpress, đó là menu giống trang Số Hóa. Ở style lần này, các bước thực hiện menu cũng tương tự, nhưng sẽ khó ở chỗ là việc tạo ảnh cho các menu. Do style này dùng ảnh để hiển thị menu. Do đó các menu chính các bạn đều phải tự design lấy.

Với các style khác, ta chỉ đánh tên menu vào các thẻ <li>là sẽ tạo được 1 thanh menu, nhưng ở đây, các menu sẽ phải được tạo từ các phần mềm đồ họa, tức là dùng hoàn toàn CSS để tạo menu. Tức là 1 menu chính ta sẽ cần có 2 ảnh để tạo nên nó.

Xem demo bản hoàn thiện: LIVE DEMO

Hình ảnh minh họa :

- Ở style menu này sẽ khác với menu VnE mà mình đã giới thiệu, ta sẽ không dùng mảng để tạo các menu, vì thế với menu này ta sẽ đỡ cực hơn và việc tạo các menu con sẽ thực hiển trược tiếp trên file JS (các bạn có thể tạo menu trong file JS hoặc nhúng thẳng code JS này vào template). Tuy vậy, bù lại ta sẽ phải tốn 1 ít công sức để tạo các menu chính từ các phần mềm đồ họa.

- Ở thủ thuật này mình có điều chỉnh lại ô search cho phù hợp với blogspot, tức là tìm kiếm ngay trên trang blog của bạn.

☼ 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 này vào sau trước thẻ đóng </head>

<script type="text/javascript" language="javaScript">
var RelatedFolder=1;
var PAGE_ID=1;


</script>


<script type="text/javascript" language="javascript" src="http://fandung.110mb.com/JS-files/menu-sohoa/menu-sohoa.js"></script>


<style type="text/css">
#top-menu {
width: 964px;
height: 27px;
position: relative;
padding-top: 10px;
}


.topmenu-left {
width: 11px;
height: 27px;
background: url(http://sohoa.vnexpress.net/images/combor-corner.gif) no-repeat 0px -28px;
}


.topmenu-mid {
width: 950px;
height: 27px;
background: url(http://sohoa.vnexpress.net/images/1px-loop.gif) repeat-x 0px 0px;
overflow: hidden;
}


.topmenu-right {
width: 3px;
height: 27px;
background: url(http://sohoa.vnexpress.net/images/combor-corner.gif) no-repeat -3px 0px;
}


.s_logo {
width: 44px;
padding-top: 7px;
text-align: center;
}


.s_logo img {
width: 29px;
height: 10px;
border: none; }


.menu_active {
background: url(http://sohoa.vnexpress.net/images/1px-loop.gif) repeat-x 0px -28px;
height: 20px;
padding: 7px 7px 0px;
text-align: center;
}


.menu_active a {
font: bold 11px Tahoma;
color: #231f20;
}


.Menu{
width:962px;
float:left;
background-image:url(http://i342.photobucket.com/albums/o433/bkprobk/BgMenu.gif);
height:35px;
background-repeat:no-repeat;
position:relative;
}


.MarrginTop{
width:100%;
height:10px;
overflow:hidden;
}


.PaddingLeft{
width:63px;
float:left;
height:5px
}


.menuDefault102 {
background: url(http://sohoa.vnexpress.net/images/menu/menu100.gif) repeat-x;
width: 2px;
height: 23px;
float:left;
}


.bgSubMenu {
background-image: url(http://sohoa.vnexpress.net/Images/BgSubMenu.jpg);
height:22px;
background-repeat:no-repeat;
float:left;
width:962px;
overflow:hidden;
}


.MenuTime{
width:175px;
height:23px;
color:#848484;
font-family:Arial;
font-size:11px;
font-weight:bold;
float:left;
line-height:23px;
text-align:left;
margin-left:10px
}


.subMenu{
float:left;
font-family:tahoma;
font-size:11px;
height:16px;
margin-top:6px
}


.subMenu a{
color:#373737;
text-decoration:none;
}


.TextSearch{
background:url(http://i342.photobucket.com/albums/o433/bkprobk/search-bg.gif) no-repeat;
width:180px;
height:23px;
float:left;
padding-left:5px;
margin-left:7px;
}


.HyperLink{
background-image:url(http://sohoa.vnexpress.net/Images/menu/Menu8.gif);
width:118px;
height:23px;
background-repeat:no-repeat;
float:left;
margin-left:10px;
cursor:pointer;
position:relative
}


#MNSubLink{
position:absolute;
border:1px solid #888;
background-color:#FFF;
width:109px;
display:none;
z-index:1001;
top:23px;
right:2px;
height:133px;
overflow:hidden;
padding-left:5px;
}


.nodsubLink{
background-image:url(http://sohoa.vnexpress.net/Images/menu/menu10000.gif);
width:10px;
float:left;
background-repeat:no-repeat;
background-position:left;
float:left;
height:25px;
overflow:hidden;
margin:0px;
padding:0px;
}


#MNSubLink .subLink{
width:90px;
text-align:left;
font-family:tahoma;
font-size:11px;
height:25px;
line-height:25px;
float:left;
overflow:hidden;
margin:0px;
padding:0px;
}


#MNSubLink .SpesubLink{
width:100px;
float:left;
border-bottom:1px dotted;
height:1px;
overflow:hidden;
margin:0px;
padding:0px;}


.seach-button {
width: 30px;
height:22px;
background:url(http://sohoa.vnexpress.net/Images/menu/MenuButtonSearch.jpg);
}


.seach-button:hover {
width: 30px;
height:22px;
background:url(http://i342.photobucket.com/albums/o433/bkprobk/seach-botton-hv2.gif);
}

/* CODE CSS CỦA MENU CHÍNH*/

/*Menu HOME*/
.menuDefault1 {
background:url(http://i342.photobucket.com/albums/o433/bkprobk/home-2.gif) repeat-x;
cursor: Pointer;
width: 76px;
height: 23px;
float:left;
margin-left:0px;
}
.menuActive1_1 {
background:url(http://i342.photobucket.com/albums/o433/bkprobk/home-hv.gif) repeat-x;
cursor: Pointer;
width:76px;
height: 23px;
float:left;
}
/*END Menu HOME*/


/*Menu 1*/
.menuDefault2 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu1.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
margin-left:37px;
}
.menuActive2_2 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu1-hv.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
margin-left:37px;
}
/*EBND Menu 1*/


/*Menu 2*/
.menuDefault3 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu2.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}


.menuActive3_3 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu2-hv.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}
/*END Menu 2*/


/*Menu 3*/
.menuDefault4 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu3.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}
.menuActive4_4 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu3-hv.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}
/*END Menu 3*/


/*Menu 4*/
.menuDefault5 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu4.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}


.menuActive5_5 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu4-hv.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}
/*END Menu 4*/


/*Menu 5*/
.menuDefault6 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu5.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}


.menuActive6_6 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu5-hv.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}
/*END Menu 5*/


</style>

- Khi bạn đã có các ảnh cho các menu chính của mình thì hãy thay thế link cho chúng (trong đoạn code CSS ở trên - các link in đậm màu đen)
- Mỗi code CSS của 1 Menu chính đều có độ rộng và chiều cao, các giá trị này chính là kích thước của ảnh mà bạn đã tạo.
- Lưu ý : không nên thay đổi tên id của các code CSS của các menu chính. Khi muốn tạo thêm menu khác thì cứ thêm code CSS tương tự như bên dưới :

/*Menu 6*/
.menuDefault7 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu6.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}


.menuActive7_7 {
background: url(http://i342.photobucket.com/albums/o433/bkprobk/menu6-hv.gif) repeat-x;
cursor: Pointer;
width: 57px;
height: 25px;
float:left;
}
/*END Menu 6*/

= Việc tiếp theo phải làm ở bước 3 này là bạn phải download file JS (menu-sohoa.js) về để chỉnh sửa lại. Việc chỉnh sửa này chính là bước tạo các Submenu .
- Sau khi download về, dùng NotePad mở nó lên, và tìm đoạn code như bên dưới :

function setFolderDefault() {
if (FolderId == 10000) {
FolderId = 1;
flagOtherFolder = false;


} else if (FolderId != 2 && FolderId != 3 && FolderId != 4 && FolderId != 5 && FolderId != 6) {
FolderId = 1;
flagOtherFolder = false;
}
document.getElementById(FolderId).className = 'menuActive' + FolderId + '_' + FolderId;
writeSubmenu(FolderId);
}


//Đoạn code màu cam ở trên : nếu bạn có thêm nhiều menu chính khác (menu 6, menu 7) thì thêm vài đoạn code vào như && FolderId != 7 && FolderId != 8 ...
// Xóa đoạn hướng dẫn này khi thực hiện




// Tạo SubMenu ở code bên dưới


function writeSubmenu(id) {
//alert(id);


if (id == 1) {
//home
document.getElementById("subMenu").innerHTML = "<div style='color:#848484;font-style:Arial;margin-top:-1px;'><img src='http://sohoa.vnexpress.net/images/menu/iconPhone.gif' align=absmiddle' style='margin'/><a href='http://kontactr.com/user/fandung'> Liên hệ </a> <img src='http://sohoa.vnexpress.net/images/menu/iconMenu.gif' align='top' style='margin' style='margin-top:-2px' /> <a href='#'>Quảng cáo </a> <img src='http://i342.photobucket.com/albums/o433/bkprobk/rss-ico.gif' align='top' style='margin' style='margin-top:-2px' /> <a href='http://feeds2.feedburner.com/fandung'> RSS</a></div>";


document.getElementById("subMenu").style.marginLeft = "0px";
DelayId = id;
}


else if (id == 2) {
//menu1
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> SubMenu 1.1 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> SubMenu 1.2 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> SubMenu 1.3 </a>";
document.getElementById("subMenu").style.marginLeft = "-5px";
DelayId = id;
}


else if (id == 3) {
// menu2
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> SubMenu 2.1 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> SubMenu 2.2 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> SubMenu 2.3 </a>";
document.getElementById("subMenu").style.marginLeft = "20px";
DelayId = id;
}


else if (id == 4) {
//menu3
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> SubMenu 3.1 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> SubMenu 3.2 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> SubMenu 3.3 </a>";
document.getElementById("subMenu").style.marginLeft = "22px";
DelayId = id;
}


else if (id == 5) {
//menu4
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> Submenu 4.1 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> Submenu 4.2 </a>";
document.getElementById("subMenu").style.marginLeft = "130px";
DelayId = id;
}


else if (id == 6) {
//menu5
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> Submenu 5.1 </a> <img src='" + strLinkImg + "' /> <a class='aSubMenu' href='#'> Submenu 5.2 </a>";
document.getElementById("subMenu").style.marginLeft = "190px";
DelayId = id;
}


else {
setFolderDefault();
}
}

- Hãy thêm cáo Submenu vào tương tự như code mẫu,
- Đoạn code màu tím chíh là khoảng cách căn lề trái cho các Submenu.(để điều chỉnh cho Submenu hiển thị ngay bên dưới menu chính)
- Sau khi chỉnh sửa xong, save file JS lại và up lại lên host để lấy link.
- Ngoài ra các bạn có thể nhúng thẳng trực tiếp file JS vào code template, như thế sẽ tiện cho việc thêm bớt SubMenu. Tuy nhiên khi nhúng vào chắc chắn nó sẽ báo 1 và lỗi nhất định, vì thế phải modify lại code 1 chút. (do mình không có thời gian nên không test việc này)
- Tuy nhiên để đơn giản các bạn nhúng thẳng code JS của file JS menu-sohoa.js vào chung trong code HTML của thủ thuật (tức là dán vào widget HTML/Javascript) như thế sẽ không bị báo lỗi như nhúng vào code template.

4. Save template.

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

<div class="Menu">
<div class="MarrginTop"></div>
<div class="PaddingLeft"></div>


<a href="http://fandung.blogspot.com"><div id="1" class="menuActive1_1" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"></div></a>
<div class="menu1"></div>


<a href="#"><div id="2" class="menuDefault2" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"></div></a>
<div class="menuDefault102"></div>


<a href="#"><div id="3" class="menuDefault3" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"></div></a>
<div class="menuDefault102"></div>


<a href="#"><div id="4" class="menuDefault4" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"></div></a>
<div class="menuDefault102"></div>


<a href="#"><div id="5" class="menuDefault5" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"></div></a>
<div class="menuDefault102"></div>


<a href="#"><div id="6" class="menuDefault6" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"></div></a>


<div class="TextSearch">


<form action="http://www.google.com/search" target="_blank" method="get">
<input maxlength="255" style="width: 130px; height:20px; background:#e6e6e6;" value="Nhập từ khóa" name="q" type="text"/>
<input class="seach-button" value="" type="submit"/>
<input checked="checked" value="fandung.blogspot.com" name="sitesearch" type="hidden"/>
</form>


</div>


<div class="HyperLink" id="HyperLink" onclick="displayDiv('MNSubLink');setDelayHiddenDiv('MNSubLink',2000);">
<div style="display: none;" id="MNSubLink" onmouseout="setDelayHiddenDiv(this.id,1000);">
<div class="nodsubLink"></div>
<div class="subLink" onclick="window.open('#')">Site 1 </div>
<div class="SpesubLink"></div>
<div class="nodsubLink"></div>
<div class="subLink" onclick="window.open('#')">Site 2</div>
<div class="SpesubLink"></div>
<div class="nodsubLink"></div>
<div class="subLink" onclick="window.open('#')">Site 3</div>
<div class="SpesubLink"></div>
<div class="nodsubLink"></div>
<div class="subLink" onclick="window.open('#')">Site 4</div>
<div class="SpesubLink"></div>
<div class="nodsubLink"></div>
<div class="subLink" onclick="window.open('#')">Site 5</div>
</div>


</div>
</div>
<div class="bgSubMenu" onmouseover="clearTimeout(t);clearTimeout(t1);" onmouseout="reChangeStyle(DelayId);">
<div class="MenuTime" id="MN1">BlOg - FD | Tips 4 Blogger</div>
<div style="margin-left: 360px;" class="subMenu" id="subMenu"></div>
</div>
</div>

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