HTML-cursus #2: Top menubar toevoegen

donderdag 16 januari 2014 |




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.

50 opmerkingen:

Je kunt reageren met je Google- of Wordpress account, naam (en optioneel: website), of anoniem. Dankjewel voor je reactie! ♥

  1. Super dat je dit soort instructies schrijft! Ik weet nog toen ik zelf een aparte menubalk wilde met dropdown, dat ik hiervoor echt heel lang heb moeten googelen. Uiteindeiljk is het me gelukt, maar erg goed dat jij dit aan anderen toelicht :)

    Leuk bericht!

    Liefs Carlijn

    BeantwoordenVerwijderen
  2. Echt superhandig en heel fijn dat je erbij zet wat alles is! Echt lief dat je dit doet! Ik ga het even proberen! xxx

    BeantwoordenVerwijderen
  3. super handig! bij mij werkt hij!

    BeantwoordenVerwijderen
  4. Thanks voor de tips weer Luna! Ik vind deze artikelen zo handig en ik steek er altijd heel veel van op. Dit is tenminste heel handig en simpel uitgelegd, als ik vaak kijk of zoek op sites hoe iets zit, dan kan ik het vaak heel moeilijk opgezocht krijgen in de html, of is het in hele lastige html-termen uitgelegd, waar ik op dit moment nog niet zo supergoed mee om kan gaan haha! Kleuren aanpassen gaat nog wel, lettertypes, prima.. Maar dit soort dingen zijn toch een stukje moeilijker, maar altijd wel een uitdaging om mee te puzzelen!

    BeantwoordenVerwijderen
  5. Handig! Ik heb wel een vraagje: ik heb mijn menu onder de header, dus wat je gewoon kunt instellen op Blogger, maar weet je toevallig hoe je die in het midden kunt krijgen? :)

    BeantwoordenVerwijderen
    Reacties
    1. Geen idee of het zou lukken, maar misschien kun je dit in je CSS zetten? Ik weet het niet precies, anders even surfen op internet.

      #nav {
      text-align:center;
      }

      Verwijderen
  6. Ga het straks even uitproberen! Heel handig!

    BeantwoordenVerwijderen
  7. Heel handig artikel, ik heb het geprobeerd. Maar hij doet niet. Ik snap niet precies wat je nou weg mag halen met die categorieën want dat wil ik niet :)

    BeantwoordenVerwijderen
    Reacties
    1. Zou je misschien ook de code kunnen laten zien zonder de categorieën? Want het lukt me echt niet haha.

      Verwijderen
    2. Je moet mijn opmerkingen tussen de haakjes (....) weghalen!

      Verwijderen
  8. Echt super handig Luna!! Echt fijn dat je deze cursus doet!!
    Thankyouuxx
    Xxx Sarah

    BeantwoordenVerwijderen
  9. Ik vind dat je 'm heel fijn en duidelijk hebt uitgelegd hoor, heel handig! :D

    BeantwoordenVerwijderen
  10. Oh luun wat handig!
    Ik ga het misschien in de toekomst eens proberen, voor nu laat ik het erbij hoe Quinty het heeft gemaakt:)!

    BeantwoordenVerwijderen
  11. Ik heb ook alles tussen de haakjes weggehaald. Maar er komt als laatste een fout bij mij in de html, de aller laatste regel. Maar goed, als nog bedankt :)

    BeantwoordenVerwijderen
    Reacties
    1. Wat raar.. Sorry, ik zou niet weten hoe dit komt!

      Verwijderen
    2. Dat heb ik ook, hij zegt dat bij de aller laatste regel van de hele html tag vind hij de sluiting tag van de html fout! Ik krijg deze foutmelding: Fout bij parseren van XML, regel 2447, kolom 10: The element type "li" must be terminated by the matching end-tag. Ik heb al veel geprobeerd maar ik krijg hem maar niet goed!

      Verwijderen
    3. <b:section-contents id='footer-2-/></html> Keurt hij fout

      Verwijderen
  12. Het is me gelukt, heel erg bedankt! Dit is zo handig :)

    BeantwoordenVerwijderen
  13. Superleuk en handig Luna! Ik had hem al eens eerder gebruikt alleen mistte enorm de knoppen onder mijn blognaam in mijn eigen header, hihi. Het voelde een beetje kaal dus ik heb de balk weer weggehaald :) Lief dat je weer zo'n handige tutorial met ons deelt!
    liefs

    BeantwoordenVerwijderen
  14. leuk en handig voor andere bloggers! Now following!

    BeantwoordenVerwijderen
  15. Handig ! misschien ga ik het proberen:)

    BeantwoordenVerwijderen
  16. Luna, je bent een held! Dankjewel! :-D Ik ben er druk mee bezig, maar de basis is er al! ;-)

    BeantwoordenVerwijderen
  17. Daar ben ik weer haha, het is me toch gelukt :D Heel erg bedankt :)

    BeantwoordenVerwijderen
    Reacties
    1. dat heb ik ook maar ik weet niet hoe ik het kan oplossen ik zou het fijn vinden als je me zou willen helpen

      Verwijderen
    2. Suze wil je mij laten zien hoe je dat hebt gedaan?

      Verwijderen
  18. Ik hou echt van deze HTLM-cursussen!

    BeantwoordenVerwijderen
  19. hi luna,

    ik heb je back to top nu gefixt (eigenlijk heel makkelijk) en wilde nu de menubar doen maar dan zecht mijn computer dit:
    Fout bij parseren van XML, regel 774, kolom 3: The element type "li" must be terminated by the matching end-tag "".
    weet jij hoe ik hier iets aan kan doen op die regel staat gewoon < /div >
    je blog is heel gaafxx

    BeantwoordenVerwijderen
  20. Wat ontzettend handig, hopelijk volgen er nog meer. Is er ook een code waardoor je lijnen tussen de about/info e.d. pagina's kunt zetten?
    En ik zie dat jij het comment vakje boven de comments heb i.p.v. eronder. Misschien ook leuk om uit te leggen?
    Liefs

    BeantwoordenVerwijderen
  21. Het lukt bij mij niet :$ ik krijg een melding dat ik een code niet mag gebruiken of dat "div" er niet in mag, kun je me asjeblieft helpen??? Ik wil namelijk al heel erg lang een top menu :) ♥

    BeantwoordenVerwijderen
    Reacties
    1. Check nog even of het echt niet werkt, kijk nog even goed na of je precies de stappen hebt gevolgd en geen dingen hebt weggelaten/erbij gezet.. Probeer anders deze 'div' waar het om gaat weg te halen?

      Verwijderen
  22. Hij doet het niet goe bij mij, Luna. Weet jij hoe dat kan want hij zegt: Fout bij parseren van XML, regel 762, kolom 24: Open quote is expected for attribute "href" associated with an element type "a". Ik heb geen enkel idee wat ik dan moet doen!

    BeantwoordenVerwijderen
  23. Ik snap er niets van als ik het probeer op te slaan dan zeg die dat het niet kan ofzo en als ik het voorbeeld wil bekijken krijg ik ernaast de tekst in plaats van bovenaan.

    Liefs,nadia

    BeantwoordenVerwijderen
  24. Echt super handig! Hoe maak je eigenlijk die social media icons in de menubar? X

    BeantwoordenVerwijderen
  25. Ik had het eerder al een keertje geprobeerd en het lukte me niet..
    Maar het is me nu gelukt en ik ben er super blij mee, Dankjewel!!
    Liefs Luna

    BeantwoordenVerwijderen
  26. Jammer hij werkt niet... :( Nou ja, de anderen werken wel ;)

    (www.janne4you.blogspot.com)

    BeantwoordenVerwijderen
  27. Echt hele handige blogpost! Bedankt dat je dit deelt :)

    BeantwoordenVerwijderen
  28. Hoi Luna!

    Alles werkt, heel fijn! Ik heb nu alleen wel dat als mijn blog naar beneden scrolt, de menubar meescrollt.. Weet jij waar dit aan ligt en hoe ik dit weg krijg??

    Liefs Emmy,

    BeantwoordenVerwijderen
    Reacties
    1. Jup, dat zit ook in deze menu bar. Staat ook in het artikel. Ik weet het niet zeker, maar misschien verandert het als je "position:fixed;" weghaalt?

      Verwijderen
    2. Jaa dat zag ik later haha .. alleen vroeg me af of het ook weg kon! Ik ga het eens proberen thankyouu

      Verwijderen
  29. Echt super handig maar hij doet het niet bij mijn blog. Hij geeft foutmeldingen en als ik dat allemaal weg heb gehaald doet hij het nog steeds niet....

    BeantwoordenVerwijderen
  30. Weet niet of ik het al eens gezegd heb, maar dit is zo handig! Ik heb 'm gebruikt en als ik wat wil aanpassen kom ik altijd terug op je blog haha. Ga je meer "HTML cursussen" doen?

    BeantwoordenVerwijderen
  31. Hi luna,
    Wat een handige html cursus! Wat me alleen opviel, is dat de tekst in de menubalk in safari meer naar rechts verschuift. Weet jij hoe ik dit kan oplossen?

    BeantwoordenVerwijderen
  32. ik snap het eigenlijk nog niet goed :/

    BeantwoordenVerwijderen
  33. dank je luna, ik heb heel wat van je geleerd...

    BeantwoordenVerwijderen
  34. Thanks, ik heb het gebruikt, super handig! :D

    BeantwoordenVerwijderen
  35. Bij mij komt die menubar boven de header maar ik wil het graag eronder.
    Hoe kan ik dat veranderen? In HTML ofzo?

    BeantwoordenVerwijderen
  36. Hoi luna,

    Super handig , bedankt ! Nu heb ik alleen nog een vraagje, want hoe maak ik een link voor contact en about op blogger?

    Blog: mijnliefdevoor.blogspot.com

    BeantwoordenVerwijderen
  37. bij mij doe hij het niet er staat Fout bij parseren van XML, regel 754, kolom 24: Open quote is expected for attribute "{1}" associated with an element type "href

    BeantwoordenVerwijderen