Autor: Jack Bach

Bach es el autor principal de este blog. A los 15 años le dio por hacer un juego en flash y eso le llevó a hacer una web para mostrarlo al mundo. Ahora ya han pasado unos años y ha aprendido sobre todo XHTML y CSS para maquetar sus diseños web.

Objetivo

Crear un menú vistoso y atractivo para una página web con CSS y HTML. El HTML de este menú será en forma de lista para seguir los estandares. Nos basaremos en la siguiente imagen:

Necesitaremos:

• La imagen de fondo del menú (bgmenu.png)
• Las imagens de la izquierda y la derecha del menú (bgmenu_i.png y bgmenu_d.png)

El HTML

Empezamos con un div al que damos la clase menu. Dentro de este creamos la lista. Para crear una lista en HTML lo único que tenemos que hacer es meter dentro de las etiquetas <li> y </li> cada uno de los ítems. En este ejemplo voy a añadir los ítems Blog, Tutoriales, Tips, Freebies y Foro. Nos queda, por tanto, el siguiente código:

<div>
<li><a href="#">Blog</a></li>
<li><a href="#">Tutoriales</a></li>
<li><a href="#">Tips</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Foro</a></li>
</div><!-- fin Menu -->

Pero falta un pequeño detalle. Para que por los dos lados sobresalga el final del menú añadimos dos divs que mostraran las dos imagenes correspondientes alineadas una a la izquierda y la otra a la derecha. Les pondremos las IDs <em>menu_i</em> y <em>menu_d</em>. La manera más fácil de situar un div es antes de la parte del código que queremos que lo rodee. Por tanto lo pondremos antes que la lista:

<div class="menu">
<div id="menu_i"></div>    <div id="menu_d"></div>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Tutoriales</a></li>
<li><a href="#">Tips</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Foro</a></li>
</ul>
</div><!-- fin Menu -->

Y este es todo el código HTML que necesitamos.

El CSS

Aquí está toda la magia del tema. La cuestión principal es que hemos hecho una lista pero no queremos salga cada ítem en una nueva línea, queremos que se alineen. Además no queremos que salga un puntito delante de cada ítem. Esto lo conseguinos con el siguiente código:

.menu li {
list-style-type: none; /* no queremos puntitos*/
display: inline; /* queremos que se alineen todos los ítems*/
}

Además vamos a añadirle unos cuantos estilos más para conseguir el diseño de la imagen que mostré anteriormente. Vamos a poner todo el texto en mayúsculas, a un tamaño de 20px y en negrita. También lo vamos a alinear y a separar cada ítem añadiéndole un padding de 20px por cada lado.

.menu li {
list-style-type: none;
display: inline;
text-transform: uppercase; /* Mayusculas*/
font-size: 20px;
font-weight: bold;
line-height: 80px; /* Posicionamiento */
padding: 0 20px; /* Padding por los lados*/
}

Y ahora vamos a darle estilo a los links. Queremos que no estén subrayados y que sean de color gris (#222). Cuando pasemos por encima se pondrán de color negro:

.menu li a {
text-decoration: none;
color: #222;
}

.menu li a:hover {
color: #000;
}

Lo siguiente es darle estilo al div menu. Queremos que ocupe todo el ancho y que tenga como fondo bgmenu.png repitiendose a lo largo del eje de las Xs:

.menu {
width: 100%;
background: transparent url('img/bgmenu.png') repeat-x;
}

Y ya para acabar, el toque diferente. Vamos a hacer que se salga por los lados el final del menú. Para ello nos vamos a ayudar del margin negativo. Los dos divs que habíamos hecho para cumplir esta función eran #menu_i y #menu_d. El primero lo vamos a alinear a la izquierda, el segundo a la derecha. Les vamos a poner las dimensionesd de las magenes (54×100) y les vamos a poner a cada uno su imagen de fondo. Luego vamos a ponerle un margin-left al primero de -16px y un margin-right al segundo de -16px. tenemos que:

#menu_i {
float: left;
width: 54px;
height: 100px;
background: transparent url('img/bgmenu_i.png') no-repeat;
margin-left: -16px;
}

#menu_d{
float: right;
width: 54px;
height: 100px;
background: transparent url('img/bgmenu_d.png') no-repeat;
margin-right: -16px;
}

¡Y ya está!

Descarga y Demo

He colgado la demo para que podáis ver cómo queda y también os dejo todo el código y las imagenes – al código le he añadido un cuadro para ver cómo queda el menú en situación, pero lo bueno de nuestro menú es que funciona mida lo que mida el cuadro de ancho.

Descargar

Demo

¿Te ha gustado este post? Pues habrán muchísimo mejores, por eso te recomiendo que agregues nuestro feed ¡También me he registrado en Twitter!