[Updated] K14 - Pro Menu (với hiệu ứng prodown)

Lấy ý tưởng từ việc thực hiện demo cho bài viết Tạo Menu Thanh menu ngang có sổ dọc xuống mình dự định sẽ updated thủ thuật lên bằng việc tạo các giao diện khác nhau cho menu khi xem ở các trang khác nhau, ví dụ như các trang label. Nhưng sau đó mình nhớ đến kênh14 cũng có menu như vậy (chỉ khác là không có dropdown) mà giao diện lại đẹp nữa, nên mình quyết định Rip menu này. Và ở bài này menu sẽ không có hiệu ứng dropdown, mình dự định sẽ thêm hiệu ứng dropdown trong thời gian tới.

Xem DEMO

Hình ảnh minh họa :

Updated: Đã cập nhật hiệu ứng sổ dọc cho menu, các bạn có thể xem ở bên dưới

Do làm biếng design giao diện cho nó, nên mình lấy hình nên bên kênh 14 về rồi fix lại để giới thiệu cho mọi người. Và sau đây là 1 số tính năng của nó :
- Tự động thay đổi giao diện của menu cho các trang định sẵn.
- có hiệu ứng trang hiện hành (current) trên menu.
- có 6 kiểu giao diện cho các lựa chọn để thay đổi.

Sau đây là các bước thực hiện :
- Tạo 1 widget HTML/javascript ở nơi muốn đặt menu (tốt nhất là trên header của blog), sau đó dán đoạn code bên dưới vào :

<style type="text/css">
#promenu ul li a:hover {text-decoration:none;}
#promenu {
background-repeat: repeat-x;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoMNjovYM1w7_9yyu0AnZOR8I8dmct-rbiUjQEPFCF8iKhyuOPu_hx1tJmYRBcLLZOGOtkmr4QBXwv5nUKlMjxnFiQ6nck1D8tzKuF9GfKrHheQ73KB7FzI901N4WTHUW0H4rrgUse_zh2/s400/1-6-bg.png);
width: 100%;
height: 32px;
}
.menu {
list-style: none;
width: 100%;
margin: auto!important;
}
.menu li {
float: left;
text-align: center;
padding:0!important;
}
.menu li a {
color: white;
}
.menu .active, .menu li:hover {
background-position: 0 -34px;
float: left;
}
.menu .active span, .menu span:hover {
background-position: 100% -34px;
float: left;
line-height: 30px;
height: 30px;
}
.menu li a span {
font: 12px/31px Tahoma;
font-weight: 700;
display: block;
text-align: center;
padding: 0 8px 0 9px;
}
.menusep {
background-position: 0 0;
height: 32px;
line-height: 32px;
width: 2px;
}
</style>

<script type="text/javascript">
//<![CDATA[
var style1=["0px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuOW6muz6jridQ_GVuOqyslWojI2D9M1QuTcTecEXr2YuEbMGkUpR61vjWQ98cECucLct1fsbxAlZKbRx2jCo_OSn9oTK6OcDCzCxuGRc4OODIglHXlpd-c6bKK9_VgiA9z7AtOFdqMcVK/s318/style1-sp.png"];
var style2=["-40px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDIqUSpC7C7664OrMecSIs5n44iNMqY4b5gTb-xE15B1QyMpwkgKM0D84pH-Q2bDjXp1O7sHOtuFEbY0NjYLVlyfzCzVEcDKrr_z8s90t3sVpEgt2yRbwfibZlqWZTzeOHUBKShMsOFD4W/s318/style2-sp.png"];
var style3=["-80px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8DYJPThPpaaI3RbTbw3NtTqJZdH_VFcW9LTVtlaEUuG-QsmmfwtZ1vCIn6YWQCrWJHYnDLdOGMEUFuOloTFV59ZddFXRbqkr4xaIXIlVUZUKPQMJMEeraJpKwO6LXhvkuZ2Wk24Qrsr9/s318/style3-sp.png"];
var style4=["-120px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0ncBkC-ZDCQXCRaKIp8m2ml4Ql3wqQ00R-yAaB47HVQN4o0hGnt6ANZ5stIcLPgv_CykusSH1O0pgQyKSmafmD2R3FdA_FQ0kFmSRVII439S3-mYQAAEwz0fxXvJFzBeVC8wq6WxiTHM/s318/style4-sp.png"];
var style5=["-160px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCGx2d0sLaD-kzeKQhIWRT8nTNY8pU709Yatlk0bdU3k9KD6BMKyMylxbJZkjR4r2O_PDbTNo0xyGMrUUCTX-CIPlNJbSW2qMpGKIXRRrOzDqXisqdWxSiGMoqCSlGDQp_JKAYV6Au52vk/s318/style5-sp.png"];
var style6=["-200px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzuc7t6x6-_zyweCqlmerqmzGW4kuw_iTspZ5cTb40-TX77N6WtJe72CMkZMXYjVPnLRo08H8580ixcdCN-30g3LZpk3CTNePIZHkNaRU-irRcW_YzMPsBzAt1bD4FfwupWPtr9c55HqLW/s318/style6-sp.png"];

