Menu balk

We gaan nu een menu balk maken om van de ene pagina naar de andere pagina te kunnen navigeren. Uiteraard komt onze balk op elke pagina. Zodat we ook weer terug kunnen.

Ons menu komt er uit te zien als onderstaande afbeelding

menu

Om onze HTML code overzichtelijk te houden gebruiken we voor het navigatie menu de nav-tag.
Dan is alleen maar om je HTML code leesbaar te houden. Je zou hier ook bijvoorbeeld een div-tag kunnen gebruiken.

<nav>
    <div class="nav-left">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
    <div class="nav-right">
        <div>Ingelogd</div>
    </div>
</nav>

Het menu bestaat uit twee delen. Het linker deel (nav-left) en het rechter deel (nav-right).

Elke link die stuurt je naar # dat is een link naar de huidige site. Uiteraard komen hier ipv de # bijvoorbeeld about.html of'contact.html te staan.

De opmaak van het menu is iets ingewikkelder. We starten met de opmaak van de nav

nav { /* het hoofdblok vult de hele ruimte op */
    display: flex;
    justify-content: space-between;
    padding: 5px;
    background-color: lightgray;
    font-size: 1.5rem; /* grootte van letters */
    font-weight: bold;
}

Je ziet dat gekozen is voor display: flex; en justify-content: space-between; hierdoor komt de linker en rechterkant van het menu op de juiste plaats.

Uiteraard willen we onze body zonder margin (witte rand om ons menu) dus als je body dit nog niet heeft voeg dit dan toe

body {
    margin: 0;
}

Nu gaan we het linker menu opmaken

.nav-left { /* dit links uitlijnen */
    display: flex;
    justify-content: flex-start;
    gap: 10px; /* ruimte tussen de links */
}

Omdat ons rechter menu maar één item heeft is de  gap: 10px; niet nodig

.nav-right { /* dit rechts uitlijnen */
    display: flex;
    justify-content: flex-end;
}

Nu gaan we de links zelf wat opmaak geven

a {
    text-decoration: none;
}
a:hover {
    color: white;
}
nav > div > a { /* de a in de div in de nav (bv link 1)*/
    padding: 5px;
    color: black;
}

Zie paragraaf links voor meer uitleg over het link element <a>.

Nu moeten we de div aan de rechterkan ook opmaak geven. Als dit ook een link was geweest, dan was dat niet nodig geweest.

nav > div > div {
    background-color: gray;
    border-radius: 3px;
    padding: 3px;
    color: beige;
}

 

En klaar is ons menu.