Menú HTML & CSS responsivo con transiciones

Hola a todos!!. En una publicación anterior vimos como crear un menú con animación JQuery, el día de hoy vamos a crear un menú con movimiento a través de transiciones CSS, es decir, podemos omitir el código Javascript para animar el menú, esto lo hacemos gracias a un truco de CSS ligado a un control checkbox.


1. El primer paso es crear la estructura HTML:

Aqui es dónde viene el truco, como puedes ver utilizamos un checkbox para mostrar el icono de menú, te preguntarás ¿Por qué utilizar un checkbox si lo puedo hacer con una etiqueta img?, bueno, pues este control nos ayudará a detectar cuando se hizo clic sobre él, utilizando CSS detectamos el cambio de estado checked para desplegar u ocultar el menú. ¿podría utilizarse una etiqueta button, link u alguna otra?, la respuesta es, seguramente sí, siempre y cuando podamos detectar sus estados dentro de CSS

Seguir leyendo

Cómo usar los íconos Font Awesome (fa)

Hola entusiasta del desarrollo!…. Te invitamos a revisar este mismo contenido en nuestro nuevo sitio CodeTips.com.mx !
http://www.codetips.com.mx/css/como-usar-los-iconos-font-awesome-fa/

El conjunto de íconos Font Awesome es una de las alternativas que nos permiten decorar nuestro sitio o desarrollo web con elementos gráficos que le den un toque moderno y ligero ya que la representación gráfica de los íconos no se realiza mediante imágenes sino a través de una tipografía (fuente).

La versión actual incluye una colección de 585 íconos en la versión 4.4.0 de Font Awesome y constantemente se agregan más…….

Seguir leyendo este post…….

Creación de menú (UL) desde cero – 4 Sticky Menu.

En el post anterior hicimos un menú horizontal, con posibilidad de agregar submenus verticales para cada opción del menú.

Ahora, agregaremos un poco de funcionalidad al menú, haremos que este menú este siempre visible sin importar que tan larga este la pagina y cuanto se scrollee, a este efecto se le conoce como StickyMenu (Menú pegajoso).

Comencemos……

1.- Estructura básica del menú. Para este ejemplo, utilizaremos la estructura generada en el primer ejercicio.

<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 los estilos generados en el primer ejercicio.

<style type=»text/css»>
            body{ margin:0px;}                       
            /*Estilos para el contendor del menu*/            
            .contenedorMenu
            {
                background: #E321A6;   /*Color de fondo para el menu*/
                width: 100%; /*ancho del menu */
            }
            /*Estilos para el elemnto ul*/
            .menu
            {
                list-style: none;  /*Quitar viñetas de la lista*/
                padding: 0px;    /*Quitar sangría de la lista */
                height: 30px;    /*Establecer el ancho del menu*/
                line-height: 30px; /*Centrar el contenido al medio*/
                margin: 0px;/*Quitar espacios arriba y abajo*/
            }
            /*Estilos para los items de menu*/
            .menu li
            {
                float:left;    /*alinear los elemntos a la izquierda*/
                width:100px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
            }
            /*Estilos para el enlace dentro de los Items de menu*/
            .menu li a
            {
                text-decoration: none;    /*Quitar el subrayado*/
                color: white;    /*Color de fuente*/
                display: inline-block;    /*Expandir el enlace a lo alto del LI*/
                width: 100%;    /*Expandir el enlace a lo largo del LI*/
            }
            /*Estilos para los enlaces cuando el mouse se coloca sobre ellos*/
            .menu li a:hover
            {
                 background-color:white;    /*Color de Fondo*/
                 color:#E321A6;    /*Color de fuente*/
            }
            /*Estilos sticky*/
            .sticky{position: fixed; top: 0px; width: 1000px;}
        </style>

3.- Agregar elementos adicionales a la pagina. Para mostrar como funciona este ejercicio, incorporaremos un encabezado y saltos de linea a la pagina. Como encabezado agregaremos un div, y los saltos de linea se incorporaran al final de la página.

<div class=»pagina»>
            <div class=»encabezado»></div>
            <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>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>

