Ya hemos visto en otros ejemplos de menús realizados con HTML o XHTML y CSS, que las posibilidades para realizar diferentes efectos son muy bastas, y que estos lenguajes tienen como único límite la propia imaginación que pongamos en el desarrollo. En el ejemplo que traemos hoy, todos los ítems de menú tienen colores diferentes, consiguiendo un efecto muy atractivo.
Generalmente los menús desarrollados en páginas web, tienen todos los ítems de menú del mismo color y forma. Sin embargo, es posible hacer que cada ítem se muestre diferente de los demás, simplemente aplicando un identificador a cada uno de ellos, y dando características diferentes en el archivo CSS.
El ejemplo que mostraremos a continuación, es muy sencillo, pero el resultado es atractivo. Durante el desarrollo, explicaremos en forma detallada como funciona. En primer lugar, generaremos los documentos necesarios. Creamos un archivo XHTML 1.0 estricto, con el DTD que corresponde. En el encabezado pondremos el título y el enlace al archivo CSS, que en el caso del ejemplo se encuentra en la raíz del sitio.
El siguiente es el código que deberemos introducir:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="es" >body</strong>”, crearemos una <a href="https://www.lawebera.es/maquetacion-web/xhtml-css/posicion-capas-css.php">capa (div)</a>, cuya única finalidad es darle una <a href="https://www.lawebera.es/xhtml-css/posicion-capas-css.php">posición</a> al menú. Dentro de la capa, crearemos la <a href="https://www.lawebera.es/xhtml-css/crear-dar-estilo-listas-html-css.php">lista sin ordenar (ul)</a> con los seis ítems que tiene el menú de ejemplo. Cada ítem (li) del menú tendrá un identificador. Marcando en forma genérica a cada ítem, es decir, dando formato a los ítems de menú (li), daremos las características que les son comunes a todos los ítems, mientras que con el identificador lograremos darle las características particulares de cada uno de ellos. Como vemos en el código de ejemplo que damos a continuación, cada ítem tiene un identificador propio. Dentro de cada ítem, veremos los enlaces con sus respectivos textos.
<body>
<div id="menu">
<ul>
<li id="item-uno">
<a href="#">Enlace uno</a>
</li>
<li id="item-dos">
<a href="#">Enlace dos</a>
</li>
<li id="item-tres">
<a href="#">Enlace tres</a>
</li>
<li id="item-cuatro">
<a href="#">Enlace cuatro</a>
</li>
<li id="item-cinco">
<a href="#">Enlace cinco</a>
</li>
<li id="item-seis">
<a href="#">Enlace seis</a>
</li>
</ul>
</div>
</body>
Ahora veremos el archivo CSS con los elementos necesarios para que el menú se vea como deseamos.
body {
margin: 0;
padding: 0;
font: normal 13px arial, helvetica, sans-serif;
background: #000;
}
#menu {
width: 900px;
margin: 0 auto;
margin-top: 50px;
}
#menu ul {
list-style: none;
margin: 0;
}
#menu ul li {
margin: 0;
float: left;
}
#menu ul li a {
margin:0 2px;
width: 138px;
font-weight:bold;
font-size:1.5em;
text-align: center;
line-height: 44px;
display:block;
text-decoration: none
}
#menu ul li a:hover {
color:#000;
}
#item-uno a {
border-bottom:5px solid #f00;
color: #f00
}
#item-dos a {
border-bottom:5px solid #f80;
color: #f80;
}
#item-tres a {
border-bottom:5px solid #ff0;
color: #ff0;
}
#item-cuatro a {
border-bottom:5px solid #8f0;
color: #8f0;
}
#item-cinco a {
border-bottom:5px solid #0ff;
color: #0ff;
}
#item-seis a {
border-bottom:5px solid #08f;
color: #08f;
}
#item-uno a:hover {
background:#f00;
}
#item-dos a:hover {
background:#f80;
}
#item-tres a:hover {
background:#ff0;
}
#item-cuatro a:hover {
background:#8f0;
}
#item-cinco a:hover {
background:#0ff;
}
#item-seis a:hover {
background:#08f;
}
Como vemos, el fondo de la página es negro, y tiene como finalidad hacer que los colores de los ítems de menú se destaquen más por contraste. También se han eliminado los márgenes que algunos navegadores tienen por defecto y se han determinado las características de la fuente para todos los elementos de la página.
Luego eliminamos los márgenes que las listas tienen por defecto y también el estilo de lista, de forma que no se muestren los botones que encabezan cada ítem (#menu ul). Debajo, hacemos que cada ítem de la lista sea flotante y también quitamos los márgenes que tienen por defecto (#menu ul li).
Mediante #menu ul li a daremos los elementos comunes a cada ítem del menú. En primer lugar, determinamos márgenes, dimensiones, fuentes y alineación, además de agregar la propiedad “display: block”, para hacer que los ítems de lista con enlace dejen de comportarse como elementos de línea. De otra forma, sería imposible hacer que tomen las dimensiones deseadas. Mediante el empleo de ls pseudo-clase:hover, determinamos el comportamiento del ítem (solo el color del texto del enlace) cuando el puntero pasa sobre él. El hecho de que hayamos incluido la propiedad display, hace que todo el ítem, no solo el texto, se modifique cuando el puntero pasa sobre él.
Debajo, utilizando el identificador individual de cada ítem, damos formato a cada uno de los ítems de menú, dando un borde inferior (ver imagen) y color al texto. Más abajo, también empleamos la pseudo clase :hover en cada ítem particular, para darle un color de fondo cuando el puntero pasa sobre el ítem. El texto en este caso es negro, debido a que lo hemos determinado de esta forma en #menu ul li a:hover, como podemos ver en el código que entregamos.
Otra forma de hacerlo
También es posible hacerlo utilizando una imagen con los colores del menú. Si bien tiene muchas puntos en común con el menú que dejamos hoy, hay elementos que son totalmente diferentes, y que veremos en un artículo posterior.
Ver comentarios (3)
Esta genial la idea tenia algunos problema sobre la imprementación y ya me quedo mas claro como realizarlo les agradesco por la ayuda! saludos desde querétaro mexico.
Hola oie me sirvio de mucho muy bueno aunque tengo un problema al hacer la referencia en cada uno de las secciones no me las reconoce me sale todo encimado en la misma pagina sin reconocer el menu a q cres q se deba podrias ayudarme.
yo tenia esto en mente para una pagina q estoy desarrollando, mi solucion posible era usar canvas, pero esta solucion me parece q funcionara mejor