Xem demo bản hoàn thiện: LIVE DEMO
☼ 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://data.fandung.com/blog/demo/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);
}
/*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
Chắc Tài định dùng menu này à
Đúng là cái menu này khó tùy biến hơn menu của Vnex.
Hình nền phải làm chuẩn kích thước của các menu... muốn thêm bớt cũng hết sức kỳ công
Cái menu này nhìn có vẻ rất chuyên nghiệp cc1 bác nhể :D
Hướng dẫn luôn đi anh Dũng có thể nhiều người cần mà...:D
oh, toi nay anh se huong dan tiep.
Dao nay di lam toi 5h chieu nen ko co thoi gian. Moi nguoi thong cam nha.
Sorry vi comment ko dau
WOa :X
Cái menu này coi bộ đẹp hơn à nha :-?
Để mình thử xem ^^
Blog good.Fandung very pro...:D I love this blog ;;)
Hihi test thành công B-)
Mình sẽ dùng cái menu này :)
Thanks Fd nhiều :X
Q/C: Mọi người xem demo tại teentai.com nha ^^
tin tai, nghe như "thiên tai" í Tài nhỉ. :)
teentai good that :D dang ki 1 bai cho a e dung di.
HC thấy cái "TEAM Support" chỉ để cho có thôi bác dũng ạ :D
Theo HC bác nên tháo ra thì hơn hehe...Chỉ góp ý thôi còn tháo hay ko thì tùy bác :))
Cái này e nìn thấy rất hay và đep
Anh fandung hướng dẫn luôn đi để bọn e còn vooc
:D
sr nha, hôm nay bận tới 9h tối, giờ sẽ post bài hướng dẫn cho mọi người
cuối cùng cũng test xong cho mọi người.
Dạo này công việc hơi bận, nên mình không có nhiều thời gian. Nhưng mình sẽ cố gắng test thủ thuật và post bài mới cho mọi người.
Mọi người thông cảm cho mình nha.
Nảy giờ ngồi chờ FD post bài này,
Công nhận FD rất nhiệt tình,
Thanks nhá!
@AiKi :thanks bạn đã ủng hộ mình
Anh dung ơi
Anh thiết kế luôn cái menu ở footer của sohoa được ko ?
Phải đồng bộ chứ ,nếu không trông nó không hoàn thiện !
http://itvn-pro.blogspot.com
@itvn-pro : cái này đơn giản, anh làm đc
Bái phục dũng quá dũng à, nhắc lại là từ hồi biết em anh bỏ hẳn cái khoản tra cứu thủ thuật của bên nước ngoài rồi.
Để cám ơn em , anh đặt lo go em làm đối tác bên blog anh nhé,
cám ơn anh, hình như anh em mình cũng chưa liên kết thì phải, em cũng cho anh 2 chỗ bên em luôn :D
Cám ơn Dũng nhiều lắm.
anh dung chuong trinh gi ma` tao ra duoc cac' icon cho menu vay ...cho em xin
@Tác giả : icon menu nào bạn??? trong bài viết này ko có dùng icon. với lại mình cũng ko có dùng chương trình nào để tạo cả, chỉ dùng photoshop thôi
anh ơi ! cái dzụ icon menu đó thì bỏ qua đi .Sao em thấy hồi trước giờ các menu có sẵn trong template hoặc menu tự làm thiif đều gặp một trường hợp khó hiểu:
Ví dụ như cái menu trên nhé:
-khi vào trang chủ (xem click xem bài nào ,thì kích vào các menu thì nó chấp nhận, còn khi đã vào xem bài như:http://fandung.blogspot.com/2009/08/thu-thuat-yeu-cau-menu-sohoa-demo.html
thì kích vào mmenu nó lại hiện ra thông báo :Không tìm thấy trang
Xin lỗi, trang bạn đang tìm trong blog ******.
Đi tới trang chủ blog
Em hiểu hiểu mong anh chỉ giáo!!!!!!
@Tác giả :mình cũng hiểu sơ sơ ý của bạn rồi, tức là các menu đó nó chỉ chạy đúng khi đang ở trang chủ, phải thế không???
Có thể là trong code của menu đó, nó không đặt link trực tiếp. Ví dụ thông thường khi truy cập vào 1 nhãn ta sẽ có link như bên dưới :
http://fandung.blogspot.com/search/label/music
Nhưng để cho gọn nó sẽ rút ngắn link thành như thế này :
/search/label/music
Khi đó đoạn link rút gọn sẽ tự động được thêm vào trước nó link của trang hiện hành, tức là trang mà bạn đang xem.
Ví dụ bạn đang ở trang bài viết thì link nó sẽ như thế này :
http://fandung.blogspot.com/2009/08/thu-thuat-yeu-cau-menu-sohoa-demo.html/search/label/music
do đó mà bạn click vào liên kết của menu nó sẽ báo không có trang này.
@Tác giả: Anh nói đúng rồi đấy.Anh có cách nào khắc phục điều đó ??????....nhân tiên cho em hỏi luôn : làm sao để xóa dòng:"Hiển thị các bài đăng có nhãn là:*****"/Khi sẻach/label vậy
@Tác giả : xóa dòng code đó cũng đơn giản thôi, và thủ thuật này mình đã post rồi, bạn có thể tham khảo ở đây
http://fandung.blogspot.com/2009/04/thu-thuat-xoa-oan-message-cua-blogger.html
cái này hay wa'
Anh FD em cũng gà về cái khoản "đồ họa" này nên anh có thể bày anh cách làm các menu 1 , menu 2 ... không ! hoặc anh dung phần mềm nào quay phim desktop quay canh anh tạo menu đó rồi cho em xem với dcj vậy thì em cảm ơn anh nhjieeuf
@Tác giả : cái này chủ yếu em bỏ chút thời gian ra làm với photoshop thôi, cũng chỉ là các thao tác đơn giản thôi mà.
Anh ko có nhiều thời gian để hỗ trợ về khoản này, em thông cảm nha. Cố gắng mày mò đi, như thế sẽ tốt hơn .
anh FD ơi em muốn tăng chiều rộng menu thì em chỉnh chỗ nào ?
em muốn thêm menu thứ 6 thì em đã thêm vào template như anh rồi còn trong js em thêm như thế này http://www.sigmirror.com/files/34732_68f6l/Menu-sohoa.js]Menu-sohoa.js mà sao nó không xuất hiện ????
@Xzip : ở mỗi code của menu con có code điều chỉnh độ rộng đó bạn à, nếu điều chỉnh độ rộng thì điều chỉnh luôn cả ảnh của nó nhé
anh oi em muon thanh :
http://i342.photobucket.com/albums/o433/bkprobk/BgMenu.gif
va` thanh :
http://sohoa.vnexpress.net/Images/BgSubMenu.jpg
no' gan lai hon thi em thay doi nhu the nao` em chi? co' the^? lam` cho no' xa hon chu' ko lam` cho no' gan hon dc?
Ấy da dùng menu này cả tháng rồi, hình như bây giờ mình mới phát hiện là cái Menu của mình không nhấn nút tìm kiếm được :((
Chắc là lúc FD vừa đăng bài này là mình tùy biến chèn vào liền nên chưa thấy bản hoàn thiện của FD.
FD sửa chổ nào để nhấn nút Tìm kiếm được vậy nhỉ :-?
download file JS ở đâu anh Dũng nhỉ?
thanks anh Dũng nha, bài viết rất chi tiết, cc thì em cũng làm đc cái menu này r, cảm ơn rất nhìu vì bài viết of a, hi vọng anh sẽ cho ra thêm nhìu bài viết hay và đặc sắc như thế này nữa, hihi.
thanks.
Làm sao bỏ đi tìm kiếm và Link chuyền trang đi dc vậy a?
Link Demo và link "http://data.fandung.com/blog/demo/menu-sohoa/menu-sohoa.js" die rồi admin ơi !
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.