Menu horizontal con CSS
- Feb
- 14
11 comentarios! 108 palabras - 1 hits
Un pequeño ejemplo donde intento mostrar la facilidad con la que se pueden diseñar menus de navegacion con xhtml y css
Una manera de mantener la semántica en la estructura del documento, es la de presentar los menus como una lista de enlaces, que a base de css convertiremos en el tipo de menu que más se adapte a nuestro diseño.
EL formato más basico de este tipo de listas seria algo asi como:
- <ul>
- <li>Enlace 1</li>
- <li>Enlace 2</li>
- <li>Enlace 3</li>
- </ul>
Que vendria siendo algo tal que,
- Enlace 1
- Enlace 2
- Enlace 3
Viendolo asi, no es que se parezca demasiado a un menu, pero trabajandolo un poco podemos llegar a resultados muy originales.
Os pongo esta lista como ejemplo:
- <ul id="menu">
- <li id="home-link"><a href="#">Inicio</a></li>
- <li id="archive-link"><a href="#">Archivos</a></li>
- <li id="contact-link"><a href="#">Contacto</a></li>
- <li id="project-link"><a href="#">Proyectos</a></li>
- </ul>
Como podeis, cada uno de los elementos del menu cuenta con su identidad unica lo que nos permitira definirlos por separado en el fichero css.
Lo primero que haremos sera decidir el tipo de menu que queremos construir, en este caso, yo quiero hacer un menu sustituyendo los enlaces de texto por imagenes.
Para este ejemplo he creado cinco imagenes, una que me servira de base y las otras cuatro para los “rollovers”, lo siguiente es ponerse con el fichero css.
Para empezar, definimos las propiedaddes del contenedor de la lista:
- ul#menu {
- width: 450px; /* Ancho de la imagen */
- height: 45px; /* Alto de la imagen */
- list-style: none;
- background: url('/archives/examples/menu/horizontal01/menu.png') no-repeat 0 15px; /* Imagen de fondo */
- padding: 0;
- margin: -0.7em 0 1em 0;
- position: relative;
- }
- ul#menu li { /* Convertimos la lista en horizontal */
- padding: 0;
- margin: 0;
- position: absolute;
- display: block;
- height: 45px;
- text-indent: -10000px; /* Sacamos el texto de los enlaces del campo de vision */
- line-height: 0.1em;
- font-size: 0.1em;
- }
En este punto ya tendremos casi terminado nuestro menu, solo queda posicionar las imagenes que daran el efecto de “rollover”.
- /* Definimos las dimensiones de cada elemento de la lista y le asignamos el orden de superposicion */
- ul#menu li#home-link { width: 56px; z-index: 200; }
- ul#menu li#archive-link { width: 160px; z-index: 190; }
- ul#menu li#contact-link { width: 270px; z-index: 180; }
- ul#menu li#project-link { width: 395px; z-index: 170; }
- /* Asignamos una imagen de fondo a cada enlace de la lista */
- li#home-link a { background: url('/archives/examples/menu/horizontal01/inicio.png') no-repeat; }
- li#archive-link a { background: url('/archives/examples/menu/horizontal01/archivos.png'); }
- li#contact-link a { background: url('/archives/examples/menu/horizontal01/contacto.png'); }
- li#project-link a { background: url('/archives/examples/menu/horizontal01/proyectos.png'); }
- /* Movemos la imagen de fondo para dar el efecto del rollover */
- ul#menu li a:hover { background-position: 0 -30px; }
Con esto habremos creado un sencillo menu totalmente accesible y manteniendo la sintaxis del documento.
Lo mejor de usar esta técnica para los rollovers, es que las imagenes que dan el efecto, se cargan como imagenes de fondo, y no al pasar el ratón sobre el enlace, dando un efecto más limpio.
1 enlace
11 comentarios
# Escrito por alex hace 4 años, 9 meses
Hola buenisimas las explicaciones aunque pocos ejemplos pero esta muy bien.
En cuanto al sitio está muy bueno el tema. Muy bien pensado lo del header con la imagen. Yo habia intentado hacer efectos con css pero es poco lo que se puede hacer aunque con el uso de gif animados algo mas de atractivo se puede implementar. Respecto a las imagenes como decis en el codigo, jejeje mi mozilla las bajo antes de leer lo que el codigo decia. :D Saludos y felicitaciones. Muy lindo sitio, excelente estetica.
# Escrito por pepe galleta hace 4 años, 2 meses
muy lindo los colorines y gracias del estilo en el artículo, pero el ejercicio esta pobremente explicado. tuve que bajarme el source y las imagenes de la página de ejemplo para entender como habías cortado las imágenes. en fin, que al final lleva horas descularlo. aunque poco didactico, gracias igual por el intento.
# Escrito por Erudite hace 4 años, 1 mes
Vaya, se trago html el coment, si quieres des-htmlealo para que se pueda ver! xD
# Escrito por Samuell hace 3 años, 6 meses
Hola que tal kisiera un menu con css horizontal, pero a mas de ke esten los menus en forma horizontal, haya una forma de ke salgan menus desplegables..
Espero que me ayuden
Samuell http://www.soydelau.com
# Escrito por pagines web hace 3 años, 4 meses
muchas gracias y felicidades. Me ha servido de mucho!!
# Escrito por andre hace 2 años, 7 meses
Hola, pasé para avisar que tu sitio no anda muy bien con opera… saludos
# Escrito por DDDepressionnn hace 1 año, 8 meses
There has come winter :( It became cold and cloudy! Mood very bad :( Depression Begins
# Escrito por DDDDepressionnnn hace 1 año, 8 meses
Depression Depression Depression aaaaaaaa HEEEEELP :( :( :( I hate winter! I want summer!
# Escrito por wintervssummer hace 1 año, 8 meses
I very much love summer :) Someone very much loves winter :( I Wish to know whom more :) For what you love winter? For what you love summer? Let’s argue :)
# Escrito por Mary hace 1 año, 2 meses
Lo intente hacer y no me salio . Talvez me puedas enviar las imagenes para poder intentar hacer le menu horizontal. Porfis!!!! Gracias y que tengas una linda semana
# Escrito por hola hace 7 meses, 3 semanas
no funciona