HTML-cursus #2: Top menubar toevoegen

Die 'sticky' menubar, daar bovenaan mijn blog: Iets waar ik heel veel vragen over krijg! Hoe voeg je zo'n menubar toe? In dit artikel, de HTML-cursus deel 2, ga ik uitleggen hoe. Op het vorige deel kreeg ik positieve reacties, dus nu weet ik zeker dat ik ermee door ga. Ik word er blij van als ik anderen kan helpen. Laten we beginnen met de tutorial voor de menubar. Let op: de HTML-cursus is alleen voor Blogger-gebruikers. Klik op 'lees verder'!

Het toevoegen van een menubar die bovenaan blijft tijdens het scrollen, en een 'drop-down' functie heeft!

Hoe werkt dit?
In een paar stappen ga ik proberen dit zo goed mogelijk uit te leggen. Ga eerst naar Blogger > Sjabloon > HTML bewerken. Done? Zoek dan deze lijn op (CTRL + F):

</head> 

Nu komt er een erg lange code. Selecteer deze en plak het direct onder </head>.

<style>

#wctopdropcont{
  width:1400px;
  height:35px; (pas deze aan om de hoogte van de menubar te veranderen.)
  display:block;
  padding:0;
  margin:0 0 22px 0;

 z-index:100;
top:0px;
left:0px;
 position:fixed;
    box-shadow:1px 1px 1px  #F0F0F0;
-moz-box-box-shadow:1px 1px 1px  #F0F0F0;
-web-kit-box-shadow:1px 1px 1px  #F0F0F0;
-goog-ms-box-shadow:1px 1px 1px  #F0F0F0; (wil je geen kleine schaduw onder de menubar? Haal dan deze vier box-shadow lijnen weg.)
background:#ffffff; (verander de kleur van je menu-bar door hier een andere kleurcode in te vullen.)
}

#wctopdropnav{
  float:center;
  width:700px;
  height:40px;
  display:block;
  padding:0;
  margin-left:325px; (kies een ander getal om de afstand van je links in de menubar kleiner of groter te maken. Kies je bijvoorbeeld 200, dan zullen de linkjes meer naar links staan. In principe is dit een goede afstand, ze staan nu in het midden.)
}

#wctopdropnav ul{
  float:left;
  margin:0;
  padding:0;

}

#wctopdropnav li{
  float:left;
  list-style:none;
  line-height:35px;
  margin:0;
  padding:0

}

#wctopdropnav li a, #wctopdropnav li a:link{
  color:#666; (de kleurcode voor de letters. Deze kun je ook veranderen. Mocht je zwarte letters willen, zet hier #000 neer.)
  float: center;
  display:block;
  margin:0;
font:14px Georgia; (verander eventueel het lettertype en de grootte van het lettertype in de menubar.)
  padding:7px; (verander de afstand tussen de linkjes.)
  text-decoration:none;
}

#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a  {
  color:#66AAFF; (dit is de kleur van de letters als je met je muis op de link staat. Kun je veranderen, als je wilt.)
  padding:7px; (hier kan het beste hetzelfde cijfer staan als de padding-code hierboven).

}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
  font-size: 13px; (grootte van het lettertype in het dropdown-gedeelte. Wat betekent dropdown? Ga bij mij maar eens met de muis over categories. De categorieën komen tevoorschijn! Dit hoef jij overigens niet te gebruiken, laat deze code dan voor wat het is.)
background:#fff; (achtergrond van het dropdown-gedeelte.)
  color: #888; (kleur van de links in het dropdown-gedeelte).
  width: 70px; (breedte van het dropdown-gedeelte.)
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
}

#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
  color: #CC309A; (de kleur van de link in het dropdown-gedeelte als je er met je muis op gaat staan.)
}

#wctopdropnav li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px
}

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
  left:auto
}

#wctopdropnav li:hover, #wctopdropnav li.sfhover{
  position:static
}
#wctopdropsoc {
  float:right;
  width:220px;
  padding:0px 0px ;
  margin:9px 10px 0px 0px;
   }
#wctopdropsoc img
{
margin-left:5px;
margin-top:-2px;
height:26px;
border:none;
}

</style>

  <div id='wctopdropcont'>
     <div id='wctopdropnav'> (tijd voor de links! Vul hier de links in die je in het menu wilt. De 'home', 'about', etc. kun je ook veranderen naar jouw wens. Haal het dan weg en typ bijvoorbeeld 'over mij'.)
         <ul>
           <li><a href='vul hier een link in'>Home</a></li> 
           <li><a href='vul hier een link in'>About</a></li>    
           
           <li><a href='vul hier een link in'>Contact</a>
         
           </li>
    <li><a href='#'>Categories</a>
              
             <ul>
                  <li><a href='vul hier de link van de categorie in'>Fashion</a></li>
                  <li><a href='vul hier de link van de categorie in'>Lifestyle</a></li>
                  <li><a href='vul hier de link van de categorie in'>Beauty</a></li> (je kunt er uiteraard nog meer toevoegen. Wil je het dropdown-gedeelte niet gebruiken? Verwijder dan simpelweg deze links.)
    
               </ul>
           </li>
           <li><a TARGET='_blank' href='vul hier een link in'>Twitter</a></li>
           <li><a TARGET='_blank' href='vul hier een link in'>Bloglovin'</a></li>
           <li><a TARGET='_blank' href='vul hier een link in'>YouTube</a></li>
           <li><a TARGET='_blank' href='vul hier een link in'>Lookbook</a></li>
           <li><a TARGET='_blank' href='vul hier een link in'>Instagram</a></li>
           <li><a TARGET='_blank' href='vul hier een link in'>Pinterest</a></li> (geen Pinterest? Dan kun je deze lijn gewoon verwijderen. Heb je nog een ander social media account, dan voeg je nog een link toe!)

         </ul>
      </div>

      <div id='wctopdropsoc'>
         
      </div>
   </div>


Belangrijk: lees dit voordat je opslaat. 
De code ingevoegd en alles begrepen? Verwijder dan mijn uitleg tussen de haakjes. Dan pas zal de code werken en zal het er mooi uitzien. Kijk daar dus goed naar. Erg veel werk is het niet om het weg te halen, en ik wilde toch bij de codes even toelichten omdat velen het anders niet zouden begrijpen. Hierna kun je de template opslaan. 

Hehe, dat was het. Ik kan begrijpen dat het ingewikkeld is voor mensen die net met HTML beginnen, maar na een tijdje proberen komt het vast wel goed! Kom je er echt niet uit, dan mag je een reactie achter laten met wat er niet lukt.
Is het wel gelukt, dan hoor ik dat natuurlijk ook graag! Met de vorige tutorial heb ik een aantal mensen kunnen helpen, heel leuk om te zien! Deze menubar was moeilijker uit te leggen, maar het is toch gelukt. Ik heb nu ook een aparte pagina gemaakt waar alle tutorials op komen te staan. Succes iedereen! Enn: experimenteer een beetje met de code, dat levert weer originele resultaten op, zodat je echt een mooie menubar krijgt die past bij je blog. Experimenteer met kleuren, bijvoorbeeld. Liefs, Luna.