var m0=["http://demo.fandung.com","Home","home_id"];
var m1=["link_menu1","Menu1","m_id1"];
var m2=["link_menu2","Menu2","m_id2"];
var m3=["link_menu3","Menu3","m_id3"];
var m4=["link_menu4","Menu4","m_id4"];
var m5=["link_menu5","Menu5","m_id5"];
var m6=["link_menu6","Menu6","m_id6"];

var ttmenu = [m0,m1,m2,m3,m4,m5,m6];

var n=ttmenu.length;
var list_menu=[];
var list_active=[];
var c_menu='';
var m_homepage='http://demo.fandung.com';
var h_cond=m_homepage+'/search';

var active_cond = location.href;
var home_cond=active_cond.split("?")[0];

var bg_pos='';
var sp_img='';

if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else {bg_pos=style1[0];sp_img=style1[1];}

var mcss = document.createElement('style');
mcss.type = 'text/css';
mcss.innerHTML = '#promenu {background-position: 0 '+bg_pos+'} .menu li:hover, .menu .active, .menu .active span, .menusep, .menu span:hover {background-image: url('+sp_img+')}';
document.body.appendChild(mcss);

c_menu +='<div id="promenu"><ul class="menu">';

for (var i=0;i<n;i++) {

if ((home_cond==m_homepage)||(home_cond==h_cond)) {list_active[0]='class="active"';}
else if (active_cond.indexOf(ttmenu[i][0])!=-1) {list_active[i]='class="active"';} else {list_active[i]='';}

list_menu[i]='<li><a href="'+ttmenu[i][0]+'" '+list_active[i]+' id="'+ttmenu[i][2]+'"><span>'+ttmenu[i][1]+'</span></a></li>';
c_menu +=list_menu[i];
if (i<n-1) {c_menu +='<li class="menusep"> </li>';}
}
c_menu +='</ul></div>';
document.write(c_menu);

//]]>
</script>

Một vài hướng dẫn :
- Việc đầu tiên là thay http://demo.fandung.com thành tên miền của blog bạn, nhớ là không có dấu (/) theo sau tên miền.
- Để thêm menu, bớt menu, thay đổi tên hiển thị của menu, thay đổi link liên kết của menu,... các bạn chỉnh sửa ở đoạn code như bên dưới :

...
...
var m0=["http://demo.fandung.com","Home","home_id"];
var m1=["link_menu1","Menu1","m_id1"];
var m2=["link_menu2","Menu2","m_id2"];
var m3=["link_menu3","Menu3","m_id3"];
var m4=["link_menu4","Menu4","m_id4"];
var m5=["link_menu5","Menu5","m_id5"];
var m6=["link_menu6","Menu6","m_id6"];

var ttmenu = [m0,m1,m2,m3,m4,m5,m6];
...
...

- http://demo.fandung.com thay bằng địa chỉ trang chủ của blog bạn
- link_menu1, link_menu2, ... là đia chỉ liên kết của các menu.
- Menu1, Menu2, ... là tên hiển thị của các menu.
- nếu muốn thêm nhiều menu nữa thì các bạn thêm code tương tự như bên dưới :

