Astuce| ménu déroulant

Voici une astuce pour créer un menu déroulant horizontal pour votre blog.

Un menu déroulant est nécessaire lorsque vous avez trop de contenu sur votre blog ou que vous aimez garder les choses organisées.

Pour ajouter un menu déroulant (voir démo ici) pour vos blogs blogger faites ceci:

1. allez à  blogger ==> Mise en page
2. Cliquez sur ajouter un gadget
3. choisir HTML/JavaScript
4. Copier et coller le code suivant:

code à copier:

<div id='mbtnavbar'>

      <ul id='mbtnav'>

        <li>

          <a href='#'>Retour</a>

        </li>

        <li>

          <a href='#'>Astuces</a>

       </li>

        <li>

          <a href='#'>Widgets</a>

        </li>

  <li>

           <a href='#'>Réseaux sociaux</a>

             

<ul>

                <li><a href='#'>Sub Page #1</a></li>

                <li><a href='#'>Sub Page #2</a></li>

                <li><a href='#'>Sub Page #3</a></li>

              </ul>

        </li>

      </ul>

    </div>

Important:

• Vous pouvez ajouter des ménus autant que vous le souhaitez à travers ce code

<li>
          <a href='#'>Tab Name</a>
        </li> 

• En rouge, le sous-menu.   



---

5. Enregistrer et allez à Modèle

6. cliquez sur Modifier le code HTML
7. Chercher  ]]></b:skin> 

8. Juste au-dessus de ce code, copier et coller le code suivant:

/*----- MBT Drop Down Menu ----*/

#mbtnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}

#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
       
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
       
   
       
}
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav 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;
   
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}>

Amélioration du code

• Pour changer la couleur de l'arrière-plan du menu principal, changer # 060505
• Modifier le texte surlignée en jaune pour modifier la couleur de la police, la taille et la famille
• Changer le code # BF0100 pour changer le fond d'un onglet au passage de ​​la souris
• Changer le code # BF0100 our changer changer la couleur de fond du menu déroulant
• Changer le code # 060505 pour changer la couleur de fond du menu déroulant au passage de la souris.

Enregistrez le tout et admirez le résultat

Partager cette astuce :