Menu ngang 2 cấp bậc từ Vnexpress.net

by **kinggame_thang** 27/3/2011, 12:05 am

Dung lượng chứa đề mục nhãn nhiều hơn với Menu 2 cấp bậc này. Thích hợp dùng làm menu ngang header cho toàn website.
[hide]

Code:: <style type="text/css"> .parent-menu, .sub-menu {width:980px;} #topmenu {height:46px; margin-bottom:10px;z-index:-10px;} .fl {float:left;} #topmenu {float:left;} .fr {float:right;} .parent-menu {height:25px; font:11px tahoma; color:#ffffff; text-align:center; background:#f5f5f6 url('http://4.bp.blogspot.com/_BmIFAHM3wdk/TQQ6ICR1jII/AAAAAAAAAsY/Uu7Dp1ThLcE/s1600/bg-fd.gif') repeat-x 0px -46px;} .pmenu-sep {width:25px;} .pmenu-normal{height:15px; padding:7px; cursor:pointer;} .pmenu-normal, .pmenu-active, .pmenu-normalleft, .pmenu-normalright, .pmenu-activeleft, .pmenu-activeright {cursor:pointer;} .pmenu-normalleft, .pmenu-normalright, .pmenu-activeleft, .pmenu-activeright {width:3px; height:25px;font-size:1px;} .pmenu-active {height:15px; padding:7px; color:#004f8b; background:#f5f5f6 url('http://2.bp.blogspot.com/_BmIFAHM3wdk/TQQ6HrIESiI/AAAAAAAAAsU/n0oObyE5_Ek/s1600/bg_repeat.gif') repeat-x 0px -73px;} .pmenu-activeleft {height:25px; background:#f4f5f6 url('http://1.bp.blogspot.com/_BmIFAHM3wdk/TQQ6HJ8qHEI/AAAAAAAAAsQ/6LzzDTwRjso/s1600/bg_corner.gif') no-repeat 0px 0px;} .pmenu-activeright {height:25px; background:#f4f5f6 url('http://1.bp.blogspot.com/_BmIFAHM3wdk/TQQ6HJ8qHEI/AAAAAAAAAsQ/6LzzDTwRjso/s1600/bg_corner.gif') no-repeat 0px -27px;} .sub-menu {height:21px; background:#f5f5f6 url('http://4.bp.blogspot.com/_BmIFAHM3wdk/TQQ6ICR1jII/AAAAAAAAAsY/Uu7Dp1ThLcE/s1600/bg-fd.gif') repeat-x 0px -100px;} .smenu-content {width:678px; height:17px;padding:2px 7px;} .smenu-content2 {width:892px; height:17px;padding:2px 7px;} .smenu-content3 {width:534px; height:17px;padding:2px 7px;} .smenu-content ul {width:50%;height:17px;margin:0px;padding:0px;list-style-type:none;} .smenu-content li{float:right;padding:0px 5px;} .smenu-content li img{border:0px; vertical-align:middle} .sub-menu {position:relative; font: 12px arial; } .parent-menu, .sub-menu, .sub-menucontent {overflow:hidden;} .link-submenu {font:11px arial; color:#004f8b; text-decoration:none;} .link-submenu:hover {text-decoration:underline;} .sep-fmenu{width:2px; height:26px; background:#f4f5f6 url('http://1.bp.blogspot.com/_BmIFAHM3wdk/TQQ6HJ8qHEI/AAAAAAAAAsQ/6LzzDTwRjso/s1600/bg_corner.gif') no-repeat -5px -138px;} </style> <script type="text/javascript"> var menu_fid = new Array( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50 ); var menu_pid = new Array( /* Thời trang Trang phục, Làm đẹp ----------------------------------------------------------------------------------------------------- Ngôi sao Chuyện đời sao, Khu vực phim ảnh, Khu vực âm nhạc ----------------------------------------------------------------------------------------------------- Hình ảnh Wallpapers kool , Avatars xinh, Ảnh độc ----------------------------------------------------------------------------------------------------- Đời sống teens Học đường, Tình yêu, Giới tính, Boys đẹp, Girls xinh ----------------------------------------------------------------------------------------------------- Người lớn Kinh nghiệm sống, Đời sống vợ chồng ----------------------------------------------------------------------------------------------------- Phần mềm Miễn phí, Diệt Virus, Xử lý ảnh , Xử lý phim, Mix âm thanh , Chuyển đổi định dạng , Soft trực tuyến, Linh tinh khác ----------------------------------------------------------------------------------------------------- Blogspot Thủ thuật rất cần thiết , Tính năng chuyên nghiệp thêm, Vật dụng khác ----------------------------------------------------------------------------------------------------- Công nghệ ----------------------------------------------------------------------------------------------------- Tiện ích ----------------------------------------------------------------------------------------------------- Truyện tranh ----------------------------------------------------------------------------------------------------- Chuyện lạ ----------------------------------------------------------------------------------------------------- */ 0,0,0,0,0,0,0,0,0,0,0,0,0, 2,2, 3,3,3, 4,4,4, 5,5,5,5,5, 6,6, 7,7,7,7,7,7,7,7, 8,8,8 ); var menu_name = new Array( 'Trang chủ', 'Thời trang', 'Ngôi sao', 'Hình ảnh', 'Đời sống teens', 'Người lớn', 'Phần mềm', 'Blogspot', 'Công nghệ', 'Tiện ích', 'Truyện tranh', 'Chuyện lạ', 'Tìm', 'Trang phục', 'Làm đẹp', 'Chuyện đời sao', 'Khu vực phim ảnh', 'Khu vực âm nhạc', 'Wallpaper kool', 'Avatar xinh', 'Ảnh độc', 'Học đường', 'Tình yêu', 'Giới tính', 'Boys đẹp', 'Girls xinh', 'Nghệ thuật sống', 'Đời sống vợ chồng', 'Miễn phí', 'Diệt virus', 'Xử lý ảnh', 'Xử lý phim', 'Mix âm thanh', 'Chuyển đổi định dạng', 'Soft trực tuyến', 'Linh tinh khác', 'Thủ thuật rất cần thiết', 'Tính năng chuyên nghiệp thêm', 'Vật dụng khác' ); var menu_path = new Array( 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://www.google.com/custom?q=&sitesearch=code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com', 'http://code1k.com' ); var menu_show = new Array( 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ); </script> <script type="text/javascript"> function gmobj(o){ if(document.getElementById){ m=document.getElementById(o); } else if(document.all){ m=document.all[o]; } else if(document.layers){ m=document[o]; } return m; } var submenu = new Array(menu_pid.length); var activeid; var delay_hide=500; var menuobj; var tempFolder = PAGE_FOLDER; var folder_fl = false; function SetFolder(fid){ var i, j; for (i=0;i<menu_pid.length; i++){ if(menu_fid[i]==fid && menu_pid[i]==0) { tempFolder = menu_fid[i]; break; } else if(menu_fid[i]==fid && menu_pid[i]!=0) { for (j=0;j<menu_pid.length; j++) { if(menu_fid[j]==menu_pid[i] && menu_pid[j]!=0) { tempFolder = menu_fid[j]; folder_fl = true; break; } } if(folder_fl==true) break; } } } SetFolder(tempFolder); function Active(){ var i,j,k; for (i=0; i<menu_pid.length; i++) { if(menu_fid[i]==tempFolder&& menu_pid[i]==0) { activeid = i; break; } else if(menu_fid[i]==tempFolder&& menu_pid[i]!=0) { for(j=0; j<menu_pid.length; j++) { if(menu_fid[j]==menu_pid[i]) { activeid = j; break; } } break; } } } function writeParentMenu() { var strParent = ''; var strSep = '<div class="fl" style="width:1px;font-size:1px"><img src="http://2.bp.blogspot.com/_BmIFAHM3wdk/TQQ6LeVULaI/AAAAAAAAAs0/WZFk6qsCphI/s1600/sep-pmenu.gif" alt="" /></div>'; var i; var url = ''; for(i=0; i< menu_pid.length; i++) { url = (tempFolder >= 9998 && tempFolder != 10000 && tempFolder != 10001) ? 'http://vnexpress.net' + menu_path[i] : menu_path[i]; if(menu_pid[i] == 0) { if(menu_fid[i]==1) { strParent = strParent.concat('<div class="fl"><img src="http://2.bp.blogspot.com/_BmIFAHM3wdk/TQQ6LeVULaI/AAAAAAAAAs0/WZFk6qsCphI/s1600/sep-pmenu.gif" alt="" /></div>'); strParent = strParent.concat('<div class="pmenu-sep fl"> </div>'); } if(menu_fid[i]==tempFolder) { strParent = strParent.concat('<div class="fl" onMouseover="activeMenu(').concat(i).concat(');showit(').concat(i).concat(',1);" onMouseout="deactiveMenu(').concat(i).concat(');reWriteMenu();" onClick=goTo("').concat(url).concat('")>'); strParent = strParent.concat('<div id="mn').concat(i).concat('_l" class="pmenu-activeleft fl"> </div>'); strParent = strParent.concat('<div id="mn').concat(i).concat('" class="pmenu-active fl">').concat(menu_name[i]).concat('</div>'); strParent = strParent.concat('<div id="mn').concat(i).concat('_r" class="pmenu-activeright fl"> </div>'); strParent = strParent.concat('</div>'); strParent = strParent.concat(strSep); } else { strParent = strParent.concat('<div class="fl" onMouseover="activeMenu(').concat(i).concat(');showit(').concat(i).concat(',1);" onMouseout="deactiveMenu(').concat(i).concat(');reWriteMenu();" onClick=goTo("').concat(url).concat('")>'); strParent = strParent.concat('<div id="mn').concat(i).concat('_l" class="pmenu-normalleft fl"> </div>'); strParent = strParent.concat('<div id="mn').concat(i).concat('" class="pmenu-normal fl">').concat(menu_name[i]).concat('</div>'); strParent = strParent.concat('<div id="mn').concat(i).concat('_r" class="pmenu-normalright fl"> </div>'); strParent = strParent.concat('</div>'); strParent = strParent.concat(strSep); } writeSubMenu(menu_fid[i], i); } else { break; } } strParent = strParent.substr(0, strParent.length - strSep.length); gmobj("parent-menu").innerHTML = strParent; } function writeSubMenu(p, k) { var strSubMenu = ''; var strSep = ' <img src="http://4.bp.blogspot.com/_BmIFAHM3wdk/TQQ6MJ2rWdI/AAAAAAAAAs8/VHlRhXvKDbQ/s1600/square.gif" alt=""/> '; var i; var j = 0; var url = ''; if(p==13){ strSubMenu = strSubMenu.concat('<div style="margin:-3px -260px 0px 0px; text-align:right;"><form action="http://www.google.com/custom"><input name="q" size="30" type="text"/><input value="Tìm" type="submit"/><input value="roboonline.blogspot.com" name="sitesearch" type="hidden"/></form></div>'); } else{ for(i=0; i < menu_pid.length; i++) { url = (tempFolder >= 9998 && tempFolder != 10000 && tempFolder != 10001) ? 'http://vnexpress.net' + menu_path[i] : menu_path[i]; if(menu_pid[i]==p&&menu_show[i]==0) { if(j==0) { strSubMenu = strSubMenu.concat('<img src="http://4.bp.blogspot.com/_BmIFAHM3wdk/TQQ6MJ2rWdI/AAAAAAAAAs8/VHlRhXvKDbQ/s1600/square.gif" border="0"/> '); if(menu_fid[i] < 1000) { strSubMenu = strSubMenu.concat('<a class="link-submenu" href="').concat(url).concat('">').concat(menu_name[i]).concat('</a>'); } else { strSubMenu = strSubMenu.concat('<a class="link-submenu" href="').concat(url).concat('" target="_blank"').concat(menu_name[i]).concat('</a>'); } strSubMenu = strSubMenu.concat(strSep); } else { if(menu_fid[i] < 1000) { strSubMenu = strSubMenu.concat('<a class="link-submenu" href="').concat(url).concat('">').concat(menu_name[i]).concat('</a>'); strSubMenu = strSubMenu.concat(strSep); } else if(menu_fid[i] >= 1000) { strSubMenu = strSubMenu.concat('<a class="link-submenu" href="').concat(url).concat('" target="_blank">').concat(menu_name[i]).concat('</a>'); strSubMenu = strSubMenu.concat(strSep); } } j += 1; } } strSubMenu = strSubMenu.substr(0, strSubMenu.length - strSep.length); } if(strSubMenu=='') {submenu[k]=' '} else {submenu[k] = strSubMenu;} } function writeCurrentMenu() { var strSubMenu = ''; var i, j; for(i=0; i < menu_pid.length; i++) { if(menu_fid[i]==tempFolder && menu_pid[i]==0) { activeMenu(i); //gmobj('submenu').innerHTML = submenu[i]; showit(i,0); break; } else if(menu_fid[i]==tempFolder && menu_pid[i]!=0) { var flag = false; for(j=0; j<menu_pid.length; j++) { if(menu_fid[j]==menu_pid[i]) { activeMenu(j); //gmobj('submenu').innerHTML = submenu[j]; showit(j,0); flag = true; break; } } if(flag==true) break; } else { deactiveMenu(activeid); menuobj.innerHTML = ''; } } } function writeFooterMenu() { var sHTML = ''; var strSep = ' | '; var i; for(i=0; i<menu_pid.length; i++) { if(menu_pid[i]==0 && menu_fid[i]!=1) { sHTML=sHTML.concat('<a class="link-footermenu" href="').concat(menu_path[i]).concat('">').concat(menu_name[i]).concat('</a>'); sHTML=sHTML.concat(strSep); } else { continue; } } sHTML = sHTML.substr(0, sHTML.length - strSep.length); document.write(sHTML); } function activeMenu(i) { if(i>=0 && !isNaN(i)) { if(i != activeid && activeid != -1) { deactiveMenu(activeid); activeid = i; } gmobj('mn' + i).className = 'pmenu-active fl'; gmobj('mn' + i + '_l').className = 'pmenu-activeleft fl'; gmobj('mn' + i + '_r').className = 'pmenu-activeright fl'; } } function deactiveMenu(i) { if(i >= 0 && !isNaN(i)) { gmobj('mn' + i).className = 'pmenu-normal fl'; gmobj('mn' + i + '_l').className = 'pmenu-normalleft fl'; gmobj('mn' + i + '_r').className = 'pmenu-normalright fl'; } } function activeMenuParent() { activeMenu(activeid); } function showit(which, type){ clear_delayhide() thecontent=(which==-1)? "" : submenu[which]; switch (parseInt(which)){ case 1: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(15).concat(thecontent); break; case 2: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(33).concat(thecontent); break; case 3: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(55).concat(thecontent); break; case 4: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(70).concat(thecontent); break; case 5: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(88).concat(thecontent); break; case 6: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(10).concat(thecontent); break; case 7: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(90).concat(thecontent); break; default: menuobj.className = 'smenu-content fl'; break; } if (document.getElementById||document.all) menuobj.innerHTML=thecontent else if (document.layers){ menuobj.document.write(thecontent) menuobj.document.close() } } function resetit(){ delayhide=setTimeout("writeCurrentMenu()",delay_hide); } function clear_delayhide(){ if (window.delayhide) clearTimeout(delayhide) } function reWriteMenu() { delayhide=setTimeout("writeCurrentMenu()",delay_hide); } function writeTabMenu(i,f) { var child = false; var j; var strTabMenu = ''; var cname = ''; var cpath = ''; for(j=0; j < menu_pid.length; j++) { if(menu_pid[j] == i) { child = true; break; } } for(j=0; j < menu_pid.length; j++) { if(menu_fid[j] == i) { cname = menu_name[j]; cpath = menu_path[j]; break; } } if(f==0) { if(child) { strTabMenu = strTabMenu.concat('<div class="folder-title2">'); strTabMenu = strTabMenu.concat(' <div class="fl"><img src="http://4.bp.blogspot.com/_BmIFAHM3wdk/TQQ6GxazunI/AAAAAAAAAsM/TH-JYDhoick/s1600/folder-activeleft2.gif" alt="" /></div>'); strTabMenu = strTabMenu.concat(' <div class="folder-active2 fl"><a href="').concat(cpath).concat('" class="link-folder">').concat(cname).concat('</a></div>'); strTabMenu = strTabMenu.concat(' <div class="fl"><img src="http://4.bp.blogspot.com/_BmIFAHM3wdk/TQQ6GxazunI/AAAAAAAAAsM/TH-JYDhoick/s1600/folder-activeleft2.gif" alt="" /></div>'); strTabMenu = strTabMenu.concat(' <div class="fr"><img src="http://2.bp.blogspot.com/_BmIFAHM3wdk/TQQ6KNPJI2I/AAAAAAAAAso/4rR_5LxSX2A/s1600/folder-topright.gif" alt="" /></div>'); strTabMenu = strTabMenu.concat('</div>'); } } return strTabMenu; } function writeTabSubMenu(i) { var j; var strTabSubMenu = ''; var strSep = ' | '; for(j=0; j < menu_pid.length; j++) { if(menu_pid[j] == i) { if(menu_fid[j] < 10000) { if(i==999){ if(strTabSubMenu==''){ strTabSubMenu = strTabSubMenu.concat('<a class="link-subfolder" href="').concat(menu_path[6]).concat('" >').concat(menu_name[6]).concat('</a>'); strTabSubMenu = strTabSubMenu.concat(strSep); } strTabSubMenu = strTabSubMenu.concat('<a class="link-subfolder" href="').concat(menu_path[j]).concat('" >').concat(menu_name[j]).concat('</a>'); strTabSubMenu = strTabSubMenu.concat(strSep); } else { strTabSubMenu = strTabSubMenu.concat('<a class="link-subfolder" href="').concat(menu_path[j]).concat('" >').concat(menu_name[j]).concat('</a>'); strTabSubMenu = strTabSubMenu.concat(strSep); } } } } strTabSubMenu = strTabSubMenu.substr(0, strTabSubMenu.length - strSep.length); return strTabSubMenu; } function writeListItemTitle(i) { var j; var strListItemTitle = ''; for(j=0; j < menu_pid.length; j++) { if(menu_fid[j] == i) { strListItemTitle = strListItemTitle.concat('<a class="link-folder" href="').concat(menu_path[j]).concat('" >').concat(menu_name[j]).concat('</a>'); break; } } document.write(strListItemTitle); } function writeFolderTitle(i) { var j, k, m; var strTitle = ''; for(j=0; j<menu_pid.length; j++) { if(menu_fid[j]==i && menu_pid[j]==0) { strTitle = strTitle.concat('<div class="parentfolder-title fl">'); strTitle = strTitle.concat('<a href="').concat(menu_path[j]).concat('">').concat(menu_uname[j]).concat('</a>'); strTitle = strTitle.concat('</div>'); break; } else if(menu_fid[j]==i && menu_pid[j]!=0) { for(k=0; k<menu_pid.length; k++) { if(menu_fid[k] == menu_pid[j]) { if(menu_pid[k]==0) { strTitle = strTitle.concat('<div class="parentfolder-title fl">'); strTitle = strTitle.concat('<a href="').concat(menu_path[k]).concat('">').concat(menu_uname[k]).concat('</a>'); strTitle = strTitle.concat('</div>'); } else { for(m=0; m<menu_pid.length; m++) { if(menu_fid[m]==menu_pid[k]) { strTitle = strTitle.concat('<div class="parentfolder-title fl">'); strTitle = strTitle.concat('<a href="').concat(menu_path[m]).concat('">').concat(menu_uname[m]).concat('</a>'); strTitle = strTitle.concat('</div>'); break; } } strTitle = strTitle.concat('<div class="subfolder-title fl">'); strTitle = strTitle.concat('> <a href="').concat(menu_path[k]).concat('">').concat(menu_uname[k]).concat('</a>'); strTitle = strTitle.concat('</div>'); } break; } } strTitle = strTitle.concat('<div class="subfolder-title fl">'); strTitle = strTitle.concat('> <a href="').concat(menu_path[j]).concat('">').concat(menu_uname[j]).concat('</a>'); strTitle = strTitle.concat('</div>'); break; } } document.write(strTitle); } function writeBlank(i) { var strHTML = ''; for(var j=1; j<=i; j++){ strHTML = strHTML.concat(' '); } return strHTML; } function goTo(i){ document.location.href = i; } </script> <div id="topmenu"> <div class="parent-menu" id="parent-menu"></div> <div class="sub-menu"> <div class="fl"><img src="http://3.bp.blogspot.com/_BmIFAHM3wdk/TQQ6KvR5DPI/AAAAAAAAAss/EVqO2JpSsyk/s1600/iconmenucap2.gif" alt="" /> </div> <div class="smenu-content fl" id="submenu" onmouseover="clear_delayhide();activeMenuParent();" onmouseout="resetit();"> </div> </div> </div> <script type="text/javascript"> menuobj=document.getElementById? document.getElementById("submenu") : document.all? document.all.submenu : document.layers? document.dep1.document.dep2 : "" Active(); writeParentMenu(); reWriteMenu(); </script>