Comunidad de diseño web y desarrollo en internet online

menú vertical desplegable hacia abajo (SIN IMÁGENES Y SIN TAPAR MENÚ)

Citar            
MensajeEscrito el 26 Ene 2011 04:06 pm
Buenas.

Primer vez que participo en este foro, la verdad me encuentro en aprietos. Necesito hacer un menú vertical desplegable hacia abajo, que al desplegarse no me tape el contenido del resto del menú. Un ejemplo sería el de esta página: http://www.cavelier.com/eContent/home.asp
Con la diferencia de que este en este menú los botones son imágenes y yo necesito que en el mío sea texto, debido a que necesita ser modificado constantemente.

De verdad les agradecería mucho si pueden ayudarme, ya que la forma en que se hacerlo y la que he encontrado en los tutoriales que he visto es en Dream Weaber (programa que uso) insertando un Spray Menu Bar, el cual me tapa el resto contenido del menú al desplegarse y es esto lo que busco evitar (teniendo en cuenta que debe desplegarse hacia abajo, no al lado).

Mil Gracias a quien pudiese ayudarme.

Por diegorobh

17 de clabLevel



 

firefox
Citar            
MensajeEscrito el 29 Ene 2011 01:40 am
Hola @diegorobh, en la página de ejemplo que das no se desplegó nada, al menos yo no lo vi.
Pero creo que lo que quieres hacer es estó. ¿Verdad?

Saludos.

Por J O S

712 de clabLevel

1 tutorial

Genero:Masculino  

Lima, Perú

chrome
Citar            
MensajeEscrito el 29 Ene 2011 03:44 am
No amigo, pero gracias por el tutorial, está rebueno.

El menú que necesitaba hacer ya lo hice, si te fijas en la página de ejemplo, en el menú vertical que aparece al lado izquierdo de la página si le das clic al botón "la firma", el te muestra un submenú, eso era lo que necesitaba hacer.

Lo que hice fué copiar el código fuente de la página, borrar los elementos que no me servían y mirar a ver como podía funcionar para hacer mi menú.

Por si depronto alguien necesita, este sería el código sin incluir el css, el cual ya cada cual podrá cuadrar según sus necesidades.

Muchas Gracias por tu respuesta JOS. Saludos.

Código :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>



    <title>MENU DE EJEMPLO</title>
   
<link href="estilo_menus/VbecontentSite.css" rel="stylesheet" type="text/css">
        
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body>

<!-- ITEM 1 (1 SOLO LINK) -->

            <table width="170px" border="0px" align="center" cellpadding="0px" cellspacing="0px" class="cssMainMenu" style="">
              <tbody>
                <tr>
                  <td><a href="inicio.aspx" target="_top" tabindex="200" accesskey="L" class="menu">ESCRIBE AQUI EL ITEM</a></td>
                </tr>
              </tbody>
            </table>


<!-- ITEM 2 (1 SOLO LINK) -->

            <table width="170px" border="1px" align="center" cellpadding="0px" cellspacing="0px" frame="above" rules="none" class="cssMainMenu" style="">
              <tbody>
                <tr>
                  <td width="170px"><a href="liquidar.aspx" target="_top" tabindex="200" accesskey="L" class="menu">ESCRIBE AQUI EL ITEM</a></td>
                </tr>
              </tbody>
            </table>


<!-- ITEM 3 (DESPLEGABLE 2 OPCIONES) -->

            <table width="170" border="1px" align="center" cellpadding="0px" cellspacing="0px" frame="above" rules="none" style="">
              <tbody>
                <tr>
                  <td align="center" class="cssMainMenu"><a href="#" id="cssMainMenu1" onClick="javascript:mostra('menu1principal','menu1principal1'); return false;" tabindex="201" accesskey="L" class="menu">ESCRIBE AQUI EL ITEM</a></td>
                </tr>
                <tr>
                  <td colspan="2px"><div id="menu1principal" style="display: none;"">
                    <table width="170px" border="1px" rules="none" frame="above" class="cssSubMenu" cellpadding="0px" cellspacing="0px">
                      <tbody>
                        <tr>
                          <td align="center" class="cssSubMenu"><a id="ItemMenu1_251" href="contenedores.aspx" target="_top" tabindex="251" accesskey="L" class="cssSubMenu">SUBMENU 1</a></td>
                        </tr>
                        <tr>
                          <td align="center" class="cssSubMenu"><a id="ItemMenu1_252" href="conexportacion.aspx" target="_top" tabindex="252" accesskey="L" class="cssSubMenu">SUBMENU 2</a></td>
                        </tr>
                      </tbody>
                    </table>
                  </div></td>
                </tr>
              </tbody>
            </table>


<!--  ITEM 4 (1 SOLO LINK) -->

            <table border="1px" align="center" cellpadding="0px" cellspacing="0px" frame="above" rules="none" class="cssMainMenu" style="">
              <tbody>
                <tr>
                  <td><a href="demoras.aspx" target="_top" tabindex="200" accesskey="L" class="menu">ESCRIBE AQUI EL ITEM</a></td>
                </tr>
              </tbody>
            </table>


<!--ITEM 5 (1 SOLO LINK) -->

            <table width="170" border="1" align="center" cellpadding="0" cellspacing="0" frame="above" rules="none" class="cssMainMenu" style="">
              <tbody>
                <tr>
                  <td width="170px"><a href="exportacion.aspx" target="_top" tabindex="200" accesskey="L" class="menu">ESCRIBE AQUI EL ITEM</a></td>
                </tr>
              </tbody>
            </table>

<!--  ITEM 6 (1 SOLO LINK) -->

            <table border="1px" align="center" cellpadding="0px" cellspacing="0px" frame="above" rules="none" class="cssMainMenu" style="">
              <tbody>
                <tr>
                  <td><a href="cambiarP.aspx" target="_top" tabindex="200" accesskey="L" class="menu">ESCRIBE AQUI EL ITEM</a></td>
                </tr>
              </tbody>
            </table>


<!-- ITEM 7 (1 SOLO LINK) -->

            <table width="170px" border="1px" align="center" cellpadding="0px" cellspacing="0px" frame="above" rules="none" class="cssMainMenu" style="">
              <tbody>
                <tr>
                  <td width="170px"><a href="busqueda.aspx" target="_top" tabindex="200" accesskey="L" class="menu">ESCRIBE AQUI EL ITEM</a></td>
                </tr>
              </tbody>
            </table>


<!-- ITEM 8 (1 SOLO LINK) -->

            <table width="170px" border="1px" frame="above" rules="none" align="center" cellpadding="0px" cellspacing="0px" class="cssMainMenu" style="">
              <tbody>
                <tr>
                  <td width="170px"><a href="ayuda_de_ingreso.pdf" target="_blank" tabindex="200" accesskey="L" class="menu">ESCRIBE AQUI EL ITEM</a></td>
                </tr>
              </tbody>
            </table></td>
        </tr>
      </table>
      <table width="170px" border="1px" align="center" frame="above" rules="none">
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table></td>
  </tr>
</table>
<script language="JavaScript">
 <!--

      /*Mozilla*/
         function mostra(item, objeto) {
             obj = document.getElementById(item);
             if (obj.style.display == "") {
                 obj.style.display = "none"
             }
             else {
                 obj.style.display = ""
             }
         }

   
 //-->
</script>                                   

</body></html>

Por diegorobh

17 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.