{Css Soldier}

CSS, HTML, JAVASCRIPT, Trucos, Tutoriales & Plantillas Blogger.

Menu Horizontal con subpestañas y efecto de desvanecimiento

Este menú fue hecho para Css Soldier, es un menu con subpestañas que tiene un efecto de desvanecimiento en los Items de este al pasar el cursor sobre ellos. Este mismo puede instalarse en cualquier plataforma, no solamente en blogger, tambien lo probe en un HTML y en WordPress así que siéntase con la confianza de utilizarlo fuera de blogger.

Si quieres verlo en funcionamiento entra en este blog de pruebas  y pasa tu cursor por encima del menu para verlo en funcionamiento.



Para ponerlo implementarlo en nuestro blog seguiremos los siguientes pasos.


IMPORTANTE: Si usas una plantilla hecha por Blogger o personalizada a través del Diseñador de Plantillas, primero debes seguir estos 4 simples pasos de esta entrada.

Actualizacion: 12/08/2013 Se corrigio un error que hacia que el el submenu de alineara a la izquierda. 

Nos vamos a  Diseño estando ahí agregamos un Gadget tipo HTML/JavaScript, en Título lo dejamos en blanco y luego en Contenido agregamos lo siguiente.

<style type="text/css">

ul#Soldier-Menu {
 z-index:9999;
background: #079FEE;
margin: 0;
padding: 0;
float: left;
width: 100%;
list-style: none;
position: absolute;
font-size: 18px;
margin: 0;
padding: 0;
 -o-transition:all .4s linear;
-moz-transition:all .4s linear;
-webkit-transition:all .4s linear;
position: relative;


}


ul#Soldier-Menu li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #fff;
-o-transition:all .4s linear;
-moz-transition:all .4s linear;
-webkit-transition:all .4s linear;
position: relative;
 


}


ul#Soldier-Menu li a {
padding: 5px 15px;
display: block;
color: #fff;
text-decoration:none;
-o-transition:all .4s linear;
-moz-transition:all .4s linear;
-webkit-transition:all .4s linear;

}

ul#Soldier-Menu li a:hover{
color: #fff;

}

ul#Soldier-Menu li:hover {
background: #000;
}



ul#Soldier-Menu li span {

z-index:9999;
padding: 1px 0;
position: absolute;
display: none;
width: 200px;
font-size:16px;
background: #000;
color: #079FEE;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}


ul#Soldier-Menu li:hover span {
display: block;

}

ul#Soldier-Menu li span a {
display: list;
color: #079FEE;

}

ul#Soldier-Menu li span a:hover {
text-decoration: none;
color: #fff;
font-size: 16px;
}
</style>


<ul id="Soldier-Menu">
<li><a href="#">Item 1</a></li>
<li>
<a href="#">Item 2</a>
<span>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 2</a>
<a href="#">Sub Item 3</a>
</span>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a>
<span>
<a href="#">Sub Item 1</a>
<a href="#">Sub Item 2</a>
<a href="#">Sub Item 3</a>
</span>
</li>
<li><a href="#">Item 5</a></li>
</ul>

Ahora solamente cambiaremos los Items y sub items por el texto que queramos y donde esta el # lo cambiaremos por el enlace (link) a donde queremos mandar.





Personalización:

Items

Para agregar un nuevo Item agregamos el siguiente código en cualquier parte después de la etiqueta  <ul id="Soldier-Menu"> segun se requiera el orden,  pero sin salirnos de </ul>  :

<li><a href="#">Nombre del Item</a></li>

 Para agregar un Item con Submenu agregamos el siguiente código en cualquier parte después de la etiqueta  <ul id="Soldier-Menu"> segun se requiera el orden,  pero sin salirnos de </ul>  :

<li><a href="#">Item</a>
<span> <a href="#">Sub Item</a></span></li>

Para agregar otro submenu al mismo solo agregamos un <a href="#">Sub Item</a> entre las etiquetas <span>  </span> . Ejemplo:


<li>
<a href="#">Item</a>
<span><a href="#">Sub Item 1</a> <a href="#">Sub Item 2</a><a href="#">Sub Item 3</a></span></li>


Colores

Para cambiar el color de fondo del menu buscamos la siguiente linea en este menú (esta casi al inicio)

background: #3F5369
Cambiamos lo que esta en naraja por el color hexadecimal que queramos

Para cambiar el color de los items al pasar el cursor  localizamos el siguiente pedazo de la estructura del menú y cambiamos lo que esta en naranja por el color hexadecimal que elegimos.


ul#Soldier-Menu li:hover {
background: #000 repeat-x;
}

Colores del SubMenu 

 Primero identificamos lo siguiente:


ul#Soldier-Menu li span {
float: left;
padding: 1px 0;
position: absolute;
left: 30;
display: none;
width: 150px;
font-size:16px;
background: #000;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}

Para cambiar el color de fondo (en este caso negro) cambiamos lo que esta en rojopor el color hexadecimal que queramos.

Para cambiar el color de las letras en este caso blacas del Sub-Menu cambiamos lo que esta en color naranja por el color que elegimos.




Así podemos tener este menú, que es totalmente igual al que maneja esta pagina, solamente lo que varia es el tipo y tamaño de letra.



9 comentarios:

  1. Es estupenda la entrada, pero me surge un problema.
    Cuando consigo poner el menú, no me aparece el desplegable que he hecho, es decir, los sub items que he añadido no se me despliegan, veo que es un problema del ancho, como que desde donde se escribe la primera entrada que tengo hasta el menú no deja espacio para que se desplegue. Podrías decirme como puedo hacerlo? GRACIAS!

    ResponderEliminar
    Respuestas
    1. El problema se debe a que tienes una plantilla hecha por el diseñador de plantillas, lo unico que debes hacer es seguir estos 4 pasos de esta entrada http://csssoldier.blogspot.mx/2013/04/como-usar-cualquier-menu-en-las.html y te debe funcionar a la perfecion!.

      Un Saludo!

      Eliminar
  2. Es el primer menú que veo que no necesita colocar el código HTML en el apartado de HTML, que con el Gadget sobra... ¡Es increíble, te lo agradezco muchísimo! ¡Y me va sin problemas! ¡Te debo una!

    ResponderEliminar
  3. Buenas noches, y si en vez de un color de fondo en la barra, quisieras que aparecieran imagenes personalizadas en cada pestaña como por ejemplo un cartelito con el nombre de el titulo realizado previamente con photoshop etc.

    gracias

    ResponderEliminar
    Respuestas
    1. Hola Anonimo, eso seria un poco mas tedioso debido a que tendrías que poner en el css que en cada pestaña se le daria un background diferente, esto se logra con id y puedes hacerlo asi:

      #Identificador:hover {background-image:url('mifondo.png');}

      y donde van los elementos del menu iria
      Seguido de a href="#" agregaríamos id="Identificador"



      Cambiando los valores de identificador por el que gustes solo deben ser iguales tanto en el css como en el menu, elimina las XXX que agregue al inicio y final


      Si no te funciona no te preocupes Pronto hare una entrada de un menu con esas características saludos!

      Eliminar
  4. Buenas Alejandro, lo primero genial blog, muy claro explicado y el diseño muy original.
    En cuanto a la entrana, perdona mi ignorancia, yo uso una plantilla de blogger y he hecho el primer paso de desbloquear. Yo ya tenía páginas que se me han alineado a la izquierda, ok, no problem, ya lo arreglaré. Pero mi duda es, ¿una vez que consigues hacer las pestañas y subpestañas, cómo asocias los posts a cada opción del submenú? ¿Sigue funcionando el tema etiquetas? no se... me da un poco de miedo tocar esto y cargarme el blog, que no soy yo demasiado apañada con estas cosas.

    ResponderEliminar
  5. Ya lo tengo! olvídalo, mil gracias y feliz año!

    ResponderEliminar
  6. Y.. si una de las pestañas que despliega el menu dentro de el ¿como se puede hacer que despliegue otro menu a la derecha?

    ResponderEliminar