Creando un menu de navegación
Nuestro menú lo haremos utilizando listas y hojas de estilo, también utilizaremos dos imágenes, una para la posición en reposo y otra para la posición activa, este tutorial te ayudara a ver las ventajas que tiene el uso de hojas de estilo.
Paso 1Guarda las imagenes y metelas a una carpeta llamada "imagenes":
Paso 2Para comenzar a hacer el menu, crea un archivo con nombre: menu.html, ahora has una lista y asignale un link a cada elemento, para hacer una lista utiliza las siguientes instrucciones:
La otra forma es agregando los estilos directamente a la cabecera ejemplo:
El código contiene un div este contendrá la clase , div es una etiqueta que nos ayudara en este caso a asignarle una clase a todo lo que este entre el, contiene un id que esta en la hoja de estilos id="tabs" este sera un identificador que tendran nuestras clases, el identificador hace referencia a una misma familia por así decirlo, y las clases de esta familia solo funcionaran si se encuentran entre el id (si tienes dudas sobre clases puedes ver apuntes css). Este rollo de el id es por si quieres hacer una lista en tu pagina, no la tome como un menu. Asi te debe quedar la lista:
Paso 3Es hora de darle estilo a la lista, crea un archivo llamado style.css, este archivo ira ligado a menu.html, como pueden ver en la hoja de estilos, hay un identificador #tabs este contiene las dimensiones del menu y la imagen de fondo, este id contiene las clases para las etiquetas: "li".-Esta clase contiene la propiedad de eliminar los puntos que se generan al hacer una lista, "li a" esta clase es para cuando hay un link,"li a:hover" es estamos sobre el link, "li a.current" esta es la clase para el boton activo .
style.css
-
/* MENU */
-
#tabs { background: #fff url(imagenes/bigbox.gif) no-repeat top left; color: #000; height: 64px; text-align: center; padding: 0 0 0 50px; }
-
#tabs li { display: inline; height: 45px; }
-
#tabs li a { float: left; background: #fff url(imagenes/barbg.gif) no-repeat; color: #808080; padding: 7px 0; width: 82px; text-align: center; font-weight: bold; text-decoration: none; }
-
#tabs li a:hover { background: #fff url(imagenes/barcurrent.gif) no-repeat; color: #000; }
-
#tabs li a.current { background: #fff url(imagenes/barcurrent.gif) no-repeat; color: #2C71AE; }
Listo asi es como queda el menu y puedes descargarlo de el siguiente link:
Descarga los archivos utilizados.
Foro seguro ahi respondemos tus dudas, unete y se parte de esta comunidad.
jav
el 08 Abr 2007 a las 1:57 #Rodrigo-Azul
el 08 Abr 2007 a las 20:12 #Si no tienes un id en tu hoja de estilos igual a #tabs no existe ningún problema, puedes probarlo en tu header sin ningún problema, me cuentas que tal te fue jav
jav
el 09 Abr 2007 a las 1:27 #hola cheka mi blog, dime qué error es el qué tengo? porque hice exactamente lo que dijiste, osea todo bien, pero parece que el CSS no está bien osea no llama las imagenes, Gracias
jav
el 09 Abr 2007 a las 2:34 #Ya solucione el problema de las imagenes, pero no entiendo porque me sale una barra blanca atras y no de el mismo color del fondo
Rodrigo-Azul
el 09 Abr 2007 a las 19:54 #Ya vi tu blog bro y veo que le has quitado la barra blanca esta salia por que en las propiedades de el id estaba como color de fondo #FFF
#tabs { background: #fff url(imagenes/bigbox.gif) no-repeat top left; color: #000; height: 64px; text-align: center; padding: 0 0 0 50px; }Lo que haremos va ser eliminar las propiedades del background ( imagen, el color de fondo, repeticion), tambien quitaremos el color que creo viene sobrando jejeje, por ultimo modificar la altura de la botonera disminuyendo la altura de 64px a 30px asi te quedara el id
#tabs { height: 30px; text-align: center; padding: 0 0 0 50px;}Nota:Para centrar los botones solo ve ajustando la dimension en izquierda de padding, en este caso son 50 pixeles pero puedes ajustarlos a tu antojo e ir aumentando hasta que quede centrado.
Sintaxis:
padding:dist_arriba, dist_derecha, dist_abajo, dist_izquierda;jav
el 10 Abr 2007 a las 4:18 #otra cosa.. te sigo molestando como hago para centrar todo el menu en el blog. Gracias
Rodrigo-Azul
el 10 Abr 2007 a las 18:31 #jav creo que no leíste
, pero puse las propiedades para tu id (
#tabs { height: 30px; text-align: center; padding: 0 0 0 50px;}), con el padding que viene en estas propiedades puedes cambiar la distancia que hay hacia la izquiera... en tu caso tienes que que cambiar los 50px por la distancia en que consideres esta centrado el menujav
el 12 Abr 2007 a las 19:41 #hola rodrigo gracias, ya centre el menú, lo veo bien ya que mi configuración de pantalla es de 1280*1024
david
el 26 Abr 2007 a las 8:14 #Cómo puedo hacer para que si pulso sobre "página1", se quede con el formato de la clase #current (con la foto barcurrent.gif de fondo) e "inicio" se quede normal (con fondo barbg.gif).
Muchas gracias y felicidades por la página hermano.
Rodrigo-Λzul
el 27 Abr 2007 a las 0:18 #hola david!! utilizando php puedes hacer eso y aqui hay un tutorial que te puede servir
jAV
el 19 May 2007 a las 2:22 #hola roooodrigo! xDDD
oye mira esto http://www.razuri.net/burger/
dime.. como hago para poner la palabra debajo del dibujo?
jAV
el 19 May 2007 a las 3:33 #Mira ese es mi CSS con lo que inserte, pero igual.. osea cuando cambio los pixeles lo que hace es bajar todo el menu
/* MENU */
.nueva_clase{margin-top:10px;}
#tabs { height: 30px; text-align: center; padding: 0 0 0 50px;}#tabs li { display: inline; height: 45px; }
#tabs li a { float: left; background: #fff url(imagenes/barbg.jpg) no-repeat; color: #808080; padding: 80px 0; width: 165px; text-align: center; font-weight: bold; text-decoration: none; }
#tabs li a:hover { background: #fff url(imagenes/barcurrent.jpg) no-repeat; color: #000; }
#tabs li a.current { background: #fff url(imagenes/barcurrent.jpg) no-repeat; color: #2C71AE; }
Rodrigo-Λzul
el 19 May 2007 a las 3:43 #Asi te debe de quedar tu hoja de estilos:
/* MENU */#tabs { height: 30px; text-align: center; padding: 0 0 0 50px;}#tabs li { display: inline; height: 45px; }
#tabs li a { float: left; background: #fff url(imagenes/barbg.jpg) no-repeat; color: #808080; padding: 380px 0; width: 165px; text-align: center; font-weight: bold; text-decoration: none; }
#tabs li a:hover { background: url(imagenes/barcurrent.jpg) no-repeat; color: #000; }
#tabs li a.current { background: url(imagenes/barcurrent.jpg) no-repeat; color: #2C71AE; }
solo le quite el color de fondo y aumente el padding de 80 hasta 380 de las clases li ....
elimina la solucion anterior.
jAV
el 19 May 2007 a las 3:47 #jajajaja IDOLOOOOOOOOOOOOOOO! me salio perfecto.. :F gracias! te pasaste! xDD toi aprendiendo bastante
Rodrigo-Λzul
el 19 May 2007 a las 3:52 #eso es todo jAV!!! me da gusto ver que lo lograste, ahora ya puedo dormir tranquilo
bytes!
omayra
el 09 Oct 2007 a las 21:59 #Muy Bueno. Gracias