MENÚ DESPLEGABLE EN UN GADGET HTLM-JAVASCRIPT

MENÚ DESPLEGABLE EN UN GADGET HTLM-JAVASCRIPT .

Por qué correr detrás de las secuencias de comandos, como jQuery, mientras que vosotros podeis utilizar simplemente CSS y HTML para crear un menú desplegable para tu blog o web. Ahora necesitas aprender cómo crear un menú desplegable en la navegació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 blogs de Blogger tienes que hacer lo siguiente:

Si queréis verlo en acción podéis ir mi probador de códigos copiar el código y pegadlo en el probador y lo veréis tal como es.

Un clic en Diseño

Un clic en "Añadir un gadget"

Seleccione el widget HTML/Javascript, abrelo

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>

Listo ahora ya tienes este menú horizontal con submenús en tu blog de Blogger

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>



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

Fecha de la Publicación; 08-08-2019

 Fuente;  ayudadeblogger

 Publicado por;