Een navigatiemenu maken in Dreamweaver (stap voor stap)

Een duidelijk navigatiemenu is het stuur van je website: bezoekers gebruiken het om te vinden wat ze zoeken en zoekmachines volgen de links om je pagina’s te ontdekken. Wil je een menu maken in Dreamweaver, dan heb je eigenlijk maar twee bouwstenen nodig: een stukje nette HTML en een paar CSS-regels. Dreamweaver helpt je met beide, zowel via menu’s en panelen als in de codeweergave. Reken op ongeveer een halfuur werk.

In deze handleiding bouwen we stap voor stap een horizontaal menu dat op mobiel inklapt tot een menuknop. We kijken ook naar de snelle route met Bootstrap en naar manieren om je menu op alle pagina’s gelijk te houden.

De juiste HTML-structuur voor een menu

Een modern menu bestaat uit een <nav>-element met daarin een ongenummerde lijst (<ul>) met links. Die opbouw is geen toeval: schermlezers herkennen <nav> als navigatiegebied en een lijst vertelt hoeveel items er zijn. Tabellen of losse links naast elkaar zijn verouderd en lastig responsive te maken.

Het attribuut aria-current="page" markeert de pagina waar de bezoeker nu is. Handig voor schermlezers én als haakje om het actieve item in CSS op te laten vallen. Meer achtergrond over het element vind je in de MDN-documentatie over nav.

Het menu invoegen in Dreamweaver

Je kunt de code hierboven gewoon in de codeweergave typen of plakken, maar Dreamweaver kan ook een deel voor je doen:

1. Open je pagina en zet de cursor op de plek waar het menu moet komen, meestal binnen de <header>.
2. Kies Invoegen > Navigatie (Insert > Navigation). Dreamweaver plaatst een <nav>-element en vraagt eventueel om een klasse of ID; geef het de klasse hoofdmenu.
3. Typ binnen de nav de lijst met links. In de codeweergave gaat dat het snelst met Emmet: typ ul>li*4>a en druk op Tab.
4. Selecteer een link en vul in het deelvenster Eigenschappen (Properties) bij Koppeling het doelbestand in, of gebruik het mapicoontje om de pagina te kiezen.

Dreamweaver bewaakt die links voor je: hernoem of verplaats je later een pagina via het paneel Bestanden, dan biedt het programma aan alle verwijzingen bij te werken.

Het menu opmaken met CSS

Zonder CSS ziet je menu eruit als een opsomming met bolletjes. Met een handvol regels wordt het een strakke horizontale balk. Zet de stijlen in je externe stylesheet, niet in de pagina zelf, zodat ze op alle pagina’s gelden.

.hoofdmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}
.hoofdmenu a {
  display: block;
  padding: 0.5rem 0;
  color: #1d3557;
  text-decoration: none;
  font-weight: 600;
}
.hoofdmenu a:hover,
.hoofdmenu a:focus-visible,
.hoofdmenu a[aria-current="page"] {
  color: #e63946;
  border-bottom: 2px solid currentColor;
}

De belangrijkste regel is display: flex: daardoor komen de lijstitems naast elkaar te staan, met gap als nette tussenruimte. Je kunt deze regels typen, maar ook aanmaken met de CSS Designer: kies de bron (je stylesheet), voeg de selector .hoofdmenu ul toe en stel bij Lay-out de eigenschappen in. Hoe dat paneel werkt, lees je in ons artikel over de CSS Designer in Dreamweaver.

Een mobiel menu met menuknop

Op een smal scherm passen vier of vijf links vaak niet naast elkaar. De gangbare oplossing is een knop die het menu opent en sluit. Voeg eerst een knop toe boven de lijst en geef de lijst een ID:

Verberg de knop op grote schermen en de lijst op kleine schermen, tenzij die de klasse open heeft:

.menuknop { display: none; }

@media (max-width: 700px) {
  .menuknop { display: block; }
  .hoofdmenu ul { display: none; flex-direction: column; gap: 0; }
  .hoofdmenu ul.open { display: flex; }
}

Tot slot een paar regels JavaScript die de klasse wisselen en aria-expanded bijwerken, zodat ook hulpsoftware weet of het menu open is. Zet dit in een eigen .js-bestand en koppel het onderaan je pagina:

const knop = document.querySelector('.menuknop');
const lijst = document.getElementById('menulijst');
knop.addEventListener('click', () => {
  const open = lijst.classList.toggle('open');
  knop.setAttribute('aria-expanded', open);
});

Test het resultaat in de Live-weergave door het venster smaller te maken, of open de pagina via het realtime browservoorbeeld op je telefoon. Een hamburgericoon in plaats van het woord Menu kan natuurlijk ook, maar laat dan een verborgen tekstlabel staan voor schermlezers.

Sneller: de Bootstrap-navbar

Werk je met Bootstrap, dan hoef je dit niet zelf te bouwen. Via Invoegen > Bootstrap-componenten > Navbar plaatst Dreamweaver een complete navigatiebalk met merknaam, links en een ingebouwde mobiele menuknop. Je past daarna alleen de teksten, links en kleuren aan. Dreamweaver ondersteunt standaard Bootstrap 5.3.x, en daarnaast 4.4.1 en 3.4.1 voor oudere projecten.

Het voordeel is snelheid; het nadeel is dat je de Bootstrap-bestanden meelaadt en dat de opmaak meer klassen bevat dan strikt nodig. Gebruik je Bootstrap al voor je hele site, dan is de navbar een logische keuze. Hoe je zo’n site opzet, lees je in een responsive website bouwen met Bootstrap.

Eén menu voor alle pagina’s

Een menu dat je op tien pagina’s handmatig kopieert, loopt vroeg of laat uit de pas. Dreamweaver biedt een paar manieren om dat te voorkomen:

• Sjablonen (.dwt): zet het menu in het vaste deel van een sjabloon. Pas je het sjabloon aan, dan werkt Dreamweaver alle pagina’s bij. Zie sjablonen in Dreamweaver.
• PHP-include: draait je site op PHP, zet het menu dan in een apart bestand en laad het met include. Dan staat het menu op één plek, ook op de server.
• Zoeken en vervangen: voor kleine, statische sites kun je een gewijzigde link sitebreed aanpassen, al is dat foutgevoeliger.

Het actieve item markeren met aria-current moet je per pagina regelen. In een sjabloon kun je daarvoor een bewerkbaar kenmerk of een klein stukje JavaScript gebruiken dat de huidige URL vergelijkt met de links.

Controleren en afronden

Loop voor je publiceert deze punten na:

• Werken alle links, ook als de site in een submap op de server staat?
• Is het menu met alleen het toetsenbord te bedienen?
• Is het contrast tussen tekst en achtergrond voldoende?
• Klapt het menu op een smal scherm netjes in en blijft niets buiten beeld?
• Zijn de linkteksten kort en duidelijk, zonder vage termen als “Klik hier”?

Kort samengevat: een goed menu maken in Dreamweaver komt neer op drie stappen: een semantische <nav> met een lijst, CSS met flexbox voor de opmaak en een eenvoudige knop voor mobiel. Dreamweaver helpt je met het invoegen, het beheren van links en de CSS Designer, en met de Bootstrap-navbar heb je in één klik een kant-en-klaar alternatief. Houd het menu daarna centraal via een sjabloon of include, dan blijft je navigatie op elke pagina gelijk.

Veelgestelde vragen