Menus en Javascript
Hola Expertos:
Quiero aprender a hacer menus en JavaScript como los hay en la pagina de Microsoft u otras paginas...lo que quiero es aprender a hacerlos desde cero....Quisiera que me aconsejaran algun manual o turorial para poder apoyarme en algun documento.
Gracias...!!!
Quiero aprender a hacer menus en JavaScript como los hay en la pagina de Microsoft u otras paginas...lo que quiero es aprender a hacerlos desde cero....Quisiera que me aconsejaran algun manual o turorial para poder apoyarme en algun documento.
Gracias...!!!
1 Respuesta
Respuesta de icaruss
1
La verdad no tengo ningun documento de diseño con java script, pero te puedo decir que es basicamente uso de HTML y CSS, si te sirve de algo vamos a hacer un ejemplo sin usar demasiadas funciones ni parametros por el momento, es solo para que veas que es solamente uso de propiedades:
<html>
<head><title>menu animado por icaruss</title></head>
<body bgcolor=black>
//esta tabla es el menu
//solo le quitamos los bordes para que no se vea que es una tabla
<table width=100% border=0 borderstyle=single bordercolor=black cellspacing="1" cellpadding="0" >
<tr><td width=15% border=0 >
<p id=menu1 align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:aqua;cursor:hand;background-color:blue;font-weight:bold
onmouseover=color1() ; onmouseout=color2() ;>Hacking</p></td>
<td width=15% border=0 >
<p id=menu2 align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:aqua;cursor:hand;background-color:blue;font-weight:bold
onmouseover=m2color1() ; onmouseout=m2color2() ;>Cracking</p></td><td width=70%></td></tr>
<tr>
<td width=15% border=0>
<p id=submenu align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:yellow;cursor:hand;background-color:gray;font-weight:bold;visibility:hidden
onmouseover=colorsub2() ; onmouseout=colorsub() ;>Exploits</p></td>
<td width=15% border=0>
<p id=m2submenu align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:yellow;cursor:hand;background-color:gray;font-weight:bold;visibility:hidden
onmouseover=m2colorsub2() ; onmouseout=m2colorsub() ;>Reverse</p></td>
<td width=70%></td>
</tr>
<tr>
<td width=15% border=0>
<p id=submenu2 align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:yellow;cursor:hand;background-color:gray;font-weight:bold;visibility:hidden
onmouseover=colorsub22() ; onmouseout=colorsub21() ;>Bugs</p></td><td width="15%"></td>
<td width=70%></td></tr>
</table>
<script language="javascript">
//propiedades de el primer menu
function color1(){menu1.style.color="blue";
menu1.style.backgroundColor="aqua"
submenu.style.visibility="visible"
submenu2.style.visibility="visible"
m2submenu.style.visibility="hidden"}
function color2(){menu1.style.color="aqua"
menu1.style.backgroundColor="blue"
}
//ahora las propiedades de los submenus
function colorsub(){submenu.style.color="yellow"
submenu.style.backgroundColor="gray" }
function colorsub2(){submenu.style.color="red"
submenu.style.backgroundColor="white" }
function colorsub21(){submenu2.style.color="yellow"
submenu2.style.backgroundColor="gray" }
function colorsub22(){submenu2.style.color="red"
submenu2.style.backgroundColor="white" }
//aqui empezamos un nuevo menu
function m2color1(){menu2.style.color="blue";
menu2.style.backgroundColor="aqua"
m2submenu.style.visibility="visible"
submenu.style.visibility="hidden"
submenu2.style.visibility="hidden"}
function m2color2(){menu2.style.color="aqua"
menu2.style.backgroundColor="blue"
}
function m2colorsub(){m2submenu.style.color="yellow"
m2submenu.style.backgroundColor="gray" }
function m2colorsub
<html>
<head><title>menu animado por icaruss</title></head>
<body bgcolor=black>
//esta tabla es el menu
//solo le quitamos los bordes para que no se vea que es una tabla
<table width=100% border=0 borderstyle=single bordercolor=black cellspacing="1" cellpadding="0" >
<tr><td width=15% border=0 >
<p id=menu1 align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:aqua;cursor:hand;background-color:blue;font-weight:bold
onmouseover=color1() ; onmouseout=color2() ;>Hacking</p></td>
<td width=15% border=0 >
<p id=menu2 align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:aqua;cursor:hand;background-color:blue;font-weight:bold
onmouseover=m2color1() ; onmouseout=m2color2() ;>Cracking</p></td><td width=70%></td></tr>
<tr>
<td width=15% border=0>
<p id=submenu align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:yellow;cursor:hand;background-color:gray;font-weight:bold;visibility:hidden
onmouseover=colorsub2() ; onmouseout=colorsub() ;>Exploits</p></td>
<td width=15% border=0>
<p id=m2submenu align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:yellow;cursor:hand;background-color:gray;font-weight:bold;visibility:hidden
onmouseover=m2colorsub2() ; onmouseout=m2colorsub() ;>Reverse</p></td>
<td width=70%></td>
</tr>
<tr>
<td width=15% border=0>
<p id=submenu2 align=center style=FONT-FAMILY:Verdana,Arial;FONT-SIZE:13px;color:yellow;cursor:hand;background-color:gray;font-weight:bold;visibility:hidden
onmouseover=colorsub22() ; onmouseout=colorsub21() ;>Bugs</p></td><td width="15%"></td>
<td width=70%></td></tr>
</table>
<script language="javascript">
//propiedades de el primer menu
function color1(){menu1.style.color="blue";
menu1.style.backgroundColor="aqua"
submenu.style.visibility="visible"
submenu2.style.visibility="visible"
m2submenu.style.visibility="hidden"}
function color2(){menu1.style.color="aqua"
menu1.style.backgroundColor="blue"
}
//ahora las propiedades de los submenus
function colorsub(){submenu.style.color="yellow"
submenu.style.backgroundColor="gray" }
function colorsub2(){submenu.style.color="red"
submenu.style.backgroundColor="white" }
function colorsub21(){submenu2.style.color="yellow"
submenu2.style.backgroundColor="gray" }
function colorsub22(){submenu2.style.color="red"
submenu2.style.backgroundColor="white" }
//aqui empezamos un nuevo menu
function m2color1(){menu2.style.color="blue";
menu2.style.backgroundColor="aqua"
m2submenu.style.visibility="visible"
submenu.style.visibility="hidden"
submenu2.style.visibility="hidden"}
function m2color2(){menu2.style.color="aqua"
menu2.style.backgroundColor="blue"
}
function m2colorsub(){m2submenu.style.color="yellow"
m2submenu.style.backgroundColor="gray" }
function m2colorsub
Muchisimas Gracias por tu respuesta me ha sido de gran Utilidad, era lo que necesitaba un pequeño empujon para arrancar,... Muchisimas Gracias...
