Dhtml - Menu de navegacion con efecto degradado

Códigos Dhtml

Muestra un menu de navegacion con caida de opciones vertical y efecto degradado. El script es altamente configurable.

Tutores.org

Inicio > Dhtml

Visitas: 24,098 - 19/09/2004 16:54:26

CODIGO

Este codigo aun no ha sido probado por Tutores.org en Opera

Este codigo aun no ha sido probado por Tutores.org en Safari

<html>
<head>
<title>Menu de navegacion con efecto degradado</title>
<STYLE TYPE="text/css">
body { background:#fff url("thebackground.gif") no-repeat fixed center center; color:#000; margin:0; border:0; letter-spacing:1px; color:#666 }
.ae { font: 9px verdana; color: #c8d3e0; margin: 0; text-align: center }
.ea { font: 9px verdana; color: #7f98b7; margin: 0; filter: fliph flipv; text-align: center }
a.top { font:bold 10px ms sans serif; text-decoration:none; width:100px; text-align:center; height:14px; margin:0 ;padding:2 0; background-color:#000; letter-spacing:1px; color:#fff }
a.top:Enlace, a.top:visited { border:1px solid #000; filter:Alpha(opacity=60) }
a.top:hover, a.top:active { border:1px solid #fff; filter:Alpha(opacity=90) }
a.one { font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0; padding:2 0; background-color:#600; letter-spacing:1px; color:#fff }
a.one:Enlace, a.one:visited { border:1px solid #600; filter:Alpha(opacity=60) }
a.one:hover, a.one:active { border:1px solid #fff; filter:Alpha(opacity=90) }
a.dos { font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0; padding:2 0; background-color:#060; letter-spacing:1px; color:#fff }
a.dos:Enlace, a.dos:visited { border:1px solid #060; filter:Alpha(opacity=60) }
a.dos:hover, a.dos:active { border:1px solid #fff; filter:Alpha(opacity=90) }
a.tres { font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0; padding:2 0; background-color:#006; letter-spacing:1px; color:#fff }
a.tres:Enlace, a.tres:visited { border:1px solid #006; filter:Alpha(opacity=60) }
a.tres:hover, a.tres:active { border:1px solid #fff; filter:Alpha(opacity=90) }
a.cuatro { font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0; padding:2 0; background-color:#660; letter-spacing:1px; color:#fff }
a.cuatro:Enlace, a.cuatro:visited { border:1px solid #660; filter:Alpha(opacity=60) }
a.cuatro:hover, a.cuatro:active { border:1px solid #fff; filter:Alpha(opacity=90) }
a.cinco { font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0; padding:2 0; background-color:#606; letter-spacing:1px; color:#fff }
a.cinco:Enlace, a.cinco:visited { border:1px solid #606; filter:Alpha(opacity=60) }
a.cinco:hover, a.cinco:active { border:1px solid #fff; filter:Alpha(opacity=90) }
.tabsha { border-width:0 1 1 0; border-style:solid; height:97px; width:100px }
.wech { visibility:hidden }
#men1 { top:30px; left:2%; z-index:6; width:100px; position:absolute; border:1px outset #fff }
#sha1 { top:30px; left:2%; z-index:1; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }
#men2 { top:30px; left:22%; z-index:7; width:100px; position:absolute; border:1px outset #ccc }
#sha2 { top:30px; left:22%; z-index:2; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }
#men3 { top:30px; left:42%; z-index:8; width:100px; position:absolute; border:1px outset #ccc }
#sha3 { top:30px; left:42%; z-index:3; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }
#men4 { top:30px; left:62%; z-index:9; width:100px; position:absolute; border:1px outset #ccc }
#sha4 { top:30px; left:62%; z-index:4; height:120px; width:105px; position:absolute; border:none;filter:shadow(color=#666666, direction=135, strength=5) }
#men5 { top:30px; left:82%; z-index:10; width:100px; position:absolute; border:1px outset #fff }
#sha5 { top:30px; left:82%; z-index:5; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }
</style>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
if( top.parent.frames.length > 0)
top.parent.location.href=self.location.href;
function ejecuta(id,what)
{
document.getElementById(id).style.visibility = what;
}
function degrada_out(obj) {
obj.style.filter="blendTrans(duration=1)";
if ((obj.visibility != "hidden") && (obj.filters.blendTrans.status != 1)) {
obj.filters.blendTrans.Apply();
obj.style.visibility="hidden";
obj.filters.blendTrans.Play();
}
}
function degrada_in(obj) {
obj.style.filter="blendTrans(duration=1)";
if ((obj.visibility != "visible") && (obj.filters.blendTrans.status != 1)) {
obj.filters.blendTrans.Apply();
obj.style.visibility="visible";
obj.filters.blendTrans.Play();
}
}
function mata() {
degrada_out(men1); degrada_out(men2); degrada_out(men3); degrada_out(men4); degrada_out(men5); ejecuta('sha1','hidden'); ejecuta('sha2','hidden'); ejecuta('sha3','hidden'); ejecuta('sha4','hidden'); ejecuta('sha5','hidden')
}
</script>
</head>
<body>
<a class=top href="javascript:mata()" onmouseover="degrada_in(men1); degrada_out(men2); degrada_out(men3); degrada_out(men4); degrada_out(men5); ejecuta('sha1','visible'); ejecuta('sha2','hidden'); ejecuta('sha3','hidden'); ejecuta('sha4','hidden'); ejecuta('sha5','hidden')"
style="position:absolute; top:5px; left:2%">Principal 1</a><br>
<div id=men1 class=wech>
<a class=one href="http://www.Tutores.org">Tutores.org</a><br>
<a class=one href="http://www.Tutores.org/">Enlace 02</a><br>
<a class=one href="http://www.Tutores.org/">Enlace 03</a><br>
<a class=one href="http://www.Tutores.org/">Enlace 04</a><br>
<a class=one href="http://www.Tutores.org/">Enlace 05</a></div>
<div id=sha1 class=wech onclick="mata()"><table class=tabsha><td></td></table></div>
<a class=top href="javascript:mata()" onmouseover="degrada_out(men1); degrada_in(men2); degrada_out(men3); degrada_out(men4); degrada_out(men5); ejecuta('sha1','hidden'); ejecuta('sha2','visible'); ejecuta('sha3','hidden'); ejecuta('sha4','hidden'); ejecuta('sha5','hidden')"
style="position:absolute; top:5px; left:22%">Principal 2</a><br>
<div id=men2 class=wech>
<a class=dos href="http://www.Tutores.org/">Enlace 06</a><br>
<a class=dos href="http://www.Tutores.org">Enlace 07</a><br>
<a class=dos href="http://www.Tutores.org/">Enlace 08</a><br>
<a class=dos href="http://www.Tutores.org/">Enlace 09</a><br>
<a class=dos href="http://www.Tutores.org/">Enlace 10</a></div>
<div id=sha2 class=wech onclick="mata()"><table class=tabsha><td></td></table></div>
<a class=top href="javascript:mata()" onmouseover="degrada_out(men1); degrada_out(men2); degrada_in(men3); degrada_out(men4); degrada_out(men5); ejecuta('sha1','hidden'); ejecuta('sha2','hidden'); ejecuta('sha3','visible'); ejecuta('sha4','hidden'); ejecuta('sha5','hidden')"
style="position:absolute; top:5px; left:42%">Principal 3</a><br>
<div id=men3 class=wech>
<a class=tres href="http://www.Tutores.org/">Enlace 11</a><br>
<a class=tres href="http://www.Tutores.org/">Enlace 12</a><br>
<a class=tres href="http://www.Tutores.org">Enlace 13</a><br>
<a class=tres href="http://www.Tutores.org/">Enlace 14</a><br>
<a class=tres href="http://www.Tutores.org/">Enlace 15</a></div>
<div id=sha3 class=wech onclick="mata()"><table class=tabsha><td></td></table></div>
<a class=top href="javascript:mata()" onmouseover="degrada_out(men1); degrada_out(men2); degrada_out(men3); degrada_in(men4); degrada_out(men5); ejecuta('sha1','hidden'); ejecuta('sha2','hidden'); ejecuta('sha3','hidden'); ejecuta('sha4','visible'); ejecuta('sha5','hidden')"
style="position:absolute; top:5px; left:62%">Principal 4</a><br>
<div id=men4 class=wech>
<a class=cuatro href="http://www.Tutores.org/">Enlace 16</a><br>
<a class=cuatro href="http://www.Tutores.org/">Enlace 17</a><br>
<a class=cuatro href="http://www.Tutores.org/">Enlace 18</a><br>
<a class=cuatro href="http://www.Tutores.org">Enlace 19</a><br>
<a class=cuatro href="http://www.Tutores.org/">Enlace 20</a></div>
<div id=sha4 class=wech onclick="mata()"><table class=tabsha><td></td></table></div>
<a class=top href="javascript:mata()" onmouseover="degrada_out(men1); degrada_out(men2); degrada_out(men3); degrada_out(men4); degrada_in(men5); ejecuta('sha1','hidden'); ejecuta('sha2','hidden'); ejecuta('sha3','hidden'); ejecuta('sha4','hidden'); ejecuta('sha5','visible')"
style="position:absolute; top:5px; left:82%">Principal 5</a><br>
<div id=men5 class=wech>
<a class=cinco href="http://www.Tutores.org/">Enlace 21</a><br>
<a class=cinco href="http://www.Tutores.org/">Enlace 22</a><br>
<a class=cinco href="http://www.Tutores.org/">Enlace 23</a><br>
<a class=cinco href="http://www.Tutores.org/">Enlace 24</a><br>
<a class=cinco href="http://www.Tutores.org/">Enlace 25</a></div>
<div id=sha5 class=wech onclick="mata()"><table class=tabsha><td></td></table></div>
<div style="top:127px; left:0px; right:0px; bottom:0px; z-index:-1; width:100%; height:600px;position:absolute; border:0" onmouseover="mata()"></div>
<div style="top:40px; left:140px; z-index:-2; width:40%; position:absolute; text-align:justify">Contenido
de la pagina</div>
<span style="position:absolute; height:220px; top:0px; right:0px; writing-mode:tb-rl" class="ea" onmouseover="this.className='ae'" onmouseout="this.className='ea'"><small><small>Tutopres.org</small></small></span>
</body>
</html>

ENLACE AL CODIGO

Si quieres enlazar desde tu pagina a este codigo

<a title="Tutores.org - Menu de navegacion con efecto degradado" href="http://www.tutores.org/codigo/1347/" target="_blank">Menu de navegacion con efecto degradado</a>

COMENTARIOS

Aun no existe ningun comentario para este Codigo.

INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
	Codigo Seguridad
	Antes de enviar un comentario... Todos los comentarios son revisados personalmente Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado Usuarios registrados tienen preferencia en recibir respuestas de ayuda!! Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor. Por favor, insertar los comentarios descriptivos.