JavaScript

JavaScripti >> Menuji >> Modri menu #2

Opis:
Enak je prvemu modremu menuju, le da za razliko od prvega pridejo podmenuji od leve strani spletne strani (od leve proti desni) in ne od zgoraj navzdol. Tudi ta modri menu deluje le v IE.

Primer:
Za primer kliknite TUKAJ

Izvorna koda:

Korak 1 :
Ta del kode vstavite v <head> del strani:

<script language="javascript"> //the speed of the menu coming down var speed=1 //the main menu's background Color var MenuColor="darkblue" //the main menu's Text Color var MenuTextColor="gold" //the sub menu's background Color var SubMenuColor="darkblue" //the sub menu's Text Color var SubMenuTextColor="lightseagreen" //the main menu's visible text var Menumsg=" - Menu - " //the sub menu's visible text var msg=new Array() //edit this msg[1]=" Stran 1 " msg[2]=" Stran 2 " msg[3]=" Stran 3 " msg[4]=" Stran 4 " msg[5]=" Stran 5 " msg[6]=" Stran 6 " msg[7]=" Stran 7 " //stop //the Links for each button. Be sure to line them up with the messages above. function Linker(which){ var link=new Array(which) //edit This link[1]="TvojaStran1.html" link[2]="TvojaStran2.html" link[3]="TvojaStran3.html" link[4]="TvojaStran4.html" link[5]="TvojaStran5.html" link[6]="TvojaStran6.html" link[7]="TvojaStran7.html" //stop location.href=link[which] } function TheMenu(){ var code="<table border=0 bgColor='" + MenuColor + "' width=150>" code+="<tr>" code+="<td style='cursor:n-resize;'" code+=" onclick='TheSubMenus()'" code+=" onMouseOver='MenuOver()' onMouseOut='MenuOut()'>" code+="<center><font color='" + MenuTextColor + "' size=4>" code+="<div id='a' style='border-style:inset;'> " + Menumsg + " </div>" code+="</font></center></td></tr></table>" document.all.TheMenu.innerHTML=code } function MenuOver(){ document.all.a.style.borderStyle="outset" } function MenuOut(){ document.all.a.style.borderStyle="inset" } function SubMenu1(){ var code="<table border=0 bgColor='" + SubMenuColor + "' width=150>" code+="<tr>" code+="<td style='cursor:crosshair;'" code+=" onclick='Linker(1)'" code+=" onMouseOver='Sub1()' onMouseOut='SwapSubBack()'>" code+="<font color='" + SubMenuTextColor + "'>" code+="<div id='S1' style='border-style:inset;'>" + msg[1] + "</div>" code+="</font></td></tr></table>" document.all.Sub1.innerHTML=code if(document.all.Sub1.style.pixelTop<=-21){ document.all.Sub1.style.pixelTop+=20 Timer1=setTimeout("SubMenu1()",speed) }else{ clearTimeout(Timer1) } } function SubMenu2(){ var code="<table border=0 bgColor='" + SubMenuColor + "' width=150>" code+="<tr>" code+="<td style='cursor:crosshair;'" code+=" onclick='Linker(2)'" code+=" onMouseOver='Sub2()' onMouseOut='SwapSubBack()'>" code+="<font color='" + SubMenuTextColor + "'>" code+="<div id='S2' style='border-style:inset;'>" + msg[2] + "</div>" code+="</font></td></tr></table>" document.all.Sub2.innerHTML=code if(document.all.Sub2.style.pixelTop<=-21){ document.all.Sub2.style.pixelTop+=20 Timer2=setTimeout("SubMenu2()",speed) }else{ clearTimeout(Timer2) } } function SubMenu3(){ var code="<table border=0 bgColor='" + SubMenuColor + "' width=150>" code+="<tr>" code+="<td style='cursor:crosshair;'" code+=" onclick='Linker(3)'" code+=" onMouseOver='Sub3()' onMouseOut='SwapSubBack()'>" code+="<font color='" + SubMenuTextColor + "'>" code+="<div id='S3' style='border-style:inset;'>" + msg[3] + "</div>" code+="</font></td></tr></table>" document.all.Sub3.innerHTML=code if(document.all.Sub3.style.pixelTop<=-21){ document.all.Sub3.style.pixelTop+=20 Timer3=setTimeout("SubMenu3()",speed) }else{ clearTimeout(Timer3) } } function SubMenu4(){ var code="<table border=0 bgColor='" + SubMenuColor + "' width=150>" code+="<tr>" code+="<td style='cursor:crosshair;'" code+=" onclick='Linker(4)'" code+=" onMouseOver='Sub4()' onMouseOut='SwapSubBack()'>" code+="<font color='" + SubMenuTextColor + "'>" code+="<div id='S4' style='border-style:inset;'>" + msg[4] + "</div>" code+="</font></td></tr></table>" document.all.Sub4.innerHTML=code if(document.all.Sub4.style.pixelTop<=-21){ document.all.Sub4.style.pixelTop+=20 Timer4=setTimeout("SubMenu4()",speed) }else{ clearTimeout(Timer4) } } function SubMenu5(){ var code="<table border=0 bgColor='" + SubMenuColor + "' width=150>" code+="<tr>" code+="<td style='cursor:crosshair;'" code+=" onclick='Linker(5)'" code+=" onMouseOver='Sub5()' onMouseOut='SwapSubBack()'>" code+="<font color='" + SubMenuTextColor + "'>" code+="<div id='S5' style='border-style:inset;'>" + msg[5] + "</div>" code+="</font></td></tr></table>" document.all.Sub5.innerHTML=code if(document.all.Sub5.style.pixelTop<=-21){ document.all.Sub5.style.pixelTop+=20 Timer5=setTimeout("SubMenu5()",speed) }else{ clearTimeout(Timer5) } } function SubMenu6(){ var code="<table border=0 bgColor='" + SubMenuColor + "' width=150>" code+="<tr>" code+="<td style='cursor:crosshair;'" code+=" onclick='Linker(6)'" code+=" onMouseOver='Sub6()' onMouseOut='SwapSubBack()'>" code+="<font color='" + SubMenuTextColor + "'>" code+="<div id='S6' style='border-style:inset;'>" + msg[6] + "</div>" code+="</font></td></tr></table>" document.all.Sub6.innerHTML=code if(document.all.Sub6.style.pixelTop<=-21){ document.all.Sub6.style.pixelTop+=20 Timer6=setTimeout("SubMenu6()",speed) }else{ clearTimeout(Timer6) } } function SubMenu7(){ var code="<table border=0 bgColor='" + SubMenuColor + "' width=150>" code+="<tr>" code+="<td style='cursor:crosshair;'" code+=" onclick='Linker(7)'" code+=" onMouseOver='Sub7()' onMouseOut='SwapSubBack()'>" code+="<font color='" + SubMenuTextColor + "'>" code+="<div id='S7' style='border-style:inset;'>" + msg[7] + "</div>" code+="</font></td></tr></table>" document.all.Sub7.innerHTML=code if(document.all.Sub7.style.pixelTop<=-21){ document.all.Sub7.style.pixelTop+=20 Timer7=setTimeout("SubMenu7()",speed) }else{ clearTimeout(Timer7) } } function Sub1(){ document.all.S1.style.borderStyle="solid" } function Sub2(){ document.all.S2.style.borderStyle="solid" } function Sub3(){ document.all.S3.style.borderStyle="solid" } function Sub4(){ document.all.S4.style.borderStyle="solid" } function Sub5(){ document.all.S5.style.borderStyle="solid" } function Sub6(){ document.all.S6.style.borderStyle="solid" } function Sub7(){ document.all.S7.style.borderStyle="solid" } function SwapSubBack(){ document.all.S1.style.borderStyle="inset" document.all.S2.style.borderStyle="inset" document.all.S3.style.borderStyle="inset" document.all.S4.style.borderStyle="inset" document.all.S5.style.borderStyle="inset" document.all.S6.style.borderStyle="inset" document.all.S7.style.borderStyle="inset" } function TheSubMenus(){ SubMenu1() SubMenu2() SubMenu3() SubMenu4() SubMenu5() SubMenu6() SubMenu7() } </script>

Korak 2:
Ta del kode vstavite v <body> del strani:

Korak 3:
Vaša <body> vrstica naj bi izgledala nekako takole: