54

Simple menu con CSS

Un sencillo menú construido mediante CSS y usando solo una imagen.

Ejemplo de menu
[1] Colocamos las líneas de CSS dentro de nuestra plantilla antes de ]]></b:skin>:

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
float: left;
margin: 0 0.15em;
}

#nav-menu li a
{
background: url(http://img410.imageshack.us/img410/9401/cssnavbm2.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 6em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu
{
width:30em
}


[2] Añadimos el código necesario para construir los enlaces del menú en un elemento HTML de la plantilla y lo arrastramos sobre las entradas o debajo de la cabecera:
<div id="nav-menu">
<ul>
<li><a href="http://elescaparatederosa.blogspot.com">Inicio</a></li>
<li><a href="mailto:lejaniaimposible@hotmail.com">Contacto</a></li>
<li><a href="http://blogger.com">Blogger</a></li>
</ul>
</div>

[3] En este último código es donde tenéis que colocar vuestros propios datos para construir los enlaces.
En el ejemplo hay solo tres botones, pero pueden añadirse más, duplicando las líneas del código y añadiendo los datos del enlace:
<li><a href="Url_del_enlace">Enlace</a></li>

Entradas Relacionadas:

54 comentarios:


pepo

Eres la caña Rosa, lo que no nos enseñes tú....., estoy probando una cosilla con worpré para hacer entre cuatro o cinco blogueros, tambien entiendes de eso???, es para pedirte más consejo... jejeje

Más que todo era por saludarte, seguro que muchos de los que leen (leemos) no hubieran empezado sin ti, gracias, muchas gracias.

jaad

Gracias, Rosa, como siempre. Aunque lo probé y no me funcionó, pero debe ser que no sé hacerlo bien. Volveré a intentarlo. En un blog de prueba, me quedó bien, pero en fogonero no me salieron las pestañas. Gracias por tu empeño, tiempo y energías. Un fuerte abrazo, y un intenso beso.

jesgo

Excelente Rosa, como siempre!!

Noa

Lo he hecho ixactamente como indicas Rosa, pero nada, vista previa y no veo nada... :(
Y me gustaria saber ademas como poner enlaces a entradas, premios y todo eso, para quitar tantas cosas q tengo en la sidebar.
gracias wapa!!!!!!!!!

xabi Garde
Este comentario ha sido eliminado por el autor.
xabi Garde
Este comentario ha sido eliminado por el autor.
xabi Garde

Inmejorable! Un vez más tu sabiduría me sorprende Rosa. Lo he probado en mi blog de pruebas, ya que en el otro tengo puesto el otro menú más completo (menú en forma de pestañas en blogger)
Por cierto, me ha dado envidia todo lo que sabes sobre html, de modo que yo también he empezado a aprender (no sé como aprendiste tú, pero he conseguido un libro que es el más gordo que he leído hasta hoy, se titula "Manual de referencia HTML escrito por Thomas A.Powell.)
Gracias^^

Anónimo

p3p0 , pues no es por "escaquearme" como decimos por aquí, :D de verdad que de Wordpress ni idea ...:-$

Anónimo

jaad, pues si sale en las pruebas debería salir en el otro...es simple css y html, no tiene nada "raro" que pudiera interferir...a no ser que tengas otro menú con ese nombre nav-menu, en cuyo caso con cambiar algunos datos en los códigos estaría solucionado...

Anónimo

Jesgo, gracias :-$

Anónimo

Noa pues esos enlaces se colocan en el menu, este de la entrada o el que sea, de la misma manera que explico en la entrada...
Es raro que no te haya salido, no tiene más ciencia que copiar y pegar donde indico...¿Has probado a hacerlo sin cambiar los datos de los enlaces?
Si te sale tal cual está en el ejemplo, entonces será algún error al "armar" tus enlaces...

Anónimo

Fanso, yo no se tanto como quisiera...todos los días aprendo algo que no sabía. ¿Como aprendía a defenderme en el tema? Pues a base de tutoriales online, probando y re-probando.
Jmiur en Vagabundia, tiene un tutorial muy bueno, por ejemplo, aunque hay bastantes online bastante completos.

Anónimo

Hola Rosa nuevamente molestándote con mis desconocimiento en códigos html,linda seguí todas tus sugerencias en cuantos los enlaces para adaptar las pestañas y la nubes de etiquetas de la Plantilla Vicionary, bueno y no me fue mal solo logre los tres de arriba, ja ja ja y aprender un poco mas de html, pero no logre que la pestaña la rss se activara apesar de que me afilie a feddburner y coloque el código que me dieron, como tampoco las benditas "tab", esto es una locura y desespera tanto el no poder tener blog como el tuyo. pero no importa en algún momento se que podre corregir los errores que tengo.Querida ROSA dime como hacer para que cuando algún visitante quiera dejar un mensaje en donde dice contacto no salga outlook expres, sino un formulario con todos los datos o salga yahoo correo ,o gmail, es que outlook expres no me gusta. y una preguntita mas siii...yo instale el traductor que tu tienes en tu blog pero las banderas están a un lado de donde dice traductor como los alineo

Anónimo

Rosa no tenia activado el perfil y creo que no podías observar mi blog, ya lo hice pero por si "las moscas" esta es mi url: http://www.fundacionayudaalrefugiado.blogspot.com
y nuevamente muchisiiima gracias por todo tu tiempo

Anónimo

Elizabeth, ya vi que has conseguido las tabs de arriba, bien!

Lo mejor será ir así, paso a paso, vamos ahora con lo del suscribe:

Te explico: los dos enlaces para suscribir rss y comentarios, van en la misma línea de las tabs que hay sobre las entradas, así que si ponemos demasiado texto en ellas, los "suscribe" se irán hacia la derecha y aparecerán como en dos líneas, lo mejor será cambiar su mensaje, es decir, en vez de "Suscribe al RSS de Funar" que es una redundancia, ya que si pones solo Suscribe todos saben que es a tu blog...por ejemplo.

Esa parte está en tu plantilla así:
<!-- END MAIN-NAV --></div>
<div id='feed'>
<ul>
<li class='feed-blog'><a href='http://www.feeds.feedburner.com/blogspot/myqw/' title='Subscribe to the feed in your feed reader of choice'>Subscribe al RSS de FUNAR</a></li>
<li class='feed-email'><a href='/feeds/posts/default' title='Subscribe to the feed by email'>Subscribe by email</a></li>
</ul>
</div>
</div><!-- nav-container -->

El enlace a Feedburner no funciona porque si te fijas, hay una comilla al final del enlace que sobra.

En cuanto al Outlook, lo siento, pero no conozco otra forma, en windows es así por defecto.

Anónimo

^^ ¡Lo que se puede hacer con el CSS!

O mejor... ¡qué no se puede hacer con el CSS! Ingenioso, ingenioso, aunque yo me quedo con el "Menu" tipo nube de etiquetas ;)

¡Saludillos!

:$ Elizabeth, si no te gusta Outlook, puedes usar Mozilla Thunderbird: es excelente. Pero como dijo Rosa, en Windows el "predeterminado" es ese, así que si tus visitas no tienen Thunderbird, les saldrá con Outlook.

Anónimo

Hola Rosa! como andas, espero que bien!!!, queria saber si me podrias ayudar con un blog que tengo yo, (nuevo nuevo, recien sacado del horno), eso si, ya tuve otros blogs antes que este, peeeeeero aca viene el problema, esta plantilla es media rara, a mi entender, ya que yo intento hacer lo del menu como esta en este post, pero cuando voy al paso de colocar el codigo html, ese cod no me deja llevarlo abajo ni arriba de la cabecera, solo tengo la opcion de dejarlo sobre la sidebar o sobre la pagina de contenido, y a mi lo que me gustaria es que este o arriba de la cabecera o abajo, pero no por encima de la pagina de contenido ya que queda muy estrecha.

Aca te dejo la direccion de el blog para que lo mires, y si queres, te paso la plantilla para que la veas, por favor necesito que me ayudes!!! desde ya muchas gracias!!!

te dejo mi email por si me queres contestar por ahi:

sebastian_alejandro1992@hotmail.com

Adios y que sigas bien.

Anónimo

te dejo otra vez el link del blog porque no quedo, el link es este:

http://boca-pasion-xeneize.blogspot.com


ahh te comento que arriba de la cabecera ya viene con un menu, y esta genial, solo que me gustaria ponerle una imagen de fondo, para que quede mas presentable!

besos.

Anónimo

Rosa, Rosa... Este truco si que no me funcionó, hice todo como lo indicas, pero no me salen las pestañas o botones uno al lado de otro, sino que me salen 3 arriba y 2 abajo...
Y cuando salen uno al lado del otro esntonces se corre hacia la izquierda el cuerpo de la entrada!!!

Anónimo

Sebastian, no es que tu plantilla sea "medio rara" :D es que cada una está diseñada de forma distinta...

Verás, tu menú, el que viene en la plantilla, está dentro de la plantilla directamente, en lugar de en un elemento. Busca dentro del código HTML, el código del menú, que es este:
<div id='menu'>
<ul>
<li class='first'><a href='http://boca-pasion-xeneize.blogspot.com/'>Home</a></li>
<li><a href='http://boca-pasion-xeneize.blogspot.com/feeds/comments/default'>Fotos</a></li>
<li><a href='http://boca-pasion-xeneize.blogspot.com/feeds/posts/default'>Descargas</a></li>
<li><a href='http://google.com' title=''>Google</a></li>
<li><a href='http://aborregate.com' title=''>Soporte</a></li>
</ul>
</div>

Más abajo a no mucha distancia está la parte de la cabecera que será algo parecido a esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
</b:section>
</div>

Cambia de sitio el código del menú pegandolo justo debajo del </div> de cierre del código de la cabecera, USA LA VISTA PREVIA.

Anónimo

Fernandooo1, siii, casi de todo puede hacerse, menos una casita en la playa :D que ya lo intenté y no sale :((

Gracias por la info que le has dado a Elisabeth ;-)

Anónimo

Pedrox, estos menús se adaptan al espacio donde los colocas, si el espacio es menor que el que ocupen los tres botones, estos se desplazarán formando una segunda fila...como pasa con las pestañas, en realidad, se trataría de variar en el css del menú el tamaño del texto o los padding para intentar adaptarlo al espacio donde vamos a ponerlo...

Anónimo

Hola Rosa!! sos una genia!, jaja estoy re feliz! me volvi loco para que me salga y vos enseguida me lo solucionaste!!!, te invito a que pases por el blog para que veas como quedo y bueno vas a ver que no elimine el menu de arriba de la cabecera porq lo borrare despues, lo que me interesaria ahora seria el poder hacer de que ese menu que por fin pudo quedar debajo de la cabecera y por encima del contenido, tenga una imagen de fondo, osea botones, para que quede mas real, un menu mas "divertido", en este caso tendria que ser amarillo, pero bueno de hacer los botones me encargo yo, lo que no se es como ponerlos.
Si me podrias ayudar con ese temita ya estaria maaaaaaaaaaas que feliz, gracias por ayudar!!!

besos!

Anónimo

:D Rosa,

Te apuesto que ya descubrirás como hacer la casita en la playa ;)

Es cuestión de práctica y moneo ^^.

¡Saludos!

Anónimo

Sebastian, pues ya veo los botones amarillos y todo :D ¡Chico listo!

All-x ▼_▼

Hola Rosita!! bueno pues esto es una utilidad buena, siempre eh dicho que eres la mejor :D, gracias (siempre ayudando) Salu2

Anónimo

Alex, siempre ayudando y vosotros siempre animando.
Eres un encanto :-L

Anónimo

Hola Rosa,

una vez mas te hago una pregunta:

¿sabes alguna manera de paginar el listado de entradas? Me gustaria por ejemplo de que al clickar sobre una etiqueta, en vez de mostrarme todas las entradas directamente lo hiciera por ejemplo de 10 en 10 y al final de dicho menu huberia como en muchas paginas la numeracion de paginas o texto siguiente.

gracias de antemano!

Anónimo

Jordi Casadevall, en Blogger no es posible añadir ese tipo de paginación, que yo sepa.

Anónimo

Perfecto, me funcionó a la primera, aunque queda un poco grande para mi gusto pero bueno, voy a ver que puedo hace..hahaha Gracias Rosa <3

Partidos Vinotintos Blog

Rosa tengo una pregunta respecto a mi menu... no lo hice precisamente con esa explicacion, pero como se que no te enoja que te preguntemos cosillas pss ahi te van mis preguntas, las hice en este post xq es algo relacionado con Menu.. disculpa si esta mal ubicada la misma xD ...

Tengo mi menu hecho ya... todo perfecto, los link funcionan perfectamente .. los colores como los quiero, todo ok ..

El problemilla viene en los elementos del menu.. yo los tengo en un java script y al agregarlo debajo de la cabecera este me ocupa todo el espacio del blog horizontalmente hablando .. asi igual al tuyo.. pero a diferencia del tuyo tu tienes 7 elementos en el menu:(Inicio - Contacto - Suscribe feed - Sobre mi ....), pero todo estan centrados .. en mi caso se pegan todos a la izquierda y me queda un enorme espacio restante a la derecha ...

Supongo que la solucion es separar cada elemento uno del otro hasta asi abarcar el espacio deseado respecto a la cantidad de elementos que tengamos en el menu..

en que parte del codigo podria hacer eso? :/

Mi otra pregunta es que agregue la cabecera y todo me quedo chevere, solo que al agregar el Java Script del menu debajo de la misma, pues no la agrega precisamente debajo sino que deja un espacio entre cabecera y menu de unos 3 centimetros y si pongo el menu arriba de la cabecera me lo pone encima de la cabecera como al 80% del tamaño de la cabecera .. no se si esto se deba al tamaño de la cabecera o a que cosa :/ .. te comento que la cabecera la coloque editando la plantilla ..

Me despido Rosa disculpame el abuso por preguntarte por aca, es que no encontre otros post semejante :/

Saludos Rosa estare atento a tu ayuda ..

Anónimo

Carledens , si no me dejas el enlace para ver tu blog no puedo hacer nada...

Partidos Vinotintos Blog

Sorry Rosa ahí te lo dejo .. ya ahí ando moviéndole al código logre centrar cada elemento mas no cuadrarlos.. pss mejor te lo dejo para que veas.. fijate el espacio que hay entre la cabecera y el menú :/ y también en lo poco cuadrado que están los elementos del menú dentro de toda el área que ocupa el mismo.

http://partidosvinotintos.blogspot.com/

Anónimo

Carledens , tienes colocado el menú en un elemento html en la sección del crosscol, el menú esta diseñado para que se adapte al ancho del sitio donde se coloque, por eso ocupa todo el ancho del body, igual que lo hace el crosscol.
Lo más fácil sería colocarlo justo debajo de la cabecera, para eso quizás necesites hacer un "hueco" (widget) más, mira como hacerlo en esta entrada:
http://elescaparatederosa.blogspot.com/2008/05/elementos-adicionales-en-diseo-de-la.html

Blackout

Hola rosa puse este tip en mi blog pero como pedroX me salio 3 botones arriba y los demas abajo, pero por lo ke he leido aki, primero tengo ke añadir el hueco debajo de la cabecera, y luego añadir el tip del menu y se supone que debe salir todos los botones de forma horizontal y no verticales...es asi?

Anónimo

Blackout , el menú se adapta al espacio donde lo coloques...si está debajo de la cabecera tiene más espacio y no se "bajara" siempre y cuando no tenga demasiados botones.

Lo pongas donde lo pongas, hay que controlar el espacio que ocupará, si pones 12 botones, por ejemplo, seguro se verá en dos filas ya que serían demasiados para cualquier medida del "contenedor".

Unknown

Una amiga vio una plantilla y pensó en mi, cambiando algunas cosillas y agregando otras desde el escaparate como siempre como este fantástico menu te presento y te invito a mi nuevo ronroneo

besos y un abrazote :-L

Anónimo

Pau, es una preciosidad de diseño.
Has transformado una plantilla conocida, en un autentico goce para la vista...las imágenes tal cual están en la cabecera han quedado impactantes, es imposible que una vez has entrado, se te olvide...¡Enhorabuena de verdad!

Unknown

Rosita, debo decirte que solo agregué el menu, los beackdrums y la parte de comentarios por ahora jejeje sabes que soy busquilla.
La cabecera que es preciosa y la idea del blog es de blogmadeinspan, cuando la vi me encantó para mis creaciones.

Gracias por ir a verla, cuando quieras ronronear ya sabes que hay otro rinconcito :)

besos y un abrazote!!! :-L

Anónimo

Hola Rosa, estoy haciendo un blog de momento la cosa bien, pero me estoy haciendo unos menús con (list-0-matic) para poner uno horizontal y otro vertical si pongo el vertical se ve muy bien pero cuando intento poner el segundo no me sale o al revés, me gustaría si me pudieras decir que tengo que hacer para poner un segundo menú, no te puedo dejar el enlace por que lo tengo cerrado hasta que lo termine del todo.

Muchas gracias.

Anónimo

jav-rin , en list-0-matic usan en sus ejemplos el mismo id para todos los menús, porque se supone eso mismo, que solo son ejemplos, así que si vas a colocar dos a la vez y no cambias la id (el nombre) uno de los dos no funcionará, supongo porque no puedo verlo in situ que es esto lo que te pasa.

Por ejemplo, uno de los menús de allí se verá así en el ejemplo:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

Supon que vamos a usarlo dos veces (el mismo u otro de allí) al segundo por ejemplo tines que cambiarle el nombre, no hace falta complicarse demasiado, con añadir un 2 por ejemplo, bastará:

<div id="navcontainer2">
<ul id="navlist2">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist2 li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

Anónimo

Muchas gracias Rosa, funciona muy bien solo tenia que cambiar lo del 2, tienes un blog de mucha ayuda para los novatos.

Saludos

CV

Hola Rosa quiero colocar a mi Blog un menú horizontal con un buscador al final muy parecido al de "el escaparate" cual entrada me recomiendas para hacer un menú como el tuyo pero de otro color!
Gracias de antemano!

Anónimo

CV El de esta entrada está bien, puedes ponerlo en un gadget del footer o donde quieras que se vea:
http://elescaparatederosa.blogspot.com/2008/09/menu-barra-superior-con-buscador.html

CV

Hola Rosa me decidí por este menú! creo que caduco la imagen gif del menu! puedes colocar otra vez el link?

Anónimo

CV Pues no voy apoder hacerlo, lo siento :( he tenido problemas en mi PC y he perdido bastantes archivos de imagen, entre ellos esta.

Trataré de localizar o hacer una que sirva para este menú en cuanto me sea posible.

c

Hola Rosa!!! Una consulta: en el blog elenacabrejas.blogspot.com hice este menú sencillo, con 3 rectangulitos: inicio, trayectoria y contacto, En mi MAC veo los bordes grises perfectos, pero en la PC no se ve ningún borde, sabes que puedo hacer. Y ademas quería saber como hacer para que el fondo de los rectángulos cambie de color. Gracias, María (C)

Anónimo

c Tienes la línea del borde así:
border: 0.4em solid#333333;

Debería haber un espacio entre solid y el código para el color.

En cuanto a que al pasar el ratón se vea otro color, tendrás que añadir al final del código (después de la llave de cierre }) algo así:

#nav-menu a:hover {
background: #000;
}

c

Graaaaaaaaaaacccias ROSA!!!! Con tu ayuda ya solucione lo del borde. Respecto al color de los rectángulos, no me refería a pasar el ratón: Ahora tienen fondo blanco y yo quería ponerlos con otro fondo permanente, se puede? María (C)

Anónimo

c El fondo de los botones es esta línea:
background: url(http://img410.imageshack.us/img410/9401/cssnavbm2.gif) #fff bottom left repeat-x;

Tienen una imagen aplicada, pero se ha borrado del alojamiento y no había guardado copia :S

Así que lo mejor es que dejes esa línea así:

background: #fff;

Simplemente, y cambias ahí el código para tu color.

c

Rosa, Hola. Si quiero escribir en mi menú(sencillo) los títulos (inicio, trayectoria, contacto) y los quiero en ''negrita'' o con otra tipografía: como se hace? Buen viaje, cariños, María (c)

Anónimo

c Si es este mismo menú del que hablas, tendrías que añadir los valores en
#nav-menu li a
{

Siempre después de esa llave.
Para negrita tendrías que poner algo así:
font-weight: bold;

c

GRACIAS ROSA!!!! Quería hacerte una pregunta, me preocupa la futura suspensión de google page, aun que no entiendo bien que es... Me puedes decir que debo hacer para proteger mis blogs??? Maria (c)

Anónimo

c No te preocupes. Solo afecta a quien haya alojado allí algún archivo, que no creo que sea tu caso, y aunque así fuese lo más que podría pasar es que algún truco dejase de funcionar o alguna imagen desapareciese... al blog no le afecta para nada más.
Si no lo usas como alojamiento o no tienes allí una web, no te verás afectada para nada.

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S