...
...
var m0=["http://demo.fandung.com","Home","home_id"];
var m1=["link_menu1","Menu1","m_id1"];
var m2=["link_menu2","Menu2","m_id2"];
var m3=["link_menu3","Menu3","m_id3"];
var m4=["link_menu4","Menu4","m_id4"];
var m5=["link_menu5","Menu5","m_id5"];
var m6=["link_menu6","Menu6","m_id6"];
var m7=["link_menu7","Menu7","m_id7"];
var m8=["link_menu8","Menu8","m_id8"];

var ttmenu = [m0,m1,m2,m3,m4,m5,m6,m7,m8];
...
...

- để tùy chọn style cho menu ở mỗi trang, các bạn chỉnh sửa ở đoạn code bên dưới :

...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...

- ttmenu[1][0], ttmenu[2][0], ..., ttmenu[6][0] ; đây là các phần tử trong mảng 2 chiều ttmenu, tương ứng với địa chỉ liên kết của các menu : Menu1, Menu2, ..., Menu6
- ở trên menu0, tức là menu HOME mình cho style mặc định là style1. cùng style với các trang liên kết không có trong menu (ví dụ các trang archive hoặc trang bài viết, ...) , hoặc các liên kết không được chọn style để hiển thị.
- code trên sẽ được hình dung như bên dưới :

Menu0 ------ style1
Menu1 ------ style2
Menu2 ------ style3
Menu3 ------ style4
Menu4 ------ style5
Menu5 ------ style6
Menu6 ------ style2
Trang khác ------ style1

- Nếu muốn thay đổi style cho các trang, các bạn chỉ cần đổi tên style1, style2,... thành các style khác là được. tức là các vị trí trong code bên dưới :

...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...

- Nếu như có nhiều menu thì các bạn cứ thêm code như bên dưới để chọn style cho nó :

...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[7][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[8][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...

- lưu ý : ttmenu[7][0], và ttmenu[8][0] là liên kết của các Menu7, và Menu8.
- nếu muốn chỉ 1 trang nào đó có giao diện đặc biệt khác với các trang còn lại (ở đây mình ví dụ là trang Menu1) thì đoạn code ở trên sẽ chỉ còn như bên dưới :

...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...

- Đoạn code trên có nghĩa là chỉ có trang Menu1 là có giao diện riêng biệt là Style2, còn các trang khác sẽ có giao diện Style1.

Như vậy mình hướng dẫn đã xong. các bạn cứ test thử, nếu có trục trặc gì mình sẽ fix lại bài viết và cập nhật thêm hướng dẫn.

----- UPDATED -----

K14 - Promenu (với hiệu ứng sổ dọc)

- ở bản update này, mình sẽ cập nhật thêm tính năng thêm submenu cho menu chính. Tính năng này mình kết hợp từ bài viết "Tạo menu nằm ngang với hiệu ứng sổ dọc".
- Để thực hiện việc cập nhật này, các bạn phải xem lại bài viết Tạo Menu Thanh menu ngang có sổ dọc xuống

Xem DEMO

Hình ảnh minh họa :

- Sau đây là code mẫu của thủ thuật đã updated, các bạn thực hiện theo hướng dẫn của bài này và bài Tạo Menu Thanh menu ngang có sổ dọc xuống để có thể chỉnh sửa lại từ code mẫu :

<script src="http://fandung.googlecode.com/svn/trunk/js/dropdown2.js" type="text/javascript"></script>

<style type="text/css">
#promenu ul li a:hover {text-decoration:none;}
#promenu {
background-repeat: repeat-x;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoMNjovYM1w7_9yyu0AnZOR8I8dmct-rbiUjQEPFCF8iKhyuOPu_hx1tJmYRBcLLZOGOtkmr4QBXwv5nUKlMjxnFiQ6nck1D8tzKuF9GfKrHheQ73KB7FzI901N4WTHUW0H4rrgUse_zh2/s400/1-6-bg.png);
width: 100%;
height: 32px;
}
.menu {
list-style: none;
width: 100%;
margin: auto!important;
}
.menu li {
float: left;
text-align: center;
padding:0!important;
}
.menu li a {
color: white;
height:30px;
display:block;
}
.menu .active, .menu li:hover {
background-position: 0 -34px;
float: left;
}

