nl pt nl nl nl en nl nl en nl en nl es nl nl nl nl nl nl en nl nl ar nl nl nl en nl nl ar nl nl nl nl nl es nl nl nl nl en ar nl nl en nl nl nl
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!
Om de stylesheet met het HTML bestand te linken gebruiken we deze code:
Dit stukje code zet je in je head tag, dus dan komt het er zo uit te zien:
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.
Wanneer dit werkt, kun je dit zo laten of de kleur wijzigen.
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:
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:
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:
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:
Over ons   // In het HTML bestand
.menu .menuitem2 { padding: 11px; float: left; width: auto; margin-left: 5px; background-color: #575757; } .menu .menuitem2:hover { background-color: #62D941; }
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!
Duidelijk en netjes geschreven, voor een beginner zonder veel kennis maakt dit het allemaal toch wat duidelijker.
Ga zo door met je tutorials!
EDIT: Kom er nu pas achter dat deze daadwerkelijk uit het archief komt en de gebruiker niet Archief is haha.. handige tutorial verder! Ben benieuwd naar de rest wat nog kan komen.