23 abr. 2009

Como crear un menu horizontal

Un bonito detalle que le podemos agregar a nuestro blog es una barra de menú, no solo porque le da un toque profecional, sino porque es muy practico para la navegacion en el sitio. El código es muy simple, facil de entender y lo mejor es que es 100% personalizable, yo les proporcionare una base sobre la cual ustedes puedan dar rienda suelta a su imaginacion y crear su propio diseño.

Básicamente una barra de menú es una lista personalizada con css, el código para crear una lista es el siguiente:

<ul>

<li>AAAA</li>

<li>AAAA</li>

<li>AAAA</li>

</ul>

Que daria como resultado esto:
  • AAAA
  • AAAA
  • AAAA
Donde "AAAA" lo deben reemplazar por la palabra que ustedes quieran, por ejemplo "INICIO" o "HOME". Como ven, para crear un menu utilizamos las etiquetas <UL> y <LI>, lo que queda es darles el estilo para que nuestro menu tome forma.

Las propiedades para la etiqueta UL son:

list-style: none; /* Quitamos el punto negro */
width: 100%; /* Que ocupe todo el largo */
margin: 0; /* Quitamos los margenes externos */
padding: 0; /* Quitamos los margenes internos */
...[Bordes, color, fondo, etc]...

Las propiedades para la etiqueta LI son:

float:left; // Para que queden una al lado de la otra
...[Bordes, color, fondo, etc]...

El resultado es el siguiente:



Por ahora solo tenemos una barra con palabras, asi que vamos a convertir esas palabras en enlases, para eso utilizamos la etiqueta <A>, el codigo cambiaria ligeramente:

<li><a href="URL">AAAA</a></li>

Donde URL es nuestra direccion, por ejemplo: http://MiBlog.blogspot.com ,y AAAA el nombre que le quieran dar.

Como a cualquier etiqueta, a los enlases tambien le podemos dar estilo con CSS:

display:block; /* Los convertimos en bloques */
padding:10px; /* Les damos un margen */
text-decoration:none; /* Le quitamos el subrayado */
border-right: 1px solid #FFFFFF; /* Linea separadora */
...[Fuente, color, fondo, etc]...

El resultado es el siguiente:




Ahora vamos a establecer las propiedades del rollover en los enlases, ya que en las otras etiquetas Internet Explorer no lo reconoce y se visualizara incompleto.

Las propiedades para la etiqueta LI A:hover son:

color: #FFF !Important; /* Forzamos a que cambie de color */
background: #224466; /* Cambiamos el color de fondo */

El resultado es el siguiente:



Si pensaban que eso era todo, no es asi, tambien podemos utilizar imagenes para que quede aun mas vistoso, solo debemos cambiar las propiedades del background:

background: transparent url(NuestraImagen.gif);

El resultado es el siguiente:



Tambien se puede utilizar una imagen para el efecto rollover, modificamos tambien la propiedad background de esa etiqueta:

background: transparent url(NuestraImagenRollover.gif);

El resultado es el siguiente:



Ahora el problema es donde ponemos todo eso que hicimos, la forma mas segura es incluirlo en un Elemento HTML, pero primero vamos a crear una seccion en nuestra plantilla para ubicar el elemento.

Deben ir a Edicion HTML y buscar es siguiente codigo:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
</b:section>
</div>

Y cambiarlo por este:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'>
</b:section>
</div>

Lo que hicimos fue crear un nuevo bloque donde agregar elementos, ahora vayan a Elementos de la Pagina, notaran una nueva seccion abajo de la cabecera, hay deben agregar un elemento HTML. Adentro de ese elemento deben agregar el codigo del menu, veamos como queda armado:

Debemos poner nuestro menu dentro de un DIV:

<div id="MiMenu">

<ul>

<li><a href="URL">NOMBRE</a></li>

<li><a href="URL">NOMBRE</a></li>

<li><a href="URL">NOMBRE</a></li>

</ul>

</div>

Y abajo agregamos el codigo CSS entre las etiquetas <STYLE>:

<style type="text/css">

#MiMenu ul{
background:#336699 url(NuestraImagen.gif);
overflow:hidden;
width: 100%;
margin: 0;
padding: 0;
list-style:none;
/* Agregar estilo a gusto */
}

#MiMenu ul li{
color:#000;
float:left;
/* Agregar estilo a gusto */
}

#MiMenu ul li a{
padding:10px;
display:block;
text-decoration:none;
color:#FFF;
border-right: 1px solid #CCC;
/* Agregar estilo a gusto */
}

#MiMenu ul li a:hover{
color:#000;
background:#224466 url(NuestraImagenRollover.gif)
/* Agregar estilo a gusto */
}

</style>

Eso es todo, ahora ya saben como crear un bonito menu para decorar sus blogs.
Ellos han comentado!
Anónimo

HOLA ME GUSTARIA VER UN MODELO DE ETIQUETAS HORIZONTALES PARA VER COMO QUEDA EN EL BLOGS

Shark_Bloody

Creo que se a lo que te refieres, puedes revisar este post

El tema de la alineacion la manejas tu con CSS, el modelo de la "Nube de Etiquetas" se explica en el post que te recomende, sino puedes modificar el elemento original "Etiquetas", el código seria asi:

#Label1 ul{
list-style:none;
width:100%;
overflow:hidden;
}

#Label1 ul li{
float:left;
margin:5px;
}

Todo esto lo agregas en la parte de estilo de la plantilla o antes de <head> entre las etiquetas <style></style>

Para que dé el efecto de deseas puedes agregarlo en el mismo lugar donde recomiendo agregar el menu horizontal.

Anónimo

HOLA HICE MIS ETIQUETAS HORIZONTALES LA MONTE EN EL BLOG, AGREGUE LOS ARCHIVOS, PERO CUANDO LOS BUSCO EN LAS ETIQUETAS NO APARECEN, ME FALTARA ALGO?, GRACIAS

Shark_Bloody

Para que aparesca tienes que haber puesto etiquetas en algun post.

El elemento Etiquetas es aparte del elemento Archivos, no se exactamente a que te refieres.

Si me proporcionas la URL de tu blog lo reviso y veo como lo solucionamos ;)

JUAN

HOLA PORQUE MI MENU NO HACE EL ENLACE SI YO ISE TODOS LOS PASO TALCUAL. YO QUIERO SABER SI HAY ALGUNA FORMA PARA HACER QUE MI MENU EN LACE.

Joxjox91

gracias me fue de mucha ayuda.

¿Desea hacer un comentario?

Diseño: Shark_Bloody
MDEQ® - Todos los derechos reservados