Creando un menú horizontal para tu web o blog
En esta ocasion vamos a crear un menú horizontal, utilizando un poco de CSS y listas simples, este menú es muy elegante, ya que aparte de no ocupa mucho espacio es muy útil y efectivo, siempre es importante tener un menú, ya que así el visitante puede acceder directamente a lo mas relevante que ofrece tu web o blog.
El menú estará en tonos azules, claro, ustedes pueden modificarlo a su gusto y agrado, bueno el menú mas o menos luce así:
1.- Así que como primer paso vamos a pegar el CSS correspondiente al menú, este CSS le dará cuerpo,
margenes, espacios y diseño al menú, así que aquí esta el CSS, En el caso de Blogger pegaremos el CSS antes de "]]></b:skin>"
2.- Después de haber pegado el CSS, pasaremos al ultimo paso... el HTML, cabe resaltar que en este código vamos a poder cambiar las palabras de "Inicio, Recursos, Categorías etc..." bien vamos a pegar el HTML en donde queremos que se vea el menú, lo podemos pegar a lado del logo, bueno he aquí el código HTML:
Después de haber armado el menú, si todo salio bien el resultado seria mas o menos el siguiente:
Si queremos añadir una palabra mas al menú sobra con poner otra lista mas o menos así:
Bueno con esto hemos acabado de crear un excelente menú, el cual nos ayudara muchísimo al desarrollo de nuestra pagina web, espero les haya agradado, si tienen alguna duda, por favor comenten.
El menú estará en tonos azules, claro, ustedes pueden modificarlo a su gusto y agrado, bueno el menú mas o menos luce así:
1.- Así que como primer paso vamos a pegar el CSS correspondiente al menú, este CSS le dará cuerpo,
margenes, espacios y diseño al menú, así que aquí esta el CSS, En el caso de Blogger pegaremos el CSS antes de "]]></b:skin>"
#menusimple {
padding: 0;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1JeOMh3tk_wc49v1bsi1O3_DV1DZw-zQGt7qalbkBAr6T1CLD5MxTdS8XNvPq9KsUOV0VXXjvzbN-y6-3Q4fM0iXurMwA9KhVw8O0Jn_DA1cUp8Y70OOhW5tCDfcq3dBMYZITxC9b8veF/s400/menusider.png) repeat-x; /* Fondo del menú */
height:55px; /* El alto del menú */
}
#menusimple li {
display: inline; /* Indicamos que las palabras van a ser en linea */
}
#menusimple li a {
font-family: Arial; /* Tipo de letra del menú*/
font-size:11px; /* Tamaño de letra */
text-decoration: none;
float:left;
padding: 10px; /* Espacio entre palabras */
color: #fff;
}
#menusimple li a:hover {
background: #2586d7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy0RIbfTq0Z4c68GcepoDiPgkQrgEGFiP0wWj7jzi8zV7GzB3B_u9eKdGg83nxtpWbgCKsEalPVYZQTEiNfNiDSnEWMgoAlyd9kH3ExxAXA3WPFJg5GWs5VaVWz4uRaKcHq8kToK7zx5h-/s400/menusider2.jpg); /* Fondo al pasar el mouse */
padding-bottom:8px;
}
padding: 0;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1JeOMh3tk_wc49v1bsi1O3_DV1DZw-zQGt7qalbkBAr6T1CLD5MxTdS8XNvPq9KsUOV0VXXjvzbN-y6-3Q4fM0iXurMwA9KhVw8O0Jn_DA1cUp8Y70OOhW5tCDfcq3dBMYZITxC9b8veF/s400/menusider.png) repeat-x; /* Fondo del menú */
height:55px; /* El alto del menú */
}
#menusimple li {
display: inline; /* Indicamos que las palabras van a ser en linea */
}
#menusimple li a {
font-family: Arial; /* Tipo de letra del menú*/
font-size:11px; /* Tamaño de letra */
text-decoration: none;
float:left;
padding: 10px; /* Espacio entre palabras */
color: #fff;
}
#menusimple li a:hover {
background: #2586d7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy0RIbfTq0Z4c68GcepoDiPgkQrgEGFiP0wWj7jzi8zV7GzB3B_u9eKdGg83nxtpWbgCKsEalPVYZQTEiNfNiDSnEWMgoAlyd9kH3ExxAXA3WPFJg5GWs5VaVWz4uRaKcHq8kToK7zx5h-/s400/menusider2.jpg); /* Fondo al pasar el mouse */
padding-bottom:8px;
}
2.- Después de haber pegado el CSS, pasaremos al ultimo paso... el HTML, cabe resaltar que en este código vamos a poder cambiar las palabras de "Inicio, Recursos, Categorías etc..." bien vamos a pegar el HTML en donde queremos que se vea el menú, lo podemos pegar a lado del logo, bueno he aquí el código HTML:
<ul id="menusimple">
<li><a href="URL">Inicio</a></li>
<li><a href="URL">Categorías</a></li>
<li><a href="URL">Servicios</a></li>
<li><a href="URL">Recursos</a></li>
<li><a href="URL">Productos</a></li>
<li><a href="URL">Contacto</a></li>
<li><a href="URL">Acerca de</a></li>
<li><a href="URL">Foro</a></li>
</ul>
<li><a href="URL">Inicio</a></li>
<li><a href="URL">Categorías</a></li>
<li><a href="URL">Servicios</a></li>
<li><a href="URL">Recursos</a></li>
<li><a href="URL">Productos</a></li>
<li><a href="URL">Contacto</a></li>
<li><a href="URL">Acerca de</a></li>
<li><a href="URL">Foro</a></li>
</ul>
Después de haber armado el menú, si todo salio bien el resultado seria mas o menos el siguiente:
Si queremos añadir una palabra mas al menú sobra con poner otra lista mas o menos así:
<li><a href="Url">La nueva palabra para el menú</a></li>
Bueno con esto hemos acabado de crear un excelente menú, el cual nos ayudara muchísimo al desarrollo de nuestra pagina web, espero les haya agradado, si tienen alguna duda, por favor comenten.
Lindo aporte no abandones el blog va bien ;)
ResponderBorrarMuchas gracias Bucha, estamos en contacto :)
BorrarHola que tal disculpa como podría cambiarle el fondo al menú?
ResponderBorrarHola se pueden poner subcategorias desplegables?
ResponderBorrarCual sería el codigo?
Gracias
Saludos F de Fifi, claro que se pueden poner subcategorias, estoy haciendo un articulo donde muestro como ponerlas
BorrarHola Manolo, me sirvio muchísimo tu tutorial, gracias!
ResponderBorrarQueria hacerte una pregunta... creo que cuando active mi menú en mi blog http://fashiondetectorperu.blogspot.com/ algo me salió mal y el menú aparece como cortado a la mitad... ojala me puedas ayudar a solucionarlo y dejarlo todo igual, te agradeceria un monton!!!
Como puedo hacer para arreglarlo?
BorrarBuenas Maria Teresa, entre a tu blog, y el menú funciona perfectamente, no asimilo bien tu problema, el problema es que quieres que el menú abarque todo el ancho del blog? eso ya seria meternos directamente en tu plantilla y modificar algunas cosillas con respecto al HTML, o sera que a la hora del pasar el cursor sobre algunos de estos enlaces del menú, la imagen se ve digamos "cortada" o repetida eso es muy fácil de arreglar, pero quisiera que me especificaras bien cual es el error que quieres solucionar para ver una solución concreta, espero tu respuesta, Saludos!
BorrarHola Manolo,gracias por responder :)
BorrarSoy bloggera de Modas hace poco gracias a un proyecto de mi instituto.
Recien hace 5 meses inicie mi blog pero queria reovarlo y ponerle un menu horizontal para tener acceso mas rapido a las notas.
Como entenderas soy un poco novata en esto por eso busque los tutoriales de tu blog.
Bueno mi problema en el blog es que no se como hacer para que el menú horizontal abarque todo el ancho del blog y no deje un pequeño pedazo color gris! y la 2da pregunta es como puedo hacer para que mi menú no salga partido en 2 o cortado?
Ojala puedas ayudarme :)
Mil gracias!!
Por cierto olvidaba decirte.. Al agregar el menú por primera vez en mi blog puse "Expandir Artilugios" era necesario o solo necesitaba copiar los códigos sin expandir el HTML?
BorrarBueno espero no te haya confundido mas.. jaja
Gracias!!
Ahora si entiendo tu problema, con respecto a los artilugios estuvo bien lo que hiciste no afecta en lo mas mínimo, ahora adentrémonos directo al problema, para esto vamos a editar un poco el CSS de tu plantilla y cambiar las imágenes del menú, es decir si el menú va a ser mas grande y mas ancho necesitamos nuevas imágenes, Así que nos vamos a ir directamente al CSS de TU plantilla y vamos a corregir esos errores que me mencionas.
BorrarEn primer lugar corregiremos el defecto de los bordes que hace que el menú se vea digamos "Cortado"
En segundo lugar corregiremos el alto del menú, es decir vamos a hacerlo mas alto para abarque toda tu sección y no se vea mal.
En tercer lugar vamos a poner el menú en TODO el ancho del blog, con estos errores corregidos tendremos lo que tu deseas.
*Continuo en otro comentario, si no no me cabera*
Así que en primera vas a identificar esta parte de tu CSS:
Borrar/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: #eeeeee url(//www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png) repeat scroll 0 0;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid #999999;
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: normal bold 14px 'Courier New', Courier, FreeMono, monospace;
color: #444444;
height: 16px;
line-height: 16px;
}
.tabs-inner .widget li:last-child a {
border-right: 1px solid #999999;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: #666666 url(//www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png) repeat-x scroll 0 -100px;
color: #ffffff;
}
Todo eso lo vas a BORRAR y lo vas a SUSTITUIR por esto:
/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: #eeeeee url(http://img.webme.com/pic/p/pruebasouldhack/menusider4.png) repeat scroll 0 0;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid #42CDEF;
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: normal bold 14px 'Courier New', Courier, FreeMono, monospace;
color: #444444;
height: 16px;
line-height: 16px;
}
.tabs-inner .widget li:last-child a {
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: #666666 url(http://img.webme.com/pic/p/pruebasouldhack/menusider4.png) repeat-x scroll 0 -100px;
color: #ffffff;
}
Ahora el ultimo paso es modificar el Menú, identificamos esta parte:
#menusimple {
padding: 0;
background:#fff url(http://2.bp.blogspot.com/-MzRjFykeFeI/UD_b7CGw0-I/AAAAAAAAAWo/ZzHLJT-dfrs/s400/menusider.png) repeat-x; /* Fondo del menú */
height:55px; /* El alto del menú */
}
#menusimple li {
display: inline; /* Indicamos que las palabras van a ser en linea */
}
#menusimple li a {
font-family: Arial; /* Tipo de letra del menú*/
font-size:11px; /* Tamaño de letra */
text-decoration: none;
float:left;
padding: 10px; /* Espacio entre palabras */
color: #fff;
}
#menusimple li a:hover {
background: #2586d7 url(http://2.bp.blogspot.com/-nlMD1SHzrbo/UEJgqQ5Um1I/AAAAAAAAAXA/GasuUQM53fc/s400/menusider2.jpg); /* Fondo al pasar el mouse */
padding-bottom:8px;
}
Eso lo BORRAMOS y lo SUSTITUIMOS por esto:
#menusimple {
padding: 0;
background:#fff url(http://img.webme.com/pic/p/pruebasouldhack/menusider4.png) repeat-x; /* Fondo del menú */
height:55px; /* El alto del menú */
}
#menusimple li {
display: inline; /* Indicamos que las palabras van a ser en linea */
}
#menusimple li a {
font-family: Arial; /* Tipo de letra del menú*/
font-size:11px; /* Tamaño de letra */
text-decoration: none;
float:left;
padding: 10px; /* Espacio entre palabras */
color: #fff;
}
#menusimple li a:hover {
background: #2586d7 url(http://img.webme.com/pic/p/pruebasouldhack/menuhover7.jpg); /* Fondo al pasar el mouse */
padding-bottom:8px;
height:65px;
}
Con esto solucionaremos esos problemas y tendremos un elegante menú justo como tu lo deseas, aquí te dejo una imagen de como quedaría dicho trabajo:
http://img.webme.com/pic/p/pruebasouldhack/blogarreglado.png
Cualquier duda favor de comentármela María Teresa, Saludos!
Hola Manolo seguí todos los pasos que me indicaste para arreglar mi problema con el menú.
BorrarYa logré ponerlo en todo el ancho del blog pero el menú me ha quedado como que un poco alto,como si fuera doble y quisiera saber como puedo hacer para arreglar el tamaño de la altura y que las palabras queden al medio del menú como en la primera imagen que muestras del en tu tutorial. - See more at: http://souldhacko.blogspot.com/2012/09/creando-un-menu-horizontal-para-tu-web.html?showComment=1361991135149#c911122553653992496
Entiendo, esos es simplemente de reducir unos cuantos pixeles de alto del menú, para eso identificamos esta parte:
Borrar#menusimple {
padding: 0;
background:#fff url(http://img.webme.com/pic/p/pruebasouldhack/menusider4.png) repeat-x; /* Fondo del menú */
height:65px; /* El alto del menú */
}
Y vamos a quitarle pixeles al alto, para eso identificamos la parte "height:65px;" y le ponemos unos 45px, asi quedaria: height:45px;
Con esto quedara solucionado
Eres un capo Manolo!!!:) Gracias ya lo pude solucionar!!
BorrarMe habia pasado dias sin poder arreglarlo y ya casi ni posteaba nada.. jajaja muchas gracias por la ayuda!!
Por ultimo queria preguntarte.. como puedo cambiar el fondo del menú en vez que sea celeste quiero que sea negro como la parte superior de mi blog y que las letras interiores sean rosadas, crees que puedas ayudarme con eso?
Te agradesco un monton!!
Me alegra que todo haya sido solucionado! :) Y claro que si puedes modificar cada ves que gustes el fondo del menú, el color de los enlaces, la altura, la anchura, la imagen al pasar el cursos, todo esta sujeto a ser editado, es decir que todo se puede modificar.
BorrarPara cambiar el fondo del menú identificamos esta parte:
#menusimple {
padding: 0;
background:#fff url(http://2.bp.blogspot.com/-MzRjFykeFeI/UD_b7CGw0-I/AAAAAAAAAWo/ZzHLJT-dfrs/s400/menusider.png) repeat-x; /* Fondo del menú */
height:45px; /* El alto del menú */
}
E identificamos que el fondo se rige por una imagen, pero mencionas que lo quieres de color obscuro, así que pondremos un código de color obscuro para esto utilizaremos el color #000 quedaría mas o menos así:
#menusimple {
padding: 0;
background:#000; /* Fondo del menú */
height:45px; /* El alto del menú */
}
Hay ya indicamos que queremos que el color sea obscuro.
por otro lado también podemos cambiar el fondo sustituyendo el URL de la imagen que estaba desde un principio por la nueva imagen que deseemos para el menú. Eso quedaría mas o menos así:
#menusimple {
padding: 0;
background:#fff url(Aquí pon el nuevo URL de la nueva imagen para el menú) repeat-x; /* Fondo del menú */
height:45px; /* El alto del menú */
}
Hay tienes dos opciones para cambiar el fondo. Puedes usar cualquiera de las dos.
Ahora para cambiar los "colores de las letras" identificamos esta parte:
#menusimple li a {
font-family: Arial; /* Tipo de letra del menú*/
font-size:11px; /* Tamaño de letra */
text-decoration: none;
float:left;
padding: 10px; /* Espacio entre palabras */
color: #fff;
}
Mencionas que quieres que las letras quieres que sean rosadas quitamos el código de color que principalmente era blanco y lo ponemos en código rosado, quedaría mas o menos así:
#menusimple li a {
font-family: Arial; /* Tipo de letra del menú*/
font-size:11px; /* Tamaño de letra */
text-decoration: none;
float:left;
padding: 10px; /* Espacio entre palabras */
color: #FA58D0;
}
Con esto quedara el menú a tus gustos, cualquier duda aquí estamos :)
Hola Manolo, acabo de hacer los pasos que me dices pero no me resultó,el menú se me desconfigura y no salen las letras rosadas, salen negras y el fondo sigue celeste, lo que yo quiero es que el fondo sea negro sin nada de celeste.. como puedo hacer para saber los numeros de colores que quiero ponerle al menú?
BorrarAhora mi menú se ha vuelto doble .. como hago para volverlo como antes?
BorrarOk entiendo, veo que en el fondo simplemente eliminaste el URL de la imagen y no cambiaste por otra, no fijaste un color, por eso es que no se ve el fondo, pero bueno te lo dejo mas sencillo:
Borrar1.- Identificamos esta parte:
/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: #eeeeee url(http://img.webme.com/pic/p/pruebasouldhack/menusider4.png) repeat scroll 0 0;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid #42CDEF;
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: normal bold 14px 'Courier New', Courier, FreeMono, monospace;
color: #444444;
height: 16px;
line-height: 16px;
}
.tabs-inner .widget li:last-child a {
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: #666666 url(http://img.webme.com/pic/p/pruebasouldhack/menusider4.png) repeat-x scroll 0 -100px;
color: #ffffff;
}
Todo eso lo vas a BORRAR y lo SUSTITUIMOS por esto:
/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: #eeeeee url(http://img.webme.com/pic/p/pruebasouldhack/menublack22.png) repeat scroll 0 0;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid #191919;
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: normal bold 14px 'Courier New', Courier, FreeMono, monospace;
color: #444444;
height: 16px;
line-height: 16px;
}
.tabs-inner .widget li:last-child a {
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: #666666 url(http://img.webme.com/pic/p/pruebasouldhack/menublack22.png) repeat-x scroll 0 -100px;
color: #ffffff;
}
2.- Ahora por ultimo paso identificamos esta parte:
#menusimple {
padding: 0;
background:#fff url(http://img.webme.com/pic/p/pruebasouldhack/menusider4.png) repeat-x; /* Fondo del menú */
height:40px; /* El alto del menú */
}
#menusimple li {
display: inline; /* Indicamos que las palabras van a ser en linea */
}
#menusimple li a {
font-family: Arial; /* Tipo de letra del menú*/
font-size:11px; /* Tamaño de letra */
text-decoration: none;
float:left;
padding: 10px; /* Espacio entre palabras */
color: #fff;
}
#menusimple li a:hover {
background: #2586d7 url(http://img.webme.com/pic/p/pruebasouldhack/menuhover7.jpg); /* Fondo al pasar el mouse */
padding-bottom:8px;
height:40px;
}
Todo eso lo BORRAMOS y lo SUSTITUIMOS por esto:
#menusimple {
padding: 0;
background:#000 ur(http://img.webme.com/pic/p/pruebasouldhack/menublack22.png)repeat-x; /* Fondo del menú */
height:40px; /* El alto del menú */
}
#menusimple li {
display: inline; /* Indicamos que las palabras van a ser en linea */
}
#menusimple li a {
font-family: Arial; /* Tipo de letra del menú*/
font-size:13px; /* Tamaño de letra */
text-decoration: none;
float:left;
padding: 10px; /* Espacio entre palabras */
color:#FFA8F6;
}
#menusimple li a:hover {
background:#FFFFFF url(http://img.webme.com/pic/p/pruebasouldhack/menuhover13.jpg) repeat-x; /* Fondo al pasar el mouse */
padding-bottom:8px;
height:40px;
}
Con esto quedara el menú justo a tus gustos, alguna duda favor de comentarla :)
Excelente todo!! ahora si mi menú está perfecto! :)
BorrarMuchisimas gracias!!!
Una última pregunta.. si cambio mi dominio de blogspot.com a .com altera en algo los post ya colgados en mi facebook y otras paginaS?
No no afecta en nada, los re-dirige, ;)
BorrarEste comentario ha sido eliminado por el autor.
ResponderBorrarhola hola... gracias por la aportación...
ResponderBorrarYo he conseguido poner el menú, pero cuando clicas en uno de los apartados del menú no te lleva a esas entradas... es decir, si le doy a INICIO no te lleva a la última entrada... sabe alguien ¿qué he hecho mal??
Muy bien explicado, muchas gracias. Solo una pregunta, se puede cambiar el color de fondo del menú y ponerlo en negro?. Como tendría que hacerlo?. Un saludo y gracias por adelantado.
ResponderBorrarBuenas, para cambiar el fondo nos situamos en esta parte del CSS del menú:
Borrarbackground:#fff url(http://2.bp.blogspot.com/-MzRjFykeFeI/UD_b7CGw0-I/AAAAAAAAAWo/ZzHLJT-dfrs/s400/menusider.png) repeat-x; /* Fondo del menú */
Vámos a cambiar el Url por la imagen de fondo que tu desees, o simplemente borrar el URL y cambiar el código de color "#fff" y sustituirlo por el que quieras.
Saludos!
hola, tengo una duda yo agregue un menu a mi blog pero quiero quitarlo y no se como, me podrias ayudar? mil gracias!
ResponderBorrar