.menu .active span, .menu span:hover {
background-position: 100% -34px;
float: left;
line-height: 30px;
height: 30px;
}

.menu li a span {
font: 12px/31px Tahoma;
font-weight: 700;
display: block;
text-align: center;
padding: 0 8px 0 9px;
}
.menusep {
background-position: 0 0;
height: 32px;
line-height: 32px;
width: 2px;
}
.promenu_sub {
background-repeat: repeat-x;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Xoho15gHwt-oDYOq8kNl7YO93QselbSS4C3voO0ZjYgkqFAJKzSFJj4pJCh2z2ZCAIA3L4KEAbm9ZkBbRFa9lgxDqjsOjFGwVN-OAuVCsKB0kqACRzbM0P1XpzqH25KREev4iQWBvpQ6/s240/1-6-bg_sub2.png);
margin-top:1px;
padding:1px;
color: #fff;;
margin: 1 1px;
padding: 7px 12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
cursor:pointer;
border-top:1px solid #ededed;
}
</style>

<script type="text/javascript">
//<![CDATA[
var style1=["0px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuOW6muz6jridQ_GVuOqyslWojI2D9M1QuTcTecEXr2YuEbMGkUpR61vjWQ98cECucLct1fsbxAlZKbRx2jCo_OSn9oTK6OcDCzCxuGRc4OODIglHXlpd-c6bKK9_VgiA9z7AtOFdqMcVK/s318/style1-sp.png"];

var style2=["-40px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDIqUSpC7C7664OrMecSIs5n44iNMqY4b5gTb-xE15B1QyMpwkgKM0D84pH-Q2bDjXp1O7sHOtuFEbY0NjYLVlyfzCzVEcDKrr_z8s90t3sVpEgt2yRbwfibZlqWZTzeOHUBKShMsOFD4W/s318/style2-sp.png"];

var style3=["-80px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8DYJPThPpaaI3RbTbw3NtTqJZdH_VFcW9LTVtlaEUuG-QsmmfwtZ1vCIn6YWQCrWJHYnDLdOGMEUFuOloTFV59ZddFXRbqkr4xaIXIlVUZUKPQMJMEeraJpKwO6LXhvkuZ2Wk24Qrsr9/s318/style3-sp.png"];

var style4=["-120px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0ncBkC-ZDCQXCRaKIp8m2ml4Ql3wqQ00R-yAaB47HVQN4o0hGnt6ANZ5stIcLPgv_CykusSH1O0pgQyKSmafmD2R3FdA_FQ0kFmSRVII439S3-mYQAAEwz0fxXvJFzBeVC8wq6WxiTHM/s318/style4-sp.png"];

var style5=["-160px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCGx2d0sLaD-kzeKQhIWRT8nTNY8pU709Yatlk0bdU3k9KD6BMKyMylxbJZkjR4r2O_PDbTNo0xyGMrUUCTX-CIPlNJbSW2qMpGKIXRRrOzDqXisqdWxSiGMoqCSlGDQp_JKAYV6Au52vk/s318/style5-sp.png"];

var style6=["-200px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzuc7t6x6-_zyweCqlmerqmzGW4kuw_iTspZ5cTb40-TX77N6WtJe72CMkZMXYjVPnLRo08H8580ixcdCN-30g3LZpk3CTNePIZHkNaRU-irRcW_YzMPsBzAt1bD4FfwupWPtr9c55HqLW/s318/style6-sp.png"];

var m0=["http://demo.fandung.com","Home","home_id"];
var m1=["/search/label/Label1","Label1","id1"];
var m2=["/search/label/Label2","Label2","id2"];
var m3=["/search/label/Label3","Label3","id3"];
var m4=["/search/label/Label4","Label4","id4"];
var m5=["/search/label/Label5","Label5","id5"];
var m6=["/search/label/Label6","Label6","id6"];
var m7=["/search/label/Label7","Label7","id7"];
var m8=["/search/label/Label8","Label8","id8"];
var m9=["/search/label/Label9","Label9","id9"];

