Crear un menú desplegable en Blogger


¿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:

 
Así que vamos a ir a trabajar!


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 los blogs de Blogger haga lo siguiente:

1. Ir a Blogger, luego da un clic en Diseño

2. Seleccione un widget HTML/Javascript y pega el siguiente código en su interior.


Crear un menú desplegable en Blogger

<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!

Visite sus blogs para ver sus cambios

Si usted tiene alguna pregunta no dude en escribir.





Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: