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