Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Un nuevo menú deslizable con jQuery

En este tutorial crearemos un menú único deslizable hacia abajo. Este gran menú contendrá algún título y una descripción del elemento del menú. Se deslizará desde la parte inferior, revelando el texto de la descripción y un ícono. Usaremos algunas propiedades CSS3 para algunos efectos de sombra agradables y [...]
De nuestro patrocinador mensual: HelloSign API: Todo lo que TI quiere y le encanta a los desarrolladores. Pruébalo gratis hoy.
En este tutorial crearemos un menú único deslizable hacia abajo. Este gran menú contendrá algún título y una descripción del elemento del menú. Se deslizará desde la parte inferior, revelando el texto de la descripción y un ícono. Usaremos algunas propiedades CSS3 para algunos efectos de sombra agradables y jQuery para la interacción.
El conjunto de iconos de Luna Grey se puede descargar en DryIcons: http://dryicons.com/free-icons/preview/luna-grey-icons/
En el ZIP descargable no podré proporcionarlos, pero mantuve los nombres para que pueda integrarlos fácilmente.
Ok, vamos a empezar con el marcado.

El marcado

El menú se colocará dentro de un contenedor. El menú en sí será una lista desordenada con elementos de enlace dentro. Los elementos del enlace contendrán dos tramos: uno para el título y otro para la descripción. También tendremos un elemento i para el icono:
< Div  clase = "contenedor" > 
 < ul  ID = "Menú" > 
  < li > 
   < un > 
    < i  clase = "icon_about" > </ i > 
    < lapso de  clase = "titulo" > Sobre </ envergadura > 
    < lapso de  clase = "descripción" >
     Conozca sobre nosotros y nuestros servicios.
    </ Envergadura > 
   </ a > 
  </ li > 
   < li > 
   < un > 
    < i  clase = "icon_work" > </ i > 
    < lapso de  clase = "titulo" > Trabajo </ envergadura > 
    < lapso de  clase = "Descripción" >
     Vea nuestro trabajo y portafolio.
    </ Envergadura > 
   </ a > 
  </ li > 
  < li > 
   < un > 
    < i  clase = "icon_help" > </ i > 
    < lapso de  clase = "titulo" > Ayuda </ envergadura > 
    < lapso de  clase = "Descripción" >
     Habla con nuestro soporte.
    </ Envergadura > 
   </ a > 
  </ li > 
   < li > 
   < un > 
    < i  clase = "icon_search" > </ i > 
    < lapso de  clase = "titulo" > Buscar </ envergadura > 
    < lapso de  clase = "Descripción" >
     Busca en nuestra web
    </ span > 
   </ a > 
  </ li > 
 </ ul > 
</ div >
No olvide adaptar el elemento de enlace y agregar su destino a un href si lo necesita.

El CSS

