Crear un menú desplegable en Blogger
Menú desplegable - ¿Por qué correr detrás de las secuencias de comandos, como jQuery, mientras que usted puede utilizar simplemente CSS y HTML para crear un menú desplegable para su blog o web. Ahora necesita aprender cómo crear un menú desplegable en la navegación.
Anteriormente di a conocer algunos estilos de Menú desplegable para Blogger de los cuales les dejo los enlaces a continuación:
Como agregar un menú para mi blog de Blogger con un solo widget
Como hacer un Menú vertical desplegable para mi blog de Blogger
Como hacer un menú horizontal con submenús y buscador integrado para Blogger
Menu Jquery para Blogger
Menú desplegable para Blogger
Menú desplegable para Blogger con imágenes
Como hacer un Menú vertical desplegable para mi blog de Blogger
Como hacer un menú horizontal con submenús y buscador integrado para Blogger
Menu Jquery para Blogger
Menú desplegable para Blogger
Menú desplegable para Blogger con imágenes
Puede ver su demostración en el blog de demos
¿Cómo crear un menú desplegable?
Un menú desplegable adicional, es cuando se tiene demasiado contenido en su blog o web o te gusta mantener las cosas bien organizadas. Para agregar un menú desplegable para blogs de Blogger haga lo siguiente:
Un clic en Diseño
Un clic en "Añadir un gadget"
Seleccione el widget HTML/Javascript, abralo
Ingrese las siguientes lineas de código en su interior
<style>
#adbnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#adbnav {
margin: 0;
padding: 0;
}
#adbnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#adbnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#adbnav li a, #adbnav li a:link, #adbnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#adbnav li a:hover, #adbnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#adbnav li {
float: left;
padding: 0;
}
#adbnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#adbnav li ul a {
width: 140px;
}
#adbnav li ul ul {
margin: -25px 0 0 161px;
}
#adbnav li:hover ul ul, #adbnav li:hover ul ul ul, #adbnav li.sfhover ul ul, #adbnav li.sfhover ul ul ul {
left: -999em;
}
/*--www.ayudadeblogger.com
www.abogadosasociados.com www.volantedeportivo.com Drop Down Menu ----*/
#adbnav li:hover ul, #adbnav li li:hover ul, #adbnav li li li:hover ul, #adbnav li.sfhover ul, #adbnav li li.sfhover ul, #adbnav li li li.sfhover ul {
left: auto;
}
#adbnav li:hover, #adbnav li.sfhover {
position: static;
}
#adbnav li li a, #adbnav li li a:link, #adbnav li li a:visited {
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#adbnav li li a:hover, #adbnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
</style>
<div id='adbnavbar'>
<ul id='adbnav'>
<li>
<a href='/'>Inicio</a>
</li>
<li>
<a href='#'>Temas</a>
</li>
<li>
<a href='#'>Contactos</a>
</li>
<li>
<a href='#'>Noticias</a>
<ul>
<li><a href='#'>Nombre 1</a></li>
<li><a href='#'>Nombre 2</a></li>
<li><a href='#'>Nombre 3</a></li>
</ul>
</li>
</ul>
</div>
Reemplace # con las URLs de sus entradas y el texto en negrita Nombre 1 con el nombre de las páginas pertinentes.
Para añadir otra pestaña simplemente pega este código antes del cierre </ul>
<li> <a href='#'>Nombre 4</a> </li>
Listo ahora ya tienes este menú horizontal con submenús en tu blog de Blogger
Si deseas puedes realizar algunos cambios:
Para cambiar el color de fondo del menú principal, cambia #060505
Para cambiar el fondo de una ficha con el ratón estacionario, cambia #BF0100
Para cambiar el color de fondo del menú desplegable, cambia #BF0100
Para cambiar el color de fondo del menú desplegable al pasar el ratón estacionario, cambia #060505
Un clic en "Guardar" eso es todo!
Visite sus blogs para ver los nuevos cambios
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Comentarios