var ttmenu = [m0,m1,m2,m3,m4,m5,m6,m7,m8,m9];
var n=ttmenu.length;
var list_menu=[];
var list_active=[];
var c_menu='';
var m_homepage='http://demo.fandung.com/';
var h_cond=m_homepage+'search';

var active_cond = location.href;
var home_cond=active_cond.split("?")[0];

var bg_pos='';
var sp_img='';

if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[7][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else {bg_pos=style1[0];sp_img=style1[1];}

var mcss = document.createElement('style');
mcss.type = 'text/css';
mcss.innerHTML = '#promenu, .promenu_sub {background-position: 0 '+bg_pos+'} .menu li:hover, .menu .active, .menu .active span, .menusep, .menu span:hover {background-image: url('+sp_img+')}';
document.body.appendChild(mcss);

// submenu
function otab(){document.write('<table border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');}

function submn(submn_link,submn_text){ document.write('<tr><td onmouseover="this.style.background=\'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoMNjovYM1w7_9yyu0AnZOR8I8dmct-rbiUjQEPFCF8iKhyuOPu_hx1tJmYRBcLLZOGOtkmr4QBXwv5nUKlMjxnFiQ6nck1D8tzKuF9GfKrHheQ73KB7FzI901N4WTHUW0H4rrgUse_zh2/s400/1-6-bg.png) repeat-x 0 '+bg_pos+'\'" onmouseout="this.style.background=\'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Xoho15gHwt-oDYOq8kNl7YO93QselbSS4C3voO0ZjYgkqFAJKzSFJj4pJCh2z2ZCAIA3L4KEAbm9ZkBbRFa9lgxDqjsOjFGwVN-OAuVCsKB0kqACRzbM0P1XpzqH25KREev4iQWBvpQ6/s240/1-6-bg_sub2.png) repeat-x 0 '+bg_pos+'\'" class="promenu_sub" onclick="window.location.href=\''+submn_link+'\'">'+submn_text+'</td></tr>');}

function ctab(){document.write('<\/table>');}

function otab(child_id){document.write('<table id="' + child_id +'" border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');}

//submenu

c_menu +='<div id="promenu"><ul class="menu">';

for (var i=0;i<n;i++) {

if ((home_cond==m_homepage)||(home_cond==h_cond)) {list_active[0]='class="active"';}
else if (active_cond.indexOf(ttmenu[i][0])!=-1) {list_active[i]='class="active"';} else {list_active[i]='';}

list_menu[i]='<li><a href="'+ttmenu[i][0]+'" '+list_active[i]+' id="'+ttmenu[i][2]+'"><span>'+ttmenu[i][1]+'</span></a></li>';
c_menu +=list_menu[i];
if (i<n-1) {c_menu +='<li class="menusep"> </li>';}
}
c_menu +='</ul></div>';
document.write(c_menu);

//]]>
</script>

<script type="text/javascript">
otab("id1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
ctab();
at_attach("id1", "id1_child", "hover", "y", "pointer");

otab("id2_child");
submn('link_submenu2.1','Submenu 2.1');
ctab();
at_attach("id2", "id2_child", "hover", "y", "pointer");

otab("id3_child");
submn('link_submenu3.1','Submenu 3.1');
ctab();
at_attach("id3", "id3_child", "hover", "y", "pointer");

otab("id4_child");
submn('link_submenu4.1','Submenu 4.1');
submn('link_submenu4.2','Submenu 4.2');
submn('link_submenu4.3','Submenu 4.3');
submn('link_submenu4.4','Submenu 4.4');
submn('link_submenu4.5','Submenu 4.5');
submn('link_submenu4.6','Submenu 4.6');
ctab();
at_attach("id4", "id4_child", "hover", "y", "pointer");

otab("id5_child");
submn('link_submenu5.1','Submenu 5.1');
submn('link_submenu5.2','Submenu 5.2');
ctab();
at_attach("id5", "id5_child", "hover", "y", "pointer");

otab("id6_child");
submn('link_submenu6.1','Submenu 6.1');
ctab();
at_attach("id6", "id6_child", "hover", "y", "pointer");

otab("id7_child");
submn('link_submenu7.1','Submenu 7.1');
submn('link_submenu7.2','Submenu 7.2');
submn('link_submenu7.3','Submenu 7.3');
ctab();
at_attach("id7", "id7_child", "hover", "y", "pointer");

otab("id8_child");
submn('link_submenu8.1','Submenu 8.1');
submn('link_submenu8.2','Submenu 8.2');
submn('link_submenu8.3','Submenu 8.3');
submn('link_submenu8.4','Submenu 8.4');
submn('link_submenu8.5','Submenu 8.5');
submn('link_submenu8.6','Submenu 8.6');
submn('link_submenu8.7','Submenu 8.7');
ctab();
at_attach("id8", "id8_child", "hover", "y", "pointer");
</script>

- bản updated vẫn chưa hoàn thiện ở phần hiện hiệu ứng thay đổi style cho menu ở các trang submenu, mình sẽ fix sớm khi có thể.

More about →

[Update] Tạo Menu Thanh menu ngang có sổ dọc xuống

Create Dropdown Menu

[FD BlOg] - Để cho khách viếng thăm có thể dễ dàng truy cập và tìm kiếm thông tin về bài viết trên blog của bạn thì phổ biến nhất là tạo 1 menu truy cập cho blog. Việc tạo menu sẽ giúp cho người truy cập dễ dàng tìm thấy thông tin mà mình muốn tìm.

Ở đây mình sẽ giới thiệu menu nằm ngang và có liên kết với các menu con khác, và hiển thị của các menu con này là sổ dọc xuống theo từng menu chính.

Update 17/12/2011:

- Đây có thể nói là 1 trong các bài viết có lượng view lớn nhất trên BlOg FD, và cũng là bài viết có nhiều comment phàn nàn nhất về việc bài viết khó hiểu, hoặc không làm được. Hôm nay mình sẽ fix lại bài hướng dẫn. Và nhân tiện mình cũng fix lại code của thủ thuật để cho tiện và cho đẹp hơn 1 chút.

- Ở thủ thuật cũ, phần chèn link của các menu phụ (menu con) chỉ góm gọn trong các link của các nhãn, trong bài fix này các link của menu con sẽ cơ động hơn, không còn phải theo khuôn mẫu link như thế này http://YOUR-BLOG-NAME.blogspot.com/search/label/LABEL-NAME, tức là có thể chèn các link khác như link của 1 bài viết nào đó chẳng hạn.

Xem DEMO

Hình ảnh minh họa :

Trước tiên để tạo menu, bạn phải thống kê lại các nhãn, (giống như lập 1 bản đồ trong blog vậy) sau đó ta sẽ gôm các nhãn lại theo từng mục, ví dụ: giải trí , học tập... và các mục giải trí, học tập sẽ là 1 menu chính, còn các trang nhãn hoặc 1 trang bài viết nào đó sẽ là 1 menu phụ.

Thứ 2 là xác định nơi đặt menu, thông dụng nhất sẽ là ở trên phần header.Như vậy các bạn phải tạo 1 widget HTML/Javascript vào header rồi dán code của thủ thuật vào.

☼ Bây giờ ta bắt đầu vô chi tiết:
1. Đăng nhập blog
2. Vào Bố cục (layout)
3. Vào chỉnh sửa code HTML (không cần nhấp chọn mở rộng tiện ích)
4.Chèn đọan code sau vào ngay bên dưới thẻ mở <head>

<script src="http://fandung.googlecode.com/svn/trunk/js/dropdown2.js" type="text/javascript">
</script>

- nếu chèn code ở bước 4 vào template mà submenu không hiển thị, thì các bạn chèn nó vào ngay trong widget HTML/javascript chưa code thủ thuật, tức là chèn chung với code ở bước 6 bên dưới, và chèn ngay trên cùng. (updated 18/12/2011)

5. Save template lại.
6. Quay trở lại bố cục, vào phần tử trang, tạo 1 cái widget HTML/Javascript,sau đó dán đọan code bên dưới vào.

►CODE:

<style type="text/css">
.nav23{
height: 27px;
padding: 2px 0 0;
margin-right:5px;
background-image: url(http://sites.google.com/site/fdblogsite/Home/fd.gif);
width: 100%;
border-top:1px solid #bbb;
border-bottom:1px solid #ffdab6;
}

.nav23 a, .nav23 a:visited {
color:#000;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:12px;
padding: 5px 10px;
display: block;
float:left;
border-right:1px solid #f17813;
}
.nav23 a:hover {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMkloQWoqK4Sa0OYb_kPi2Y_0eUw0YFEdbKQZpeKlrtcehDf-3LPf9ADdxf6lHEeXRly7roKMasQeMqdJBMYhzO5-mhShShrTGP8Us_wlq8AJhib_kMFwM-oSmhFFe0WNjcZP7qPRNyebL/s26/nav23-bg-hv.png);
color:#FFF;
}
.nav23sub{
background:#F57900;
margin-top:1px;
padding:1px;
color: #fff;;
margin: 1 1px;
padding: 5px 10px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border-top:1px #ffc185 solid;
cursor:pointer;
}
</style>

<script type="text/javascript">

var bg_submenu="#F57900"; // màu nền của submenu
var bg_hv_submenu="#24BDE2"; // màu nền của submenu khi rê chuột

function otab(){
document.write('<table border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}
function submn(submn_link,submn_text){
document.write('<tr><td onmouseover="this.style.background=\''+bg_hv_submenu+'\'" onmouseout="this.style.background=\''+bg_submenu+'\'" class="nav23sub" onclick="window.location.href=\''+submn_link+'\'">'+submn_text+'</td></tr>');
}
function ctab(){document.write('<\/table>');}

function otab(child_id){document.write('<table id="' + child_id +'" border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}

// end of define functions!

</script>
<div class="nav23">
<a id="idmenu1" href="#" >Menu 1</a>
<a id="idmenu2" href="#">Menu 2</a>
<a id="idmenu3" href="#">Menu 3</a>
<a id="idmenu4" href="#">Menu 4</a>
<a id="idmenu5" href="#">Menu 5</a>
<a id="idmenu6" href="#">Menu 6</a>
<a id="idmenu7" href="#">Menu 7</a>
</div>

<script type="text/javascript">
otab("idmenu1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 2.1');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");

otab("idmenu2_child");
submn('link_submenu2.1','Submenu 2.1');
ctab();
at_attach("idmenu2", "idmenu2_child", "hover", "y", "pointer");

otab("idmenu3_child");
submn('link_submenu3.1','Submenu 3.1');
ctab();
at_attach("idmenu3", "idmenu3_child", "hover", "y", "pointer");

otab("idmenu4_child");
submn('link_submenu4.1','Submenu 4.1');
submn('link_submenu4.2','Submenu 4.2');
submn('link_submenu4.3','Submenu 4.3');
submn('link_submenu4.4','Submenu 4.4');
submn('link_submenu4.5','Submenu 4.5');
submn('link_submenu4.6','Submenu 4.6');
ctab();
at_attach("idmenu4", "idmenu4_child", "hover", "y", "pointer");

otab("idmenu5_child");
submn('link_submenu5.1','Submenu 5.1');
submn('link_submenu5.2','Submenu 5.2');
ctab();
at_attach("idmenu5", "idmenu5_child", "hover", "y", "pointer");

otab("idmenu6_child");
submn('link_submenu6.1','Submenu 6.1');
ctab();
at_attach("idmenu6", "idmenu6_child", "hover", "y", "pointer");

otab("idmenu7_child");
submn('link_submenu7.1','Submenu 7.1');
submn('link_submenu7.2','Submenu 7.2');
submn('link_submenu7.3','Submenu 7.3');
ctab();
at_attach("idmenu7", "idmenu7_child", "hover", "y", "pointer");
</script>

- Chú ý :

+ Menu 1, Menu 2, ... Menu 7 là các menu chính (menu cha)
+ Submenu 1.1, Submenu 2.1, ... Submenu 7.1, ... là tên các menu phụ (menu con)
+ link_submenu1.1, link_submenu1.2, ... link_submenu7.1, ... là link liên kết của các menu phụ ví dụ như : http://www.fandung.com/search/label/B-basic hoặc http://www.fandung.com/p/contact.html
+ Nếu các menu chính có liên kết đến thì các bác bạn thay kí tự # trong code của nó thành link liên kết nào đó. Ví dụ như bên dưới :

<a id="idmenu1" href="http://www.fandung.com" >Menu 1</a>

+ Các code cùng màu (đỏ, xanh dương, xanh, cam, đen, tím, xanh xám)sẽ liên kết với nhau (kiểu : cha - con)
+ Ví dụ 1 đoạn code :

otab("idmenu1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");

- Đây là code để hiển thị các menu con của Menu chính (cha) có tên là Menu 1, và code của menu cha là bên dưới :

<a id="idmenu1" href="#" >Menu 1</a>

- Bạn lưu ý dòng id="idmenu1" trong code trên, chữ idmenu1 này bắt buộc phải giống với chữ idmenu1 trong code của menu con, tức là đoạn code này :

otab("idmenu1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");

- Nếu muốn tạo thêm nhiều menu con cho menu cha (ví dụ đối với menu cha Học Tập như trong code mẫu), ta sẽ thêm code như bên dưới :

otab("idmenu1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
submn('link_submenu1.3','Submenu 1.3');
submn('link_submenu1.4','Submenu 1.4');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");

- Còn nếu như các bạn muốn 1 menu chính nào đó không có submenu thì các bạn chỉ việc xóa code của submenu, lấy ví dụ ở Menu 6, thì ta sẽ xóa đoạn code như bên dưới :

...
...
...
otab("idmenu6_child");
submn('link_submenu6.1','Submenu 6.1');
ctab();
at_attach("idmenu6", "idmenu6_child", "hover", "y", "pointer");
...
...
...

- Nếu muốn thêm 1 menu nữa (ví dụ Menu 8) thì ta thêm code tương tự ở 2 phần như bên dưới :

...
...
...
<a id="idmenu6" href="#">Menu 6</a>
<a id="idmenu7" href="#">Menu 7</a>
<a id="idmenu8" href="#">Menu 8</a>
</div>
...
...
...
otab("idmenu7_child");
submn('link_submenu7.1','Submenu 7.1');
submn('link_submenu7.2','Submenu 7.2');
submn('link_submenu7.3','Submenu 7.3');
ctab();
at_attach("idmenu7", "idmenu7_child", "hover", "y", "pointer");

otab("idmenu8_child");
submn('link_submenu8.1','Submenu 8.1');
submn('link_submenu8.2','Submenu 8.2');
ctab();
at_attach("idmenu8", "idmenu8_child", "hover", "y", "pointer");

</script>

Bạn nên đặt menu này ở trên head là đẹp nhất, nếu blog của bạn nào chưa có tạo thủ thuật "Thêm tiện ích" vào phần header thì có thể xem ở đây.

-------------- BONUS --------------

- Trong demo mình có 4 mẫu menu, ở trên là code của mẫu 0, và đây là code của 3 mẫu còn lại, các bạn có thể download về tham khảo :

http://fandung.googlecode.com/svn/trunk/menu_type1.txt
http://fandung.googlecode.com/svn/trunk/menu_type2.txt
http://fandung.googlecode.com/svn/trunk/menu_type3.txt

- để có được 1 menu với màu sắc như ý muốn, các bạn thay đổi các giá trị mã màu như trong code highlight bên dưới là được :

<style type="text/css">
.nav23 {
height: 27px;
padding: 2px 0 0;
margin-right:5px;
width: 100%;
border-top:1px solid #bbb;
border-bottom:1px solid #ffdab6;
background-color:#88bb22;
}

.nav23 a, .nav23 a:visited {
color:#fff;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:12px;
padding: 5px 10px;
display: block;
float:left;
border-right:1px solid #528500;
}

.nav23 a:hover {
background-color:#528500;
}

.nav23sub {
margin-top:1px;
padding:1px;
color: #fff;;
margin: 1 1px;
padding: 5px 10px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
cursor:pointer;
background:#97cf26;
border-top:1px #d7ff86 solid;
}
</style>
<script type="text/javascript">
var bg_submenu="#97cf26";
var bg_hv_submenu="#528500";
...
...
...

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

More about →

[ 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.

More about →

[ 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 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://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);
}

/* 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

More about →