Publicentral.com - promocion de paginas webpromocion de paginas web
Mostrando Codigo - Dhtml
Code

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.
Visitas: 26,287 - 19/09/2004 16:54:26
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


<!-- Codigo ofrecido por Tutores.org -->

  1. <html>
  2. <head>
  3. <title>Menu de navegacion con efecto degradado</title>
  4. <STYLE TYPE="text/css">
  5. body            { background:#fff url("thebackground.gif") no-repeat fixed center center; color:#000; margin:0; border:0; letter-spacing:1px; color:#666 }
  6. .ae         { font: 9px verdana; color: #c8d3e0; margin: 0; text-align: center }
  7. .ea         { font: 9px verdana; color: #7f98b7; margin: 0; filter: fliph flipv; text-align: center }
  8. 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 }
  9. a.top:Enlace, a.top:visited { border:1px solid #000; filter:Alpha(opacity=60) }
  10. a.top:hover, a.top:active   { border:1px solid #fff; filter:Alpha(opacity=90) }
  11. 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 }
  12. a.one:Enlace, a.one:visited { border:1px solid #600; filter:Alpha(opacity=60) }
  13. a.one:hover, a.one:active   { border:1px solid #fff; filter:Alpha(opacity=90) }
  14. 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 }
  15. a.dos:Enlace, a.dos:visited { border:1px solid #060; filter:Alpha(opacity=60) }
  16. a.dos:hover, a.dos:active   { border:1px solid #fff; filter:Alpha(opacity=90) }
  17. 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 }
  18. a.tres:Enlace, a.tres:visited   { border:1px solid #006; filter:Alpha(opacity=60) }
  19. a.tres:hover, a.tres:active { border:1px solid #fff; filter:Alpha(opacity=90) }
  20. 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 }
  21. a.cuatro:Enlace, a.cuatro:visited   { border:1px solid #660; filter:Alpha(opacity=60) }
  22. a.cuatro:hover, a.cuatro:active { border:1px solid #fff; filter:Alpha(opacity=90) }
  23. 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 }
  24. a.cinco:Enlace, a.cinco:visited { border:1px solid #606; filter:Alpha(opacity=60) }
  25. a.cinco:hover, a.cinco:active   { border:1px solid #fff; filter:Alpha(opacity=90) }
  26. .tabsha         { border-width:0 1 1 0; border-style:solid; height:97px; width:100px }
  27. .wech           { visibility:hidden }
  28. #men1           { top:30px; left:2%; z-index:6; width:100px; position:absolute; border:1px outset #fff }  
  29. #sha1           { top:30px; left:2%; z-index:1; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }
  30. #men2           { top:30px; left:22%; z-index:7; width:100px; position:absolute; border:1px outset #ccc }  
  31. #sha2           { top:30px; left:22%; z-index:2; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }
  32. #men3           { top:30px; left:42%; z-index:8; width:100px; position:absolute; border:1px outset #ccc }  
  33. #sha3           { top:30px; left:42%; z-index:3; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }
  34. #men4           { top:30px; left:62%; z-index:9; width:100px; position:absolute; border:1px outset #ccc }  
  35. #sha4           { top:30px; left:62%; z-index:4; height:120px; width:105px; position:absolute; border:none;filter:shadow(color=#666666, direction=135, strength=5) }
  36. #men5           { top:30px; left:82%; z-index:10; width:100px; position:absolute; border:1px outset #fff }  
  37. #sha5           { top:30px; left:82%; z-index:5; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }
  38. </style>
  39. <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
  40. if( top.parent.frames.length > 0)
  41. top.parent.location.href=self.location.href;
  42. function ejecuta(id,what)
  43. {
  44. document.getElementById(id).style.visibility = what;
  45. }
  46. function degrada_out(obj) {
  47.     obj.style.filter="blendTrans(duration=1)";
  48.     if ((obj.visibility != "hidden") && (obj.filters.blendTrans.status != 1)) {
  49.        obj.filters.blendTrans.Apply();
  50.         obj.style.visibility="hidden";
  51.         obj.filters.blendTrans.Play();
  52.     }
  53. }
  54. function degrada_in(obj) {
  55.     obj.style.filter="blendTrans(duration=1)";
  56.     if ((obj.visibility != "visible") && (obj.filters.blendTrans.status != 1)) {
  57.      obj.filters.blendTrans.Apply();
  58.       obj.style.visibility="visible";
  59.       obj.filters.blendTrans.Play();
  60.     }
  61. }
  62. function mata() {
  63. 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')
  64. }
  65. </script>
  66. </head>
  67. <body>
  68. <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')"
  69. style="position:absolute; top:5px; left:2%">Principal 1</a><br>
  70. <div id=men1 class=wech>
  71. <a class=one href="http://www.Tutores.org">Tutores.org</a><br>
  72. <a class=one href="http://www.Tutores.org/">Enlace 02</a><br>
  73. <a class=one href="http://www.Tutores.org/">Enlace 03</a><br>
  74. <a class=one href="http://www.Tutores.org/">Enlace 04</a><br>
  75. <a class=one href="http://www.Tutores.org/">Enlace 05</a></div>
  76. <div id=sha1 class=wech onclick="mata()"><table class=tabsha><td></td></table></div>
  77. <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')"
  78. style="position:absolute; top:5px; left:22%">Principal 2</a><br>
  79. <div id=men2 class=wech>
  80. <a class=dos href="http://www.Tutores.org/">Enlace 06</a><br>
  81. <a class=dos href="http://www.Tutores.org">Enlace 07</a><br>
  82. <a class=dos href="http://www.Tutores.org/">Enlace 08</a><br>
  83. <a class=dos href="http://www.Tutores.org/">Enlace 09</a><br>
  84. <a class=dos href="http://www.Tutores.org/">Enlace 10</a></div>
  85. <div id=sha2 class=wech onclick="mata()"><table class=tabsha><td></td></table></div>
  86. <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')"
  87. style="position:absolute; top:5px; left:42%">Principal 3</a><br>
  88. <div id=men3 class=wech>
  89. <a class=tres href="http://www.Tutores.org/">Enlace 11</a><br>
  90. <a class=tres href="http://www.Tutores.org/">Enlace 12</a><br>
  91. <a class=tres href="http://www.Tutores.org">Enlace 13</a><br>
  92. <a class=tres href="http://www.Tutores.org/">Enlace 14</a><br>
  93. <a class=tres href="http://www.Tutores.org/">Enlace 15</a></div>
  94. <div id=sha3 class=wech onclick="mata()"><table class=tabsha><td></td></table></div>
  95. <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')"
  96. style="position:absolute; top:5px; left:62%">Principal 4</a><br>
  97. <div id=men4 class=wech>
  98. <a class=cuatro href="http://www.Tutores.org/">Enlace 16</a><br>
  99. <a class=cuatro href="http://www.Tutores.org/">Enlace 17</a><br>
  100. <a class=cuatro href="http://www.Tutores.org/">Enlace 18</a><br>
  101. <a class=cuatro href="http://www.Tutores.org">Enlace 19</a><br>
  102. <a class=cuatro href="http://www.Tutores.org/">Enlace 20</a></div>
  103. <div id=sha4 class=wech onclick="mata()"><table class=tabsha><td></td></table></div>
  104. <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')"
  105. style="position:absolute; top:5px; left:82%">Principal 5</a><br>
  106. <div id=men5 class=wech>
  107. <a class=cinco href="http://www.Tutores.org/">Enlace 21</a><br>
  108. <a class=cinco href="http://www.Tutores.org/">Enlace 22</a><br>
  109. <a class=cinco href="http://www.Tutores.org/">Enlace 23</a><br>
  110. <a class=cinco href="http://www.Tutores.org/">Enlace 24</a><br>
  111. <a class=cinco href="http://www.Tutores.org/">Enlace 25</a></div>
  112. <div id=sha5 class=wech onclick="mata()"><table class=tabsha><td></td></table></div>
  113. <div style="top:127px; left:0px; right:0px; bottom:0px; z-index:-1; width:100%; height:600px;position:absolute; border:0" onmouseover="mata()"></div>
  114. <div style="top:40px; left:140px; z-index:-2; width:40%; position:absolute; text-align:justify">Contenido
  115.   de la pagina</div>
  116. <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>
  117. </body>
  118. </html>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<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>
<!-- Final enlace Tutores.org -->
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.