Inicio Apuntes FPApuntes DAW Ejercicio JavaScript: Crear un menú desplegable y plegable

Ejercicio JavaScript: Crear un menú desplegable y plegable

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.
Javascript

En el post que voy a dejar hoy, voy a realizar un pequeño menú como ejercicio JavaScript que resulta muy práctico y vistoso para nuestros proyectos. Se trata de un menú desplegable y plegable con un efecto muy suave que le dará a nuestra web un efecto más profesional.

Evidentemente, este código es solo una muestra, con un poco de paciencia y entendiendo lo que en el se hace, podemos complicar nuestro menú lo que gustemos. En el ejemplo que aquí voy a publicar, cada opción del menú solo tiene un nivel, los cuales haremos con listas.

El JavaScript que hará el efecto en nuestro menú, lo realizaremos mediante getElementById, style.height y scrollHeight. Para darle un poco más de vistosidad al ejercicio, añado un archivo CSS en el que se hará un poco menos soso el ejemplo.

Durante el código, creo que queda bastante claro para que se utiliza cada cosa. Si quieres ver un ejemplo de lo que se conseguirá con el código que aquí publico, puedes echar un vistazo en este enlace.

Una vez explicado el asunto del ejercicio, vamos al turrón del asunto  …

Ejercicio JavaScript: Menú desplegable

 El archivo dónde se guarda el html y el código del Ejercicio JavaScript se llama menu.html:

<html>
<head>
    <title>Menu Desplegable</title>
    <meta name="generator" content="phpStorm">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="styleSheet" type="text/css" href="menu.css">
    <script language="JavaScript" text="text/JavaScript">

        /*
         * Efecto de mover el menu (tanto de desplegar como de replegar).
         * nos devuelve 0px
         */

        function moverMenu(){
            var o = document.getElementById("opcion"+menu.nCual);
            menu.nDesde += menu.nPaso ;
            o.style.height = menu.nDesde + "px";
            if ( menu.nDesde == menu.nHasta ) {
                clearInterval ( menu.intervalo);
                menu.intervalo = 0;
            }
        }

        /*
         * Lanzamos el efecto. No usamos variables globales. Usamos propiedades
         * dinámicas ( menu.nHasta, menu.nPaso)
         * document.getElementById ("opcion..").style.height
         * nos devuelve 0px
         */

        function menu(nCual){
            var o = document.getElementById("opcion"+ nCual);
            if ( !menu.intervalo ) {
                if ( o.style.height=="0px" ) {
                    menu.nDesde    = 0;
                    menu.nHasta    = o.scrollHeight;
                    menu.nPaso     = 1;
                } else {
                    menu.nDesde    = o.scrollHeight;
                    menu.nHasta    = 0;
                    menu.nPaso     = -1;
                }
                menu.nCual = nCual
                menu.intervalo = setInterval ( moverMenu, 5);
            }
            return false;
        }


        /*
         * Ocultamos el menú, asignandole una altura de 0px.
         * Tiene un efecto raro en el navegador.
         * Además, tiene la ventaja de que ahora document.getElementById ("opcion..").style.height
         * nos devuelve 0px
         */

        function ocultarSubMenus(){
            var i, oElem;
            for ( i=1; oElem = document.getElementById("opcion"+i); i++ ){
                oElem.style.height = "0px";
            }
        }


        window.onload= function(){ ocultarSubMenus();}

    </script>
</head>

<body >
<div id="pagina">
    <dl>
        <ul id="menu">
            <li><a href="#opcion1" onclick="return menu(1)">*Menú principal</a>
                <ul id="opcion1" class="submenu">
                    <li>Inicio</li>
                    <li>Cosas legales</li>
                    <li>Cosas de comer</li>
                    <li>Cosas de beber</li>
                </ul></li>
            <li><a href="#opcion2" onclick="return menu(2)">*Enlaces</a>
                <ul id="opcion2" class="submenu">
                    <li><a href="http://entreunosyceros.hol.es" title="entreunosyceros" target="_blank">entreunosyceros</a></li>
                    <li><a href="http://sapobuskedas.hol.es" title="SapoBuskedas" target="_blank">SapoBuskedas</a></li>
                    <li><a href="http://about.me/sapoclay" title="About SapoClay" target="_blank">AboutSapoClay</a></li>
                    <li><a href="http://dawfiles.hol.es" title="DawFiles" target="_blank">DawFiles</a></li>
                    <li><a href="http://pastedaw.hol.es" title="PasteDaw" target="_blank">PasteDaw</a></li>
                    <li><a href="http://twitter.com/sapoclay" title="Twitter SapoClay" target="_blank">TwitterSapoClay</a></li>
                    <li><a href="http://sapoimagenes.hol.es" title="SapoImagenes" target="_blank">SapoImagenes</a></li>
                    <li><a href="http://notasentrecerosyunos.blogspot.com.es" title="NotasEntreunosyceros" target="_blank">Notas</a></li>
                </ul></li>
            <li><a href="#opcion3" onclick="return menu(3)">*Otras cosas</a>
                <ul id="opcion3" class="submenu">
                    <li><a href="http://www.google.com" target="_blank">gOOgle</a></li>
                    <li><a href="http://www.nasa.com" target="_blank">Nasa</a></li>
                    <li><a href="http://www.herbalistgrow.es/shop/" target="_blank">Herbalist</a></li>
                    <li><a href="http://www.joomla.org/" target="_blank">Joomla</a></li>
                </ul></li>



        </ul>




    </dl>


</div>
</body>
</html>

Y las CSS se guardan en un archivo menu.css:

ul {
    margin: 0;
    padding: 0;
    width: 160px;
    overflow: hidden;
}

#menu li {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #c6c6c6;
}

#menu li a{
    padding: 2px 10px;
    text-decoration: none;
}

#menu ul.submenu li{
    list-style:none;
    background-color: #f2f2f2;
    border-top: 1px solid #666;
    margin: 0;
    font-size: 16px;
    height: 20px;
    padding: 2px 10px;
}

El código que se muestra en este ejercicio es fácilmente modificable por todo aquel que quiera para adaptarlo en sus páginas web o en sus ejercicios. En caso de que alguien lo modifique sería de agradecer que compartiese su código para poder seguir aprendiendo y poder hacer cosas mucho más chulas, ya que compartir es aprender.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.