Y sus correspondientes estilos:

            /*Estilos generales para la pagina*/
            .pagina{ width: 1000px; margin: 0 auto;}
            .encabezado{ width:100%; background-color: #456789; height: 200px;}

4.- Agregar la referencia a la API de JQuery. De preferencia utilicemos el sitio oficial de JQuery y la version mas reciente para trabajar nuestros proyectos.

             <script src=»http://code.jquery.com/jquery-1.11.0.min.js»></script>

5.- Implementar el código JQuery. Lo que queremos lograr es lo siguiente:

-Inicialmente el menú debe verse debajo del encabezado y, mientras se scrollea hacia abajo recorrerse en la ventana, como normalmente ocurriría.
-Cuando el scroll rebase el ancho del encabezado, el menú cambiará de estilo para permitir que siempre este visible al tope de la página.

Esto se implementa así:

<script type=»text/javascript» >
            $(document).ready(function () {
                    /*Vincular el evento scroll a la ventana*/
                    $(window).scroll(function () {
                            //Obtener el alto del encabezado
                            var distancia = $(«.encabezado»).height();
                            //Verificar si se ha scrolleado lo sifuciente para que menú se vea en el tope del sitio                            
                            if( $(this).scrollTop() > distancia )
                            {
                                /*Si el scroll llego a la posicion del menu, dejar el menu al tope con posicion fija*/
                                $(«.contenedorMenu»).addClass(«sticky»);
                            }
                            else
                            {
                                /*Si el scroll esta por encima del menu, quitar la posicion fija en el tope*/
                                $(«.contenedorMenu»).removeClass(«sticky»);
                            }
                    });
            });
        </script>

Donde la clase sticky, se define:

/*Estilos sticky*/
.sticky{position: fixed; top: 0px; width: 1000px;}

Esto permite que el menú, siempre este visible sin importar que tan larga sea la página.

Menu4aMenu4b

Gracias

Creación de menú (UL) desde cero – 3 Submenus.

En el post inicial vimos como crear un menú utilizando listas no ordenadas, luego vimos como añadir un estilo de tabs a las opciones del menú. Ahora veremos como agregar submenus a las opciones del menú principal, claro, utilizando listas no ordenadas.

Comencemos….

1.- Estructura principal. Para este ejemplo utilizaremos la estructura creada en el menú básico y la modificaremos para agregar submenus utilizando otra lista no ordenada. La lista que representara el submenu se agregará dentro de la opcion de menu que la contenga, con esto se facilita el posicionamiento del submenu.

<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>
                    <!– este es el submenu –>                    
                    <ul class=»submenu»>
                        <li><a href=»#Subseccion1″>SubSeccion1</a></li>                    
                        <li><a href=»#Subseccion2″>SubSeccion2</a></li>
                        <li><a href=»#Subseccion3″>SubSeccion3</a></li>
                    </ul>
                    <!– Termina el submenu –>                
                </li>
                <li><a href=»#seccion3″>Sección 3</a></li>
            </ul>                        
        </div>

2.- Estilos para el submenu. El submenu debería estar oculto hasta que la opción que lo contiene este seleccionada. Además, agregamos estilos para los submenu items.

/*Estilos para submenu UL*/
            .submenu
            {
                display:none; /*No mostrar*/
            }

/*Estilos para los SubmenuItems    */
            .submenu li
            {
                background: #a921A6;   /*Color de fondo para el menu*/                
                width:140px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
            }

3.- Desplegar el submenu. Una vez el cursor este sobre la opción del menú principal, se cambiará el estilo del submenu para mostrarlo.

/*Cuando se pase el cursor sobre el Item de Menu, mostrar el submenu*/
            .menu li:hover > .submenu
            {
                display: inline-block;            /*Mostrar submenu*/
            }        

 

Ahora, tenemos un menú parecido a este:

Menu Ul

En el siguiente post veremos como hacer un sticky menú

Gracias

Creación de menú (UL) desde cero – 2 Diseño Tab.

En el post anterior creamos la estructura básica del menú utilizando un contenedor y una lista no ordenada como las opciones que el menú va mostrar. Construimos un menú bastante básico pero funcional.

En este post, daremos al menú un aspecto diferente, vamos a simular TABs.

Comencemos…

1.- Estructura Intacta. Para este ejemplo, la estructura que creamos anteriormente no se modificara, seguimos utilizando:

<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.- Agregar estilos. Para darle el efecto de tab, tendremos que agregar nuevos estilos y cambiar de lugar algunos otros.

El primer cambio que realizaremos sucede en la regla del contenedor, en el menú original teníamos esta regla:

.contenedorMenu
            {
                background: #E321A6;   /*Color de fondo para el menu*/
                width: 400px; /*ancho del menu */
            }

Como primer cambio moveremos el estilo que establece color de fondo de la regla del contenedor y lo colocaremos en la regla que establece estilos a los ListsItems.

Como segundo cambio, en esta misma regla, agregaremos los estilos para redondear los bordes superiores de los item de la lista, para esto utilizaremos los estilos border-top-left y border-top-right.

La regla queda así:

.menu li
            {
                float:left;    /*alinear los elemntos a la izquierda*/
                width:100px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
                

               /*Para menú en forma de tabs*/
                background: #E321A6;   /*Color de fondo para el menu 1er cambio*/
                border-top-left-radius: 15px;   /*Bordes redondeados 2ndo cambio*/
                border-top-right-radius: 15px;                
            }

Para mayor información acerca del estilo border-radius, ir aquí

Como tercera modificación, agregamos un borde redondeado al evento hover de los ListItems, esto con la finalidad de ver un borde redondeado al colocar el cursor sobre el Item.

.menu li a:hover
            {
                 background-color:white;    /*Color de Fondo*/
                 color:#E321A6;    /*Color de fuente*/
                 /*Para menú en forma de tabs*/

                 border-top:1px #E321A6 solid;
                 border-top-left-radius: 15px;
                 border-top-right-radius: 15px;    
            }       

El menú queda así:

Menu tab

En el siguiente post veremos como agregar submenús al menú principal

Saludos

Creación de menú (UL) desde cero – 1 Estructura y diseño.

Los menús siempre han sido un elemento infaltable en la visualización de información, por qué, es a partir de él que los usuarios pueden acceder de manera fácil y rápida a toda la información que se desea mostrar.

En los sitio web, los menús han pasado de ser una simple lista enlaces a una serie de elementos HTML que combinado con CSS y JavaScript, nos muestran funcionalidades mas ricas y vistas mas atractivas para usarse.

En esta serie de posts, crearemos un menú desde cero utilizando una lista no ordenada (UL), modificando su vista con CSS y dando funcionalidad con JQuery.

Comencemos…….

1.-Estructurar el menu. Utilizo un div «contenedor » que me permitira mover el menu o cambiar su posicionamiento, dentro de él creo un elemento Lista No Ordenada y creo sus ListItems, uno por cada opción que contendrá el menú.

<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.- Diseñar los estilos. Una vez creada la estructura HTML que formará mi menú, aplico los estilos necesarios para darle una vista diferente a como se vería normalmente una lista no ordenada. A continuación se muestran los estilos aplicados a cada uno de los elementos así como la función que tiene cada uno de ellos:

 <style type=»text/css»>
body{ margin:0px;}
/*Estilos para el contendor del menu*/
.contenedorMenu
{
background: #E321A6;   /*Color de fondo para el menu*/
width: 400px; /*ancho del menu considerando que cada una de las opciones del menu tiene como ancho 100px;*/
}
/*Estilos para el elemnto ul*/
.menu
{
list-style: none;  /*Quitar viñetas de la lista*/
padding: 0px;    /*Quitar sangría de la lista */
margin:0px; /*Quitar espacios que genera la lista ul*/
height: 30px;    /*Establecer el ancho del menu*/
line-height: 30px; /*Centrar el contenido al medio*/
}
/*Estilos para los items de menu*/
.menu li
{
float:left;    /*alinear los elemntos a la izquierda*/
width:100px;    /*Establecer el ancho de cada item*/
text-align:center;    /*centrar contenido en texto*/
}
/*Estilos para el enlace dentro de los Items de menu*/
.menu li a
{
text-decoration: none;    /*Quitar el subrayado*/
color: white;    /*Color de fuente*/
display: inline-block;    /*Expandir el enlace a lo alto del LI*/
width: 100%;    /*Expandir el enlace a lo largo del LI*/
}
/*Estilos para los enlaces cuando el mouse se coloca sobre ellos*/
.menu li a:hover
{
background-color:navy;    /*Color de Fondo*/
color:#fff;    /*Color de fuente*/
}

</style>

Hasta ahora, tenemos un menú bastante básico pero funcional. Algo asi:

Menu básico

En próximos post, agregaremos algunas funcionalidades y características a este menú.

2.-Menu en forma de TAB

Gracias.

Varias transiciones en CSS 3…

Como sabemos CSS3 está incorporando atributos que facilitan la vida, me refiero evitar meternos con JS sin necesidad.

Ahora les muestro una forma rápida de incorporar varios movimientos en una figura, por ejemplo, rotar e incrementar el tamaño de alguna imagen, o crecer y desvanecer, etc, cualquier combinación es posible.

Primero veamos por separado:

<body style=»margin:150px;»>
   <div>
   </div>
</body>

A este único elemento div que tenemos le daremos unas características iniciales, para lo cual utilizamos algunos atributos de CSS.

div
{
background:red;
width:200px;
height:200px;

//especificamos que su aparencia será tener una rotación de 5 grados
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);

//Especificamos que ademas tendrá una transformación la cual tardará en este caso 5s, 
//todavía no especificamos que transformación tendrá, solo que se hará en el tiempo especificado.

transition: transform 5s;
-moz-transition: -moz-transform 5s;
-webkit-transition:-webkit-transform 5s;
-o-transition: -o-transform 5s;
}

Hasta el momento tenemos:

  1. El objeto div creado
  2. Los estilos con lo que aparecerá de entrada
  3. Se ha especificado que tendrá una transición que durará 5 segs.

Ahora es momento de especificar que transformación tendrá en el tiempo que se ha especificado.

div:hover
{
-webkit-transform:rotate(-10deg) scale(1.5);
-moz-transform:rotate(-10deg) scale(1.5);
-o-transform:rotate(-10deg) scale(1.5);
-ms-transform:rotate(-10deg) scale(1.5);
transform:rotate(-10deg) scale(1.5);
}

Como se aprecia, la transformación consiste en dos cosas, una rotación hasta los -10 grados y ademas crecerá 50% de su tamaño real.

De esta manera podemos agregar la cantidad de transformaciones necesarias sobre el objeto.

Saludos