Espera unos segundos se esta Cargando...

Menú Horizontal Despegable

17 de diciembre de 2014


Para insertar este Menú Horizontal Desplegable, con CSS en tu blog de blogger.


entramos en ▶ Diseño ▶ Añadir un Gadget ▶ HTML/Javascript y copias el siguiente código:



<style type="text/css">
/* Menú Horizontal Despegable
------------------------------------- */
#subnavbar {
background: #64343C;/*Color de fondo */
width: 873px;/*Ancho del menu si ponen width: 100%; ocupara el ancho total del blog.*/
height: 27px;/*Altura del menu */
font-weight: bold;
color: #FFFFFF;/*Color de la fuente */
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";/*Fuente */
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li {
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
}
#subnav li a:hover, #subnav li a:active {
background: #999999;
color: #000000;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #64343C;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#subnav li li a:hover, #subnav li li a:active {
background: #999999;
margin: 0px;
padding: 5px 10px 5px 10px;
}
#subnav li {
float: left;
padding: 0px;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}
#subnav li li {
}
#subnav li ul a {
width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}
</style>
<div id="subnavbar">
<ul id="subnav">
<li><a href="URL" title="Inicio">INICIO</a></li>
<li><a href="URL " title="">Enlace 1</a>
<ul>
<li><a href="URL " title="">SUB-Enlace 1.1</a></li>
<li><a href="URL" title="">SUB-Enlace 1.2</a></li>
<li><a href="URL" title="">SUB-Enlace 1.3</a></li>
</ul>
</li>
<li><a href="mailto:" title="Enviame un email">CONTACTO</a></li>
<li><a href="URL" title="">Enlace 2</a>
<ul>
<li><a href="URL" title="">SUB-Enlace 2.1</a></li>
<li><a href="URL" title="">SUB-Enlace 2.1</a></li>
<li><a href="URL" title="">SUB-Enlace 2.3</a></li>
</ul>
</li>
<li><a href="URL" title="">Enlace 3</a>
<ul>
<li><a href="URL" title="">SUB-Enlace 3.1</a></li>
<li><a href="URL" title="">SUB-Enlace 3.2</a></li>
</ul>
</li>
<li><a href="URL" title="">Enlace 4</a>
<ul>
<li><a href="URL" title="">SUB-Enlace 4.1</a></li>
<li><a href="URL" title="">SUB-Enlace 4.2</a></li>
</ul>
</li>
<li><a href="URL" title="">Enlace 5</a>
<ul>
<li><a href="URL" title="">SUB-Enlace 5.1</a></li>
<li><a href="URL" title="">SUB-Enlace 5.2</a></li>
<li><a href="URL" title="">SUB-Enlace 5.3</a></li>
<li><a href="URL" title="">SUB-Enlace 5.4</a></li>
</ul>
</li></ul></div>
Ver : Probador de códigos
Ver Tabla de colores hexadecimales.

►Personalizar el Menu 


  • Para personalizarlo cambiar lo que esta en color rojo.
  • Donde dice "URL" entre las comillas agregan la dirección donde quieren redireccionar.
  • Donde dice title "Inicio" entre las comillas agreguen una leyenda como por ejemplo en contacto "Enviame un email".
  • Donde dice mailto: poner su correo electrónico.
  • Donde dice Enlace 1 y SUB-Enlace 1.1 poner el nombre del enlace.

►Como agregar otra pestañas con mas submenus ejemplo:


Etiquetas es la pestaña principal y comienza con un <li>
→ luego para hacer las subpestañas comienze con un <ul>
→ luego como esta en el ejemplo de abajo cada subpestaña
comienza con un <li> y entre subpestañas se dividen con un </li>
→ para finalizar se cierran los submenus con un :
</ul>
</li>


Ejemplo:


<li><a href="URL" title="Categorías">Etiquetas</a>
<ul>
<li><a href="URL" title="">SUB-Etiqueta 1</a></li>
<li><a href="URL" title="">SUB-Etiqueta 2</a></li>
<li><a href="URL" title="">SUB-Etiqueta 3</a></li>
<li><a href="URL" title="">SUB-Etiqueta 4</a></li>
</ul>
</li>



-

No hay comentarios -

Publicar un comentario

Cosas para el Blog © Creative Commons 2014 | Plantilla Cosas para el Blog

creada por CPB | Con la tecnología de Blogger