Script magnifico: Menu

Bueno, logré sacar este código de una página y lo edité.

Primero que nada vamos a pegar este código:

Código:

<SCRIPT LANGUAGE="JavaScript">
function SizeWin() {
open("http://CukiSystem.activoforo.com", "Sizewindow","width=300,height=350,scrollbars=no,toolbar=no");
}
</SCRIPT>

A este código no hay que editarle nada

----

Ahora, abajo de ese código pegar esto:

Código:

<script language="javascript">
<!-- Simple NavBar 2 - http://website.lineone.net/~kurt.grigg/javascript

//!!!Edita la apariencia aqui!!!

MenuWidth=170;          //Ancho de menu individual.
MenuFont='Arial,Verdana';
MenuFontSize=2;          //Solo de 1 a 7, 2 es la mas apropiada
MenuFontColor='#ffffff';
MenuBgColor='#5b7693';
HighLight='#b4c3d4';
Separater=2;            //Espacio al rededor de los menus.
Centre=true;            //true o false.

//!!!No alterar nada aqui, ve directo a "Links"!!!

n4=(document.layers);
n6=(document.getElementById&&!document.all);
ie=(document.all);
h=(ie)?document.body.clientHeight:window.innerHeight;
w=(ie)?document.body.clientWidth:window.innerWidth;
Titles=new Array()
Links=new Array()

algn1=(Centre)?'<center>':'';
algn2=(Centre)?'</center>':'';

function colour2(c){(n4)?c.bgColor=HighLight:c.style.background=HighLight}//
function colour1(c){(n4)?c.bgColor=MenuBgColor:c.style.background=MenuBgColor}//

var OpenLayer=(n4)?"<br><layer height=100% width=100%
onMouseOver='colour1(this)';
onMouseOut='colour2(this)'>"+algn1:"<div
style='height:auto;width:100%' onMouseOver='colour1(this)';
onMouseOut='colour2(this)'><font face="+MenuFont+"
size="+MenuFontSize+" color="+MenuFontColor+">";
var CloseLayer=(n4)?algn2+"</layer>":"</font></div>";

var vs=(n4)?"<font face='Wingdings'
color="+MenuBgColor+">n</font>":OpenLayer+"&nbsp;"+CloseLayer+"<font
color="+MenuBgColor+">"+String.fromCharCode(9660)+"</font>";


/*************************************Links here****************************************

Primero, cambia los titulos a lo que sea. agrega/quita lo que necesites,
asegurate numerarlos en orden.

Ahora llena los links como los necesites aqui un
Ejemplo:
+OpenLayer+"<a href='http://www.google.com' class='x'>Search with Google</a>"+CloseLayer

Si necesitas quots etc en el link asegurate de escapar con un backlash.
Ejemplo:
...class='x'> What\'s new </a>"+C...

***************************************************************************************/
Titles[0]="Menu 1";
Titles[1]="Menu 2";
Titles[2]="Menu 3";
Titles[3]="Menu 4";

Links[0]=vs
+OpenLayer+"<a href='http://yahoo.com')' class='x'>Yahoo</a>"+CloseLayer
+OpenLayer+"<a href='http://google.com')' class='x'>Google</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer

Links[1]=vs
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer


Links[2]=vs
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer

Links[3]=vs
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer


//!!!No cambiar nada a partir de este punto!!!

w1=(MenuWidth+Separater)*Titles.length;
w2=w/2;
i1=w2-MenuWidth-Separater-w1/2;
i2=w2-MenuWidth-Separater-w1/2;
s1=MenuWidth+Separater;
s2=MenuWidth+Separater;
if (w1 > w2*2){i1=-MenuWidth;i2=-MenuWidth}
vy=(n4)?'show':'visible';
vn=(n4)?'hide':'hidden';

//Don't mess about with N4, just use layers.
if (n4){
for (i=0; i < Titles.length; i++){
document.write("<layer name='lnks"+i+"' top=0 left="+(i2+=s2)+" "
+" width="+MenuWidth+" bgcolor="+HighLight+" visibility=hide"
+" onMouseOver='this.visibility=vy; var cd=this.id.length-1; var ab=this.id.charAt(cd); H(ab)' "
+" onMouseOut='this.visibility=vn; var ef=this.id.length-1; var gh=this.id.charAt(ef); B(gh)'>"
+algn1+"<font face="+MenuFont+" size="+MenuFontSize+">"
+"&nbsp;<br>"+Links[i]+"</font>"+algn2+"</layer>");
document.write("<layer name='ttls"+i+"' top=0 left="+(i1+=s1)+" height=0 "
+"width="+MenuWidth+" bgcolor="+MenuBgColor+" "
+"onMouseOver=\"this.bgColor=HighLight; var e=this.id.length-1; var d=this.id.charAt(e); On(d)\" "
+"onMouseOut=\"this.bgColor=MenuBgColor; var e=this.id.length-1; var d=this.id.charAt(e); Off(d)\">"
+algn1+"<font face="+MenuFont+" size="+MenuFontSize+" color="+MenuFontColor+">"
+Titles[i]+"</font>"+algn2+"</layer>");
}
function On(x){for (i=0; i < Titles.length; i++)document.layers['lnks'+x].visibility=vy}
function Off(x){for (i=0; i < Titles.length; i++)document.layers['lnks'+x].visibility=vn}
function B(y){for (i=0; i < Titles.length; i++)document.layers['ttls'+y].bgColor=MenuBgColor}
function H(y){for (i=0; i < Titles.length; i++)document.layers['ttls'+y].bgColor=HighLight}
}
if (!n4){
for (i=0; i < Titles.length; i++){
document.write("<div id='lnks"+i+"' style='position:absolute;"
+"top:0px;left:"+(i2+=s2)+"px;width:"+MenuWidth+"px;"
+"background:"+HighLight+";visibility:hidden'"
+" onMouseOver='this.style.visibility=vy; document.getElementById(\"ttls"+i+"\").style.background=HighLight';"
+" onMouseOut='this.style.visibility=vn; document.getElementById(\"ttls"+i+"\").style.background=MenuBgColor'>"
+algn1+Links[i]+algn2+"</div>");
document.write("<div id='ttls"+i+"' style='position:absolute;top:0px;left:"+(i1+=s1)+"px;height:auto;width:"+MenuWidth+"px;"
+"background:"+MenuBgColor+";cursor:default'"
+" onMouseOver='document.getElementById(\"lnks"+i+"\").style.visibility=vy;this.style.background=HighLight'"
+" onMouseOut='document.getElementById(\"lnks"+i+"\").style.visibility=vn;this.style.background=MenuBgColor'>"
+algn1+"<font face="+MenuFont+" size="+MenuFontSize+"
color="+MenuFontColor+">"+Titles[i]+"</font>"+algn2+"</div>");
}
}
function Scroll(){
sy=(ie)?document.body.scrollTop:window.pageYOffset;
for (i=0; i < Titles.length; i++){
if (n4){
 document.layers['ttls'+i].top=Separater+sy;
 document.layers['lnks'+i].top=Separater+sy;
 }
else{
 document.getElementById("ttls"+i).style.top=Separater+sy;
 document.getElementById("lnks"+i).style.top=Separater+sy;
 }
}
setTimeout('Scroll()',150)
}
Scroll();
window.onresize=new Function("window.location.reload()");


if (!n4){
for (i=0; i < document.links.length; i++){
 if (document.links[i].href == this.window.location.href)
  {
  document.links[i].style.color=MenuBgColor;
  document.links[i].style.cursor='crosshair';
  http://document.links[i].innerHTML+=' -';
  //alert(i+' '+document.links[i].href);
  break;
  }
 }
}
//-->
</script>

Modificaremos lo siguiente

Código:


MenuWidth=170;          //Ancho de menu individual.
MenuFont='Arial,Verdana';
MenuFontSize=2;          //Solo de 1 a 7, 2 es la mas apropiada
MenuFontColor='#ffffff';
MenuBgColor='#5b7693';
HighLight='#b4c3d4';
Separater=2;            //Espacio al rededor de los menus.
Centre=true;            //true o false.

Acá (al comienzo del script) toparás con esto, acá podremos editar el ancho, la fuente, el espacio, color etc.

-------

Luego saldrá una parte larga asi:

Código:


Links[0]=vs
+OpenLayer+"<a href='http://cukisystem.activoforo.com')' class='x'>CukiSystem</a>"+CloseLayer
+OpenLayer+"<a href='http://google.com')' class='x'>Google</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer

Links[1]=vs
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer


Links[2]=vs
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer

Links[3]=vs
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer
+OpenLayer+"<a href='javascript:void(\"\")' class='x'>Your links</a>"+CloseLayer

Bueno donde sale: javascript:void(\"\") lo cambiaremos por la ruta de la pag que deseamos linkear, y donde dice "Your Links" escribiremos el nombre que se mostrará y al cliquearlo redireccionará a la pág escrita entre Javascript:void

Espero que sirva :]