[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/AVvXsEjpj18koL7sjyYg0-hz-jhVCQCIRs_h6KjzxIxHEAUZy8MjARAPyTbc6O6cNtxeELJf2rDK27qjzql3o4fYl7vHRp2jBaaAPhKrMrOJc8dZm8TOPNVoJfEktCeTCgfwVG_UYzsHQ6vfAheS/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/AVvXsEjVmklDFDHEe1AyidJXbqRSKmkwhZD7d_X9QUH-ZZN8MfSteSSYCfy1YrZQGWjVri3oGJwUIhOf5t_gxhL-xibetxjqakDyIYVG0zKnOSAJiI9haABdY3r3jwfdNNbqRroY9JzkPB1yt5XY/s318/style1-sp.png"];
var style2=["-40px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8klXAUm4bQY78FMsK1KzXZEtd0tbhsO2eHD1TH-RDuv8wo2WuwQYiqvG5x6fJIjtdwDYfWCk2dQBt3xpJi_iKUdXch8anqIaSOxlQYmo0fC3oLCCsUxibJVrT8FH_pjaEiRO5KY5tYifT/s318/style2-sp.png"];
var style3=["-80px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-VNGwbTyQlwj6BV7p23jvDwhbkkvvkYTf1NqX1MCHelLNvNdkI0MBL-Wb7ytuc49CHggPmAenzvSwRW7lJ0C5OvvW0atQx3GGnmdAHVjrhMiPC-j1-zfIYxL-ov3V0cXMGicCMaZfwm8j/s318/style3-sp.png"];
var style4=["-120px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFzZjKqOt7tbKJdz619ayIMcxlecyinc5GkHxh2_NXmE0umaOvQ8TosnZPEMP7vGUMeMKo976GkDQLXbiOUinlPQCJd1DbwOsufN689_9ayCgFXW5fXhMsy2ZDzln7NXnMzHTfJ66zgkv/s318/style4-sp.png"];
var style5=["-160px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7axCTsOgiNQ3s5tdmXquaolNF87f3joum6VAVI_53040p32S5myWADApIhT8-cKoWT8JW0LswLohAxMI4jC_77qzRcvS6JXK6sM1Ou-wK9yQufFD9gSq2SuEocSLaEUVUSCPg5Z8pEkMQ/s318/style5-sp.png"];
var style6=["-200px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5a5Zzs1upuopJeN1Qp__UDQ3GgfTsq5fUzRO2BLjXARl2psiCGTPagyrm5yvwVMujtl-C42uoEXxZasPayC0DMQ5R__LsWgePBCn-3b5HLF7I6J_QPO-WhV7x14Wv5bV8ppJ6n5f0SQoz/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/AVvXsEjpj18koL7sjyYg0-hz-jhVCQCIRs_h6KjzxIxHEAUZy8MjARAPyTbc6O6cNtxeELJf2rDK27qjzql3o4fYl7vHRp2jBaaAPhKrMrOJc8dZm8TOPNVoJfEktCeTCgfwVG_UYzsHQ6vfAheS/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/AVvXsEjwcPeD7Is0_5hSnzyBR310IGwppnUJwqvFxHEKpFsa6YU4Ueg5YkPQ0Bnhw1iMBAO-EmEe4CgazURD2m0doS5yfWPwDpgbDwi-N9xcgS8qStsOx0rgmSjHQrBb6YZccD_ifviVfqEgRQ-V/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/AVvXsEjVmklDFDHEe1AyidJXbqRSKmkwhZD7d_X9QUH-ZZN8MfSteSSYCfy1YrZQGWjVri3oGJwUIhOf5t_gxhL-xibetxjqakDyIYVG0zKnOSAJiI9haABdY3r3jwfdNNbqRroY9JzkPB1yt5XY/s318/style1-sp.png"];

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

var style3=["-80px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-VNGwbTyQlwj6BV7p23jvDwhbkkvvkYTf1NqX1MCHelLNvNdkI0MBL-Wb7ytuc49CHggPmAenzvSwRW7lJ0C5OvvW0atQx3GGnmdAHVjrhMiPC-j1-zfIYxL-ov3V0cXMGicCMaZfwm8j/s318/style3-sp.png"];

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

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

var style6=["-200px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5a5Zzs1upuopJeN1Qp__UDQ3GgfTsq5fUzRO2BLjXARl2psiCGTPagyrm5yvwVMujtl-C42uoEXxZasPayC0DMQ5R__LsWgePBCn-3b5HLF7I6J_QPO-WhV7x14Wv5bV8ppJ6n5f0SQoz/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/AVvXsEjpj18koL7sjyYg0-hz-jhVCQCIRs_h6KjzxIxHEAUZy8MjARAPyTbc6O6cNtxeELJf2rDK27qjzql3o4fYl7vHRp2jBaaAPhKrMrOJc8dZm8TOPNVoJfEktCeTCgfwVG_UYzsHQ6vfAheS/s400/1-6-bg.png) repeat-x 0 '+bg_pos+'\'" onmouseout="this.style.background=\'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwcPeD7Is0_5hSnzyBR310IGwppnUJwqvFxHEKpFsa6YU4Ueg5YkPQ0Bnhw1iMBAO-EmEe4CgazURD2m0doS5yfWPwDpgbDwi-N9xcgS8qStsOx0rgmSjHQrBb6YZccD_ifviVfqEgRQ-V/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/AVvXsEi4K2ONmaqIua_8JPw7lZxbD8wByqEvb9vXpoqpY14IMfevPUlVcGPWplHD2C2P5FCBTpl9fCfWYfDzpoA724hyRyLUfSv8Dnmm_WhFw1ZYtP9BmBjo7hAigSCOW8lOAQVRp4VbfxX97mep/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 →

Mega Dropdown Menu CSS

Có 1 số bạn yêu cầu muốn mình share cái menu hiện tại mình đang dùng (mang phong cách của trang Zing), nhưng bây giờ mình mới chia sẻ được. Nói thật, nếu chia sẻ thì mình chỉ cần đưa ngay đoạn code cho các bạn là xong, chứ không phải đợi tới bây giờ mình mới chia sẻ, nhưng có 1 điều là khi chia sẻ rồi thì hướng dẫn các bạn sao đây, thực sự menu mình đang dùng là lấy source gần như từ của trang news.zing.vn, vì thế mà nó hơi rắc rối, ngay chính mình khi lấy về dùng cũng phải nhọc nhằn chỉnh sửa lại để dùng.

Để đơn giản cho các bạn sử dụng cũng như cho mình viết bài hướng dẫn, nên mình đã quyết định ngồi code lại cái menu này. Vẫn lấy phong cách của Zing, nhưng code thì mình viết lại hoàn toàn.

Ưu điểm của Mega Dropdown này là nó chỉ dùng CSS, nên khá nhẹ, và 1 cái nữa là phần dropdown các bạn có thể tùy biến nhiều thứ trong đó, chứ không đơn thuần chỉ hiện các liên kết con. Bởi thế nó mới được gọi là Mega Menu. Và nhược điểm của menu này là không hiển thị được submenu trên IE6. Thật ra nhược điểm này không phải là nhược điểm của thủ thuật mà là của chính blogger, hình như blogger nó không hỗ trợ file htc. Ngay cả host demo của mình cũng không chạy được, nhưng mình test offline trên máy tính thì rất ok.

Vì thế nếu bạn nào muốn dùng cái menu này thì sẽ phải chấp nhận việc nó không sổ submenu trên IE6. Còn từ IE7 trở nên thì vẫn chạy bình thường.

Các bạn có thể xem DEMO ở đây.

Hình ảnh minh họa

A. Sau đây là code của thủ thuật:
- Có 2 cách để thêm vào blog, 1 là các bạn chèn tất cả code của nó vào 1 widget HTML/javascript, 2 là các bạn chỉ chèn code HTML vào widget HTML/javascript, còn code CSS thì các bạn có thể add vào template, ngay trước dòng code </head>
- và đây là code của thủ thuật:

Code CSS:

<style type="text/css">
#fdmega-menu ul {list-style: none;}

ul#topnav {
float: left;
width: 650px;
position: relative;
height: 39px;
background: #0082ff;
}

ul#topnav li {
float: left;
height: 39px;
padding: 0px;
background: url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/right-li-nobg.png) no-repeat top right;
}

ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}

ul#topnav li:hover {
background: #ff7d00 url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/top-li-hv.png) repeat-x top left;
}

ul#topnav li.mg-home {
background:url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/home-ico-bg.png) no-repeat top right!important;
width:45px;
}

ul#topnav li.mg-home a {height:19px;}

ul#topnav li div.sub {
position: absolute;
top: 39px;
background: #ff7d00;
padding:5px;
display: none;
border-right:4px solid #0082ff;
border-left:4px solid #0082ff;
border-bottom:4px solid #0082ff;
color:#fff;
}
ul#topnav li:hover div.sub {display: block;}
ul#topnav li div.sub p {margin-bottom:5px;text-align:justify;}

ul#topnav li div.sub div.cont {float: left;padding:5px;}
ul#topnav li div.sub div.cont h3 {}
ul#topnav li div.sub div.cont a{display:block; margin:0;padding:0;padding:0 0 5px;color:#ddd;}
ul#topnav li div.sub div.cont a:hover{color:#fff;}

ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}

ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}

</style>

- Lưu ý: các file hình ảnh có trong code CSS các bạn nên download về và up lên host lưu trữ ảnh nào đó để sử dụng, tránh trường hợp host của mình gặp sự cố.

Code HTML:

<div id="fdmega-menu">
<ul id="topnav">
<li class="mg-home"><a href="#"></a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
<li><a href="#">Menu 3</a>
<div class="sub ms3">
<div class="cont cs31">
<a href="#">Sub 3.1 (120px)</a>
<a href="#">Sub 3.2 (120px)</a>
<a href="#">Sub 3.3 (120px)</a>
</div>
<div class="cont cs31">
<a href="#">Sub 3.1 (120px)</a>
<a href="#">Sub 3.2 (120px)</a>
<a href="#">Sub 3.3 (120px)</a>
</div>
</div>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a>
<div class="sub ms5">
<b>James Gallagher</b><br/>
<span style="font-size:90%"><i>Health reporter, BBC News</i></span>
<p>Are bean sprouts in the clear? The simple answer is no, even though the early test results have come back negative.</p>
<p>The most compelling evidence so far has not come from the microbiology lab, but traditional detective work. Officials were able to link the main outbreaks with bean sprouts from one farm in northern Germany.</p>
<p>They will wait for test results from the remaining 17 samples for final confirmation. However, the prospect remains that no trace of E. coli will ever be found, since any contaminated produce would have been farmed and on the shelves weeks ago.</p>
<span style="font-size:90%"><i>Trich BBC</i></span>
</div>
</li>
</ul>
</div>

B. Sau đây là 1 vài hướng dẫn chỉnh sửa code HTML cũng như CSS
- Sau khi chèn code vào, các bạn sẽ gặp trường hợp như thế này:

- Việc bị lệch này là do vị trí của menu chính và menu phụ không khớp với nhau. Không khớp với nhau có nhiều lý do, ví dụ bạn thay đổi tên menu, độ rộng của menu chính sẽ thay đổi, dẫn tới menu phụ bị lệch.
- Để chỉnh vị trí của menu phụ với menu chính các bạn xem code CSS bên dưới:

...
...
ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}
...
...

- ở code trên ta có 5 class là ms1, ms2,... ms5 tương ứng với các chính menu1, menu2,... menu5 (như trong demo)
- Các class này để tùy chỉnh vị trí, độ rộng , màu nền ... của các vùng hiển thị của submenu.
- Lệnh left:118px; (của class ms2) chính là lệnh để tùy chỉnh vị trí của submenu so với biên ngang bên trái của menu chính. Ví dụ như hình bên dưới :

- Sau khi điều chỉnh vị trí các submenu xong, ta sẽ đi vào phần tùy chỉnh nội dung bên trong của các submenu. Ở đây ta sẽ lấy ví dụ submenu 2.
- Đây là code HTML của nó :

...
...
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
...
...

- Ta thấy thẻ <div class="sub ms2"> chính là khu vực hiển thị của submenu, trong thẻ div này sẽ có tiếp 3 thẻ <div class="cont cs21"> , 3 thẻ div này chính là 3 cột nhỏ trong submenu2. Như hình bên dưới:

- ta thấy trong code CSS có đoạn như thế này :

...
...
ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}
...
...

- ul#topnav li div.sub div.cs21 chính là class để tùy chỉnh độ rộng của các cột trong submenu2. Ở trên mình chỉ thêm class cho 2 submenu2 và submenu3, nếu muốn các bạn có thể thêm tương tự như :

...
...
ul#topnav li div.sub div.cs11 {width:135px;}
ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}
ul#topnav li div.sub div.cs41 {width:80px;}
ul#topnav li div.sub div.cs51 {width:190px;}
...
...

- Ở trong demo, mình cho các cột trong submenu2 và submenu3 bằng nhau, nêu chỉ có class là cs21 và cs31, nếu muốn các cột có độ rộng khác nhau thì các bạn có thể tùy chỉnh lại code code. Ví dụ như mình sẽ tùy chỉnh lại của submenu2, mỗi cột có độ rộng khác nhau, như bên dưới:

...
...
ul#topnav li div.sub div.cs21 {width:135px;}
ul#topnav li div.sub div.cs22 {width:90px;}
ul#topnav li div.sub div.cs23 {width:120px;}
...
...

- tức là từ việc chỉ sử dụng chung 1 class cs21 cho tất cả các cột thì mình sẽ tùy chỉnh lại, mỗi cột có 1 class riêng (cs21, cs22, cs23). Và code HTML của nó sẽ là như thế này :

...
...
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs22">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs23">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
...
...

- Ngoài ra nếu các bạn muốn thêm hình nền riêng cho mỗi sub thì cũng có thể thêm vào, ví dụ như trong demo ta có hình nền của submenu5, và bên dưới là code CSS mà các bạn có thể tùy chỉnh để thêm hình nền vào:

...
...
ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}
...
...

- các bạn thêm hình nền tương tự như class ms5 (của submenu5).
- Ở trên các class ms1 và ms4 mình để trống do các menu4 và menu1 trong demo không có submenu, khi có submenu thì các bạn thêm vào giá trị độ rộng và vị trí cách biên ngang cho các submenu này.

Hy vọng các bạn có thể thực hiện nó với các hướng dẫn cơ bản trên.
Menu mega dropdown này trước khi còn test offline, mình cảm thấy rất tâm đắc với nó, nhưng khi add vô rồi thì lại gặp sự cố là blogger không support file htc, nên cũng hơi nản. Thậm chí mình còn có ý định sẽ không post bài này. Nhưng rồi nghĩ lại cũng sẽ có 1 số người cần nó, và rồi cũng cố ngồi trước máy tính để soạn bài hướng dẫn này.

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 →