JavaScript

JavaScripti >> Menuji >> Modri menu #1

Opis:
Modri menu je IE menu. Lahko imate 7 povezav v meniju (s spremembo kode tudi več). Je zelo dinamičen menu. Lahko spremenite barvo ozadja, barvo teksta, robove, hitrost in še veliko več.

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.pixelLeft<=-2){ document.all.Sub1.style.pixelLeft+=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.pixelLeft<=-2){ document.all.Sub2.style.pixelLeft+=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.pixelLeft<=-2){ document.all.Sub3.style.pixelLeft+=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.pixelLeft<=-2){ document.all.Sub4.style.pixelLeft+=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.pixelLeft<=-2){ document.all.Sub5.style.pixelLeft+=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.pixelLeft<=-2){ document.all.Sub6.style.pixelLeft+=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.pixelLeft<=-2){ document.all.Sub7.style.pixelLeft+=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: