Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 101 vistas

    Como Crear Un Menú Desplegable en JavaScript - HTM

    Cargado por

    sofiavictor68
    El documento describe los 7 pasos para crear un menú desplegable básico en JavaScript. Incluye agregar el código JavaScript, crear la estructura HTML con una lista y subsecciones, agregar estilos CSS, y vincular el JavaScript al HTML mediante eventos del mouse para mostrar u ocultar las subsecciones al pasar el ratón. El proceso finaliza asegurando que el menú funcione correctamente en todos los navegadores.

    Copyright:

    © All Rights Reserved
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd

    Como Crear Un Menú Desplegable en JavaScript - HTM

    Cargado por

    sofiavictor68
    101 vistas3 páginas
    El documento describe los 7 pasos para crear un menú desplegable básico en JavaScript. Incluye agregar el código JavaScript, crear la estructura HTML con una lista y subsecciones, agregar estilos CSS, y vincular el JavaScript al HTML mediante eventos del mouse para mostrar u ocultar las subsecciones al pasar el ratón. El proceso finaliza asegurando que el menú funcione correctamente en todos los navegadores.

    Descripción original:

    EE

    Título original

    0000000 Como Crear Un Menú Desplegable en JavaScript.htm

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOC, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    El documento describe los 7 pasos para crear un menú desplegable básico en JavaScript. Incluye agregar el código JavaScript, crear la estructura HTML con una lista y subsecciones, agregar estilos CSS, y vincular el JavaScript al HTML mediante eventos del mouse para mostrar u ocultar las subsecciones al pasar el ratón. El proceso finaliza asegurando que el menú funcione correctamente en todos los navegadores.

    Copyright:

    © All Rights Reserved
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd
    Descargar como doc, pdf o txt
    101 vistas3 páginas

    Como Crear Un Menú Desplegable en JavaScript - HTM

    Cargado por

    sofiavictor68
    El documento describe los 7 pasos para crear un menú desplegable básico en JavaScript. Incluye agregar el código JavaScript, crear la estructura HTML con una lista y subsecciones, agregar estilos CSS, y vincular el JavaScript al HTML mediante eventos del mouse para mostrar u ocultar las subsecciones al pasar el ratón. El proceso finaliza asegurando que el menú funcione correctamente en todos los navegadores.

    Copyright:

    © All Rights Reserved
    Descargue como DOC, PDF, TXT o lea en línea desde Scribd
    Descargar como doc, pdf o txt
    Está en la página 1de 3

    1.

    Como crear un men desplegable en JavaScript

    Hace unos das se me ocurri la idea de crear un men desplegable en JavaScript, as que me pase algunos das estudiando
    cdigos nuevamente, visitando pginas, viendo tutoriales y al final consegu realizar uno realmente bsico y sencillo, as que me
    gustara compartirlo en este foro con el que estoy tan agradecido y en el que continuamente sigo aprendiendo todos los das.
    Un men desplegable en 7 pasos:
    1 Paso:
    Incluiremos el cdigo JavaScript con las funciones que visualizaran y ocultaran el men; entre <head> y </head> escribe lo
    siguiente:
    Cdigo:
    <link rel="stylesheet" href="estilos.css" type="text/css" media="all" />
    <script type="text/javascript">
    function ver(n) {
    document.getElementById("subseccion"+n).style.display="block"
    }
    function ocultar(n) {
    document.getElementById("subseccion"+n).style.display="none"
    }
    </script>
    </head>

    2 Paso:
    Crearemos el cdigo HTML que incluir el men, primeramente incluiremos un div principal con el nombre navegacin y una lista
    con un solo elemento:
    Cdigo:
    <body>
    <div id="navegador">
    <ul>
    <li id="seccion1">
    <a href="#">Bolsos</a>
    </li>
    </ul>
    </div>
    </body>

    3 Paso:
    Es hora de agregarle el cdigo CSS y que todo esto empiece a tomar forma:
    Cdigo:
    * { padding: 0; margin: auto; text-align: center; }
    #navegador { heigth:40px; width: 800px; background-color: black; padding: 5px; }
    #navegador li { margin:5px; padding: 5px; background-color: blue; width: 200px; float: left; list-style-type: none;
    position: relative; }
    #navegador li a:link { color: #feffe4; text-decoration: none; }
    #navegador li a:visited { color: #feffe4; text-decoration: none; }
    #navegador li a:hover { color:#ffd7a9 ; text-decoration: none; }
    #navegador li a:active { color:#ffd7a9 ; text-decoration: none; }

    4 Paso:
    Ya estamos cerquita de terminar, as que es hora de crear las subsecciones en el cdigo HTML, aadiremos un nuevo div para incluir
    las subsecciones:
    Cdigo:
    <body>
    <div id="navegador">
    <ul>
    <li id="seccion1">
    <a href="#">Bolsos</a>
    <div id="subseccion1">
    <p><a href="#"> Manos Libres</a></p>
    <p><a href="#"> Medianos</a></p>
    <p><a href="#"> Grandes</a></p>
    <p><a href="#"> Dobles</a>
    </div>

    </li>
    </ul>
    </div>
    </body>

    5 Paso:
    Ya podemos ver la lista completa, sin embargo aparece totalmente desplegada, es hora de acomodarla correctamente en el punto
    00.00 de la lista utilizando el div que creamos anteriormente, y la forma de hacerlo es indicando lo siguiente en el cdigo CSS:
    Cdigo:
    #subseccion1 { padding: 5px; width: 200px;
    position: absolute; top: 100%; left: 0px; background-color: black; font-family: arial; display: none; }

    6 Paso:
    La lista ya no aparece desplegada, sin embargo cuando pasamos el ratn por encima no pasa nada aun, lo que pasa es que aunque
    ya declaramos el cdigo JavaScript aun no le hemos indicado en donde debe trabajar, as que lo hacemos de esta forma en el cdigo
    HTML:
    Cdigo:
    <div id="navegador">
    <ul>
    <li id="seccion1" onmouseover="ver(1)" onmouseout="ocultar(1)">
    <a href="#">Bolsos</a>
    <div id="subseccion1">
    <p><a href="#"> Manos Libres</a></p>
    <p><a href="#"> Medianos</a></p>
    <p><a href="#"> Grandes</a></p>
    <p><a href="#"> Dobles</a>
    </div>
    </li>
    </ul>
    </div>

    Paso 7:
    A este paso el men debe estar trabajando correctamente sin embargo en algunos navegadores aparecer desplegado y se ocultara
    hasta que pasemos el raton por lo menos una vez encima de el, para evitar esto le aadiremos un class con la propiedad clear: both
    a la lista de este forma:
    HTML:
    Cdigo:
    <div id="navegador">
    <ul>
    <li id="seccion1" onmouseover="ver(1)" onmouseout="ocultar(1)">
    <a href="#">Bolsos</a>
    <div id="subseccion1">
    <p><a href="#"> Manos Libres</a></p>
    <p><a href="#"> Medianos</a></p>
    <p><a href="#"> Grandes</a></p>
    <p><a href="#"> Dobles</a>
    </div>
    </li>
    </ul>
    <div class="borrar"></div>
    </div>

    Y al CSS:
    Cdigo:
    .borrar { clear: both; }

    Ahora si que tenemos nuestro men desplegable trabajando y completo.


    Espero les haya gustado este tutorial bsico para implementar un men desplegable con JavaScript.
    Un Saludo
    ltima edicin por Jenkins; 08/03/2013 a las 18:58

    Hola Jenkins:
    Gracias por compartirlo :).
    Consejo: envuelve el cdigo entre las etiquetas [code][/code] para que sea ms legible. Ejemplo:
    [code]<script type="text/javascript">
    alert( 'Una ventana emergente' );
    < /script>[/code]

    También podría gustarte