¿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 usted necesita aprender cómo crear un menú desplegable en la navegación. Estoy compartiendo un código sencillo aquí que se pueden personalizar completamente para realizar los cambios preferidos.
Crear un menú desplegable en Blogger
Anteriormente di a conocer algunos estilos de Menú desplegable para blogger de los cuales les dejo los enlaces a continuación:
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 los blogs de Blogger haga lo siguiente:
Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
Un clic en “Diseño”
Clic en “Añadir un gadget”
Busca el widget que dice “HTML-Javascript” y ábrelo
Coloca el siguiente código en el interior
Después de haber insertado el código, un clic en "Guardar"
<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='mbtnavbar'>
<ul id='mbtnav'>
<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 los links de su página y el texto en negrita con el nombre de las páginas pertinentes. El código de color amarillo resaltado es responsable del menú desplegable. Puede copiar y pegar en cualquier ficha que desee antes de </ li>
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 color del tamaño de la fuente del texto, cambia el texto que se encuentra en amarillo.
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.
3. Da un clic en "Guardar" y ya está, eso es todo!
Fuente; ayudadeblogger
Publicado por;
No hay comentarios:
Publicar un comentario