Javarscript menu dọc của GióGiaoMùa.

<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/AVvXsEh3IUg7l0mEUP1CD266S-XawGrPHbRJ4q7KPvuOkxm31KkNr7dsnBT5zwTeMDGVQtZSmK5K1Q6_xht0ydObkE8wjXI6uRKaMxrxvw1KBU28TifkAYu3lIj-Boguv5mF7EWCbDXn0BBYgNNo/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/AVvXsEjIBA57dRrWB_FAniak6ye3s6qnhFV8GSaZEDuasVnaYGrN7CJq4AukauWbO7pfBZGOz1H_tNyg_Z90vCDT7SPbAPKT5udJks8OMsvKNzrcIi_-FK08PYrgF1RKttoKtzNKA5rzO0lxAuKS/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/AVvXsEjYkzbVI4Smia1lCgnpGFbz_omRf6FlXvHoFmd10tHvKx0ptN_Nrtwj1AmYfEsOfv681_6LLymAU3fGdVKfjJ_xGtVTGOB2zFA49_VvU9KrE3LjTdH6h8k9STreqlQB7mhsnr_-WljzNM8Q/s318/style1-sp.png"];

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

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

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

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

var style6=["-200px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlYJKTZO25_pKIk0oNuVS3uynKhNw5UHM2pUr2yjE7g98wKG4LaBIQlW6db8iYOYpVlWF6Ad0b1CIfKA1yhhsVmZNAUI8Vk-xNsZYdaYZKzwl4z9O7KrQ2zmoQk4JOdG5V_aGr4WNTkD1N/s318/style6-sp.png"];

var m0=["http://giogiaomua.blogspot.com","Home","home_id"];
var m1=["http://giogiaomua.blogspot.com/search/label/%C3%9Ac?&max-results=15","Thời sự","id1"];
var m2=["http://giogiaomua.blogspot.com/search/label/D%C3%A2n%20oan?&max-results=15","Pháp luật","id2"];
var m3=["http://giogiaomua.blogspot.com/search/label/L%E1%BB%91i%20s%E1%BB%91ng?&max-results=15","Xã hội","id3"];
var m4=["http://giogiaomua.blogspot.com/search/label/V%C4%83n%20h%C3%B3a?&max-results=15","Văn hóa","id4"];
var m5=["http://giogiaomua.blogspot.com/search/label/N%C3%A9t?&max-results=15","Công nghệ","id5"];
var m6=["http://giogiaomua.blogspot.com/search/label/Khoa%20h%E1%BB%8Dc?&max-results=15","Khoa học","id6"];
var m7=["http://giogiaomua.blogspot.com/search/label/B%C3%ACnh%20lu%E1%BA%ADn?&max-results=15","Diễn đàn","id7"];
var m8=["http://giogiaomua.blogspot.com/search/label/Lang%20thang?&max-results=15","Đó đây","id8"];
var m9=["http://giogiaomua.blogspot.com/search/label/Gia%20%C4%91%C3%ACnh?&max-results=15","Đời sống","id9"];

var m10=["http://xuongduong.blogspot.com","Tin nóng","m_id10"];

var m11=["http://ddnviet.blogspot.com.au/2012/06/thu_17.html","TQ toàn tập","m_id11"];

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://giogiaomua.blogspot.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/AVvXsEh3IUg7l0mEUP1CD266S-XawGrPHbRJ4q7KPvuOkxm31KkNr7dsnBT5zwTeMDGVQtZSmK5K1Q6_xht0ydObkE8wjXI6uRKaMxrxvw1KBU28TifkAYu3lIj-Boguv5mF7EWCbDXn0BBYgNNo/s400/1-6-bg.png) repeat-x 0 '+bg_pos+'\'" onmouseout="this.style.background=\'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIBA57dRrWB_FAniak6ye3s6qnhFV8GSaZEDuasVnaYGrN7CJq4AukauWbO7pfBZGOz1H_tNyg_Z90vCDT7SPbAPKT5udJks8OMsvKNzrcIi_-FK08PYrgF1RKttoKtzNKA5rzO0lxAuKS/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>