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: colocar algunos menus
PPara 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
<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>
#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>
Después de haber insertado el código, un clic en "Guardar"
Reemplaza # 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!
Data de la Publicación; 03-09-2019
Fuente; ayudadeblogger
Publicado por;
