Goedendag,

Ik, Cor, kwam op het idee om een tutorial te maken over hoe je nou een menu maakt. Zoals je weet zijn er simpele en meer geavanceerdere menu's. Vandaag wil ik een simpel, maar toch leuk menu met jullie maken. Deze tutorial is bedoelt voor mensen die net beginnen of net begonnen zijn met het leren van HTML en CSS. Enjoy!

First things first.
Om de stylesheet met het HTML bestand te linken gebruiken we deze code:

<link href="STYLESHEETBESTAND" rel="stylesheet" type="text/css" /> <!-- Deze code kun je niet gebruiken om JavaScript in te voegen (includen)! Alleen CSS dus. -->

Dit stukje code zet je in je head tag, dus dan komt het er zo uit te zien:

<!doctype html>
<html>
  <head>
    <title>Tutorial</title>
    <link href="STYLESHEETBESTAND" rel="stylesheet" type="text/css" />
  </head>
<body>
    
</body>
</html>

Je mag dit bestand zo noemen hoe je wil. Bij STYLESHEETBESTAND moet natuurlijk je stylesheet bestand (beetje logisch). Om het overzichtelijk te maken, maken we een een mapje genaamd css aan in de map van je webserver.

Nu maak je een nieuw bestand en slaat deze op als style.css in de map css. Natuurlijk moet je nu je STYLESHEETBESTAND even aanpassen naar: /css/style.css. Om te testen of het werkt gebruik ik vaak even de background tag. Maar eerst moet je de body aanspreken, dit is alles wat je op de pagina ziet. Om dit te doen gebruik je gewoon body. Het komt er dus zo uit te zien (met background):

body {
  background-color: #000000; /* Achtergrond kleur is zwart */
}

Wanneer dit werkt, kun je dit zo laten of de kleur wijzigen.

Het echte werk
Nu gaan we beginnen met het echte coderen en het creëren van ons menu. Je hebt twee aanspreek mogelijkheden (div's) om je code aan te spreken in de stylesheet (css). Dit zijn 'id' (#) en 'class' (.). Wij gaan nu onze div creëren, meestal gebruik ik een 'class', dus dat doe ik nu ook. Het komt er zo uit te zien:

<div class="menu">
   
</div>

De tekst "menu" is de naam van de div. Als je nu op je website F5 zou drukken zie je nog geen verschil, dit komt omdat je eigenlijk nog niks gedaan hebt. Nu gaan we het menu 'zichtbaar' maken, hij is er nu wel, maar je ziet hem niet. Omdat we div class hebben gebruikt met de naam menu, gaan we dat nu ook in de css doen.

Zoals ik zei is de class een punt (.). Hiermee spreek je hem aan. Je zou dan dit krijgen:

.menu {
   
}

Als eerst gaan we hem een achtergrond kleur geven, persoonlijk vind ik de kleur: #454545 wel mooi, dit is een zwarte kleur. Ook geven we hem een breedte(=width) en een hoogte(=height) en voor de zekerheid geven we hem een float left, zodat hij altijd links staan, dit word dan:

.header {
  width: 100%; /* De breedte van het menu, deze is 100% dus je hele website. */
  height: 40px; /* De hoogte van het menu, deze is 40 px(=pixels) hoog. */
  background-color: #454545; /* Dit is ongeveer een zwarte kleur. */
  float: left; /* Nu staat hij altijd links. */
}

Nu heb je eigenlijk het menu al klaar, maar je hebt er nog geen links in. Dit gaan we nu doen. Als je de basis-HTML kent, weet je dat dit met een 'a href' tag gaan. Het wordt dan dus dit:

<div class="menu">
  <a href=""><div class="menuitem1">Home</div></a>
  <!-- We geven hem meteen een div mee zodat we hem kunnen aanspreken en kunnen positioneren. Tussen de "" in de a href tag, moet de link komen, ik doe daar nu niks! -->
</div>

Je krijgt nu een link die er niet mooi uitziet en niet goed in het menu staat. Dit gaan we in de css aanpassen.

Een link spreken we altijd aan met een a in de css. Omdat we niet willen dat alle links op de website zo worden gaan we hem iets beter aanroepen, de link zit namelijk in het menu div, dan wordt het dus:

.menu a {

}

Om de streep weg te halen gebruiken we text-decoration: none;. De kleur passen we aan met 'color: [KLEUR]'. Om het lettertype te veranderen doen we 'font-family: [LETTERTYPE]'. Dan wordt het dus zo:

.menu a {
  text-decoration: none; /* Zorgt ervoor dat hij geen streep heeft */
  color: #FFFFFF; /* De kleur van de link, in dit geval wit. */
  font-family: Arial; /* Het lettertype */
}

Nu ziet het er al een stuk beter uit, maar hij is nog niet gepositioneerd. Dit kun je op meerdere manieren doen (margin, padding etc). In dit geval ga ik padding gebruiken. Ook gaan we hem een 'float: left;' geven en een breedte. We gaan nu de link div aanspreken, deze hebben we "menuitem1" genoemd. Het wordt dus zo:

.menu .menuitem1 {
  padding: 11px; /* Wanneer je een hoger/groter menu hebt, moet je hier een beetje mee spelen! Dit zorgt er overigens 
  voor dat hij zoveel pixels van de kant staat. */
  float: left; /* Zorgt ervoor dat hij links staat */
  width: auto; /* Deze doen we op auto, wanneer de tekst (link) langer is, wordt hij automatisch aangepast */
}

Ook kun je het menu-item een kleurtje geven zodat je het er iets leuker uitziet. Dit doe je simpel door: 'background-color: [KLEUR];' er aan toe te voegen. Dat wordt dus zo:

.menu .menuitem1 {
  padding: 11px;
  float: left;
  width: auto;
  background-color: #575757; /* De achtergrond kleur */
}

Nu voegen we er nog een 'hover' aan toe, wanneer iemand er met de muis overheen gaat, veranderd hij van kleur. Dat wordt dan zo:

.menu .menuitem1:hover{
    background-color: #62D941; /* Hover achtergrond kleur */
}

Wanneer je nu een andere link/menuitem wilt toevoegen kopieer je de hele menuitem1 en verander je de 1 naar 2, ook moet je nog even bij de menuitem2 een margin-left: 5px; doen (zodat er ietsje ruimte tussen zit). Ook doe je dit in het HTML bestand, dit komt er dus zo uit te zien:

<a href=""><div class="menuitem2">Over ons</div></a> // In het HTML bestand

CSS:

.menu .menuitem2 {
  padding: 11px;
  float: left;
  width: auto;
  margin-left: 5px;
  background-color: #575757;
}

.menu .menuitem2:hover {
  background-color: #62D941;
}

Afsluiting
Dit was mijn eerste tutorial hier op DevNL, ik hoop dat het nuttig voor jullie was. Volgende keer wil ik een menu maken met een dropmenu. Tips zijn welkom!