Empecemos por el estilo del contenedor circundante. El contenedor será de posición relativa ya que haremos el menú absoluto. Tendremos que ocultar la parte de descripción de los elementos del menú y, por lo tanto, ocultaremos cualquier desbordamiento del contenedor. Si coloca este menú absolutamente en la página, es decir, en la parte inferior, la parte de la descripción simplemente desaparecerá fuera de su ventana. Este contenedor le permite ver cómo implementar este menú en relación con algún otro elemento:
.container {
     ancho : 900px ;
    altura : 130px ;
    margen : 0 auto;
    posición : relativa;
    desbordamiento : oculto;
    frontera : 3px sólido #fff ;
 color de fondo : #fff ;
    -moz-box-shadow : 1px  1px  6px  # 000 ;
    -webkit-box-shadow : 1px  1px  6px  # 000 ;
    -moz-border-radius : 0px 0px  20px  20px ;
    -webkit-border-bottom-left-radius : 20px ;
    -webkit-border-bottom-right-radius : 20px ;
    radio del borde  : 0px 0px  20px  20px ;
}
Creamos algunas sombras de fantasía y bordes redondeados con las propiedades de CSS3. Tenga en cuenta que solo funcionarán en navegadores modernos (así que, básicamente, todos excepto el maravilloso IE). 
La lista tendrá el siguiente estilo:
ul #menu {
     estilo de lista : ninguno;
    posición : absoluta;
    abajo : 0px ;
    izquierda : 20px ;
    tamaño de fuente : 36px ;
    Familia tipográfica : Helvetica, Arial, sans-serif;
    font-weight : negrita;
    color : # 999 ;
    espacio entre letras : - 2px ;
}
ul #menu  li {
     float : left;
    margen : 0px  10px  0px  0px ;
}
ul #menu  a {
     cursor : puntero;
    posición : relativa;
    flotar : izquierda;
    inferior : - 95px ;
    línea de altura : 20px ;
    ancho : 210px ;
}
Como puede ver, ocultamos el elemento de enlace hacia abajo para ocultar casi el intervalo de descripción. Lo hacemos dando una posición inferior negativa. Puede adaptar este valor para que el intervalo aparezca un poco más o no aparezca. 
Ahora, echemos un vistazo a las clases para los iconos:
.icon_about ,
 .icon_work ,
 .icon_help ,
 .icon_search {
     width : 64px ;
    altura : 64px ;
    pantalla : bloque;
    izquierda : 140px ;
    superior : 50px ;
    posición : absoluta;
}
.icon_about {
     fondo : url transparente (../images/id_card.png) sin repetición arriba a la izquierda;
}
.icon_work {
     fondo : url transparente (../images/globe.png) no-repetir arriba a la izquierda;
}
.icon_help {
     fondo : url transparente (../images/help.png) sin repetición arriba a la izquierda;
}
.icon_search {
     fondo : url transparente (../images/find.png) no-repetir arriba a la izquierda;
}
El CSS de los tramos de título y descripción se verá como sigue:
ul #menu  span .title {
     display : block;
    altura : 26px ;
    text-shadow : 1px  1px  1px  # 000 ;
    color : # B7B7B6 ;
    texto-sangría : 10px ;
}
ul #menu  span .description {
     ancho : 140px ;
    altura : 80px ;
    color de fondo : # B7B7B6 ;
    frontera : 3px sólido #fff ;
    color : #fff ;
    pantalla : bloque;
    tamaño de fuente : 24px ;
    relleno : 10px ;
    -moz-box-shadow : 1px  1px  6px  # 000 ;
    -webkit-box-shadow :1px  1px  6px  # 000 ;
    cuadro de sombra : 1px  1px  6px  # 000 ;
    -moz-border-radius : 10px ;
    -webkit-border-radius : 10px ;
    radio del borde : 10px ;
}
También queremos que los dos vanos cambien el color del texto y del fondo, por lo que definimos el estilo para el desplazamiento del elemento de enlace principal:
ul #menu  a : hover  span .description {
     background-color : # 54504F ;
}
ul #menu  a : hover  span .title {
     color : # 54504F ;
}
Y ese es todo el estilo. Ahora, agreguemos algunos efectos de interacción agradables con jQuery.

El Javascript

El JavaScript será bastante sencillo ya que solo haremos dos cosas: deslizar el elemento de enlace y el icono. La siguiente función hace que eso suceda (y lo contrario cuando movemos el mouse):
$ ( función () {
    $ ( '#menu> li' ) .hover (
         función () {
             var $ this = $ ( this );
            $ ( 'a' , $ this ) .stop ( true , true ) .animate ({
                     'bottom' : '-15px' 
                }, 300 );
            $ ( 'i' , $ this ) .stop ( true , true ) .animate ({
                     'top' : '-10px' 
                }, 400 );
        }
        función () {
             var $ this = $ ( this );
            $ ( 'a' , $ this ) .stop ( true , true ) .animate ({
                     'bottom' : '-95px' 
                }, 300 );
            $ ( 'i' , $ this ) .stop ( true , true ) .animate ({
                     'top' : '50px' 
                }, 400 );
        }
    );
});
Para deslizar el elemento de enlace, cambiamos la posición inferior y la animamos. Para el icono cambiamos el valor superior y le damos más tiempo al efecto, ya que queremos crear un poco de retraso.
¡Y eso es! ¡Disfrútala!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas