Creación de menú (UL) desde cero – 5 Animación JQuery

En los post anteriores hemos creado un menú básico horizontal utilizando listas no ordenadas, luego le agregamos submenús y también lo hicimos pegajoso al scrollear sobre la página. El día de hoy modificaremos el menú básico para hacerlo vertical y vamos a utilizar JQuery para animar (mostrar / ocultar ) el menú y mejorar la navegabilidad del sitio.

1.- Estructura básica del menú. Utilizaremos la misma estructura que hemos utilizado desde el inicio.  

 <div class="contenedorMenu">        
           <ul class="menu">
                 <li><a href="#inicio">Inicio</a></li>            
                 <li><a href="#seccion1">Sección 1</a></li>
                 <li><a href="#seccion2">Sección 2</a></li>
                 <li><a href="#seccion3">Sección 3</a></li>
        </ul>                        
 </div>

 

2.- Estilos para el menú. Utilizaremos las mismas reglas, solamente cambiaremos algunos estilos para hacerlo vertical.   Hasta este punto el menú se ve así:

3.- Agregar elementos adicionales a la página. Vamos a incorporar un encabezado para el menú, este contendrá un botón en donde al hacer clic se mostrara u ocultara el menú. Antes del div class=»contenedorMenu» agregamos:

<div class=»encabezadoMenu»></div>
<div class=»botonMenu»></div>

y su correspondiente css

/*Estilos para el encabezado del menu*/            
.encabezadoMenu{ width:250px; height:70px; background-color:#2C2C30;}            
.botonMenu{width:37px; height:31px; background-image:url(‘Menu.png’); position:relative; top:20px; left:25px;}            
.botonMenu:hover{ cursor:pointer} ahora el menú se ve asi: 4.- Agregar la referencia a la API de JQuery. De preferencia utilicemos el sitio oficial de JQuery y la versión mas reciente para trabajar nuestros proyectos. 5.- Implementar el código JQuery. Lo que queremos lograr es lo siguiente: -Inicialmente el menú debe estar oculto. -Al hacer clic sobre el botón, el menú deberá desplegarse y mostrarse completamente. -Al hacer clic nuevamente, el menú deberá contraerse y ocultarse completamente. Esto se implementará así: // <![CDATA[

    $(document).ready(function(){    
          $(«.contenedorMenu»).slideToggle(); /*Ocultar de inicio el menu*/
          /*Efecto del menu principal*/
          $(«.botonMenu»).click(function(event){ 
               event.stopPropagation(); 
              $(«.contenedorMenu»).slideToggle();  /*SlideUp o SlideDown dependiendo de su estado*/
        });            
  });    

// ]]> El funcionamiento de SlideToggle, SlideUp y SlideDown puede estudiarse en la documentación oficial de JQuery. En el siguiente post, incluiremos el uso del scroll para ocultar el menú. Gracias