Sleep de widget Navigatiebalk naar een basismodel (Master Page) en koppel dat basismodel daarna aan uw pagina's. Het menu bouwt zichzelf op uit de lijst met pagina's aan de linkerkant, dus wanneer u een pagina toevoegt, verschijnt die in het menu op elke pagina.
Welke versie gebruikt u? EverWeb 4.6 heeft een nieuwe Navigatiebalk met nieuwe instellingen, die hieronder worden beschreven. Een menu dat vóór 4.6 is toegevoegd, houdt zijn oude instellingen (de onderdelen over EverWeb 4.5 hieronder), ook als u het project in 4.6 opent. Om een oud menu over te zetten naar de nieuwe instellingen, verwijdert u het, sleept u een nieuwe Navigatiebalk naar het basismodel en geeft u die opnieuw een stijl.
Het menu aan elke pagina toevoegen
- Maak een basismodel (een ontwerp dat door veel pagina's wordt gedeeld) als u er nog geen heeft: klik op Nieuw Basismodel. Zie Dezelfde koptekst, hetzelfde menu en dezelfde voettekst op elke pagina met een basismodel.
- Selecteer het basismodel en voeg het menu toe:
- Navigatiebalk: open het tabblad Widgets rechtsboven en sleep de widget Navigatiebalk naar de pagina. Op een pagina met vaste breedte (Gecentreerd) plaatst u hem in de koptekst (Header). Op een responsieve pagina plaatst u hem bovenaan.
- Navigatiecontainer (EverWeb 4.6 en later): klik op Containers in de knoppenbalk en kies Navigatiecontainer. Deze bevat een Navigatiebalk plus ruimte voor uw logo, en is geschikt voor responsieve pagina's.
- Selecteer een van uw pagina's, ga naar Details > Pagina instellingen en kies uw basismodel in het keuzemenu Hoofd Sjabloon. Doe dit voor elke pagina.
- Publiceer uw website.
Wijzig het menu vanaf nu alleen op het basismodel. Op uw andere pagina's toont het menu een klein zwart paginapictogram in de hoek. Als u daarop klikt, kunt u naar het basismodel gaan.
Kiezen welke pagina's in het menu staan
- Volgorde (Order): het menu volgt de volgorde van de lijst met pagina's, van boven naar beneden. Sleep pagina's omhoog of omlaag om de volgorde te wijzigen.
- Een pagina weglaten: selecteer de pagina, ga naar Details > Pagina instellingen en zet het vinkje bij Toevoegen aan navigatie menu uit. De pagina blijft op uw website staan en u kunt er nog steeds naar linken.
- De tekst wijzigen: typ de tekst bij Naam in de menubalk op hetzelfde tabblad. Gebruik dit voor spaties, accenten en symbolen, die niet in de Bestandsnaam van een pagina kunnen staan.
EverWeb 4.6 en later: eigen menu-items toevoegen. Selecteer de Navigatiebalk, ga naar Details > Widget instellingen en open Extra menulinks. Klik op Toevoegen, dubbelklik op de naam om de tekst te wijzigen en stel daarna de link in: een onderdeel van een pagina, een pagina of een andere website. Vink Pagina's van mijn site verbergen aan als u wilt dat het menu alleen de links in deze lijst toont. Een nieuwe pagina verschijnt dan pas in het menu als u die daar toevoegt.
Het menu staat op elke pagina, dus als u het wijzigt, moet EverWeb elke pagina opnieuw publiceren. Uw volgende publicatie duurt daardoor langer dan normaal.
Keuzemenu's (drop-downmenu's)
Plaats pagina's in een map (een pagina die andere pagina's bevat, zoals een map op uw computer). Klik op Map toevoegen in de knoppenbalk en sleep pagina's een stukje onder en rechts van de map. De map wordt een menu-item en de pagina's erin verschijnen in een keuzemenu eronder. Zie Kan EverWeb uitklapmenu's maken?.
In EverWeb 4.6 en later toont het menu maximaal twee niveaus van keuzemenu's: plaats een map in een map voor het tweede niveau, zodat het menu in totaal drie niveaus heeft. EverWeb 4.5 toont één niveau. Onder Keuzemenu's in Widget instellingen bepaalt Mapindicator het kleine symbool naast items die een keuzemenu openen (Punthaak, Driehoek, Plus of Geen), en bepaalt Stijl van keuzemenu-item de knopstijl voor de items in het keuzemenu.
Het uiterlijk wijzigen
EverWeb 4.6 en later: Stijl van menu-item
De menu-items krijgen hun uiterlijk (vulling, tekstkleuren, opvulling en uiterlijk bij aanwijzen) van een knopstijl. Uw project heeft er een die hiervoor is gemaakt, met de naam Navigation Button (navigatieknop).
- Selecteer de Navigatiebalk en ga naar Details > Widget instellingen.
- Open Menu-items en kies een knopstijl bij Stijl van menu-item. Ernaast verschijnt een klein voorbeeld en het menu op de pagina wordt bijgewerkt.
- Om het uiterlijk van die stijl te wijzigen, kiest u Knopstijlen bewerken… onderaan hetzelfde menu (of gebruikt u Opmaak > Websitestijlen en klikt u op Knopstijlen). Stel het uiterlijk in voor Normaal, Aanwijzen, Ingedrukt en Toetsenbordfocus en klik daarna op Bewaren. Elk menu en elke knop die de stijl gebruikt, verandert mee.
Alle stappen voor knopstijlen vindt u in Knoppen ontwerpen die er klikbaar uitzien: kleuren, afgeronde hoeken, schaduwen en aanwijseffecten.
Goed om te weten:
- Geen bij Stijl van menu-item maakt van de items gewone tekstlinks. Hun kleuren komen dan uit Details > Hyperlinks.
- De achtergrond van de balk staat los van de items. De Vulling, Rand en opvulling in Details > Vorm opties en Formaten bepalen de strook achter de items, niet de items zelf.
- Minimale itemhoogte bepaalt hoe hoog elk item is (0 maakt het zo hoog als de tekst plus opvulling). Ongeveer 44 pixels of meer is prettig om op een telefoon op te tikken.
- Indeling bevat Gelijke knopbreedtes, Ruimte tussen items en Uitlijning (Links, Centreren, Rechts of Uitvullen).
- Lettertypen in de knoppenbalk wijzigt de tekst van de items, en effecten bij Muisovergangen en animaties in Vorm opties worden op elk item toegepast.
- Zonder Navigatiecontainer kan Merk in Widget instellingen uw logo in de balk tonen. Geef het een Alt-tekst logo, zoals de naam van uw bedrijf.
EverWeb 4.5 (en menu's die vóór 4.6 zijn toegevoegd)
Met de Navigatiebalk geselecteerd: tekstkleuren en onderstreping vindt u in Details > Hyperlinks onder Hyperlink instellingen; het vak achter elk item in Vorm opties; uitlijning, ruimte en kleuren van keuzemenu's in Widget instellingen; het lettertype onder Lettertypen in de knoppenbalk.
Het menu op telefoons
EverWeb 4.6 en later
- Selecteer de Navigatiebalk op uw basismodel en ga naar Details > Widget instellingen.
- Kies onder Indeling wat er gebeurt bij Bij beperkte ruimte:
- Omloop: de items worden over meer rijen verdeeld.
- Hamburger when needed (hamburger indien nodig): het menu wordt een menuknop zodra de items niet meer passen.
- Hamburger at breakpoint (hamburger bij breakpoint): het menu wordt een menuknop onder de breedte die u invult bij Breakpointbreedte (px) (800, tenzij u dit wijzigt).
- Geef de knop een stijl onder Mobiel hamburgermenu: de Knopstijl, het Label menuknop (bijvoorbeeld Menu), het Menupictogram (Three Lines, Two Lines, Dots of No Icon: drie lijnen, twee lijnen, stippen of geen pictogram) en Als menu open is.
- Kies onder Uiterlijk hamburgermenu of het geopende menu over de pagina heen valt of de pagina omlaag duwt (Weergave), en stel de Achtergrond menupaneel in. Mobiele animatie en gedrag bepaalt het Openingseffect en of het menu sluit nadat een bezoeker een pagina kiest.
- Bekijk het voorbeeld en maak het EverWeb-venster smaller om het te testen.
EverWeb 4.5 (en menu's die vóór 4.6 zijn toegevoegd)
- Selecteer de Navigatiebalk op uw basismodel.
- Ga naar Details > Widget instellingen en scrol naar Responsieve opties.
- Vink Responsieve navigatiebalk aan.
- Stel Verschijnt bij breedte in. Op schermen die smaller zijn dan deze breedte (700 pixels, tenzij u dit wijzigt) wordt het menu een knop met drie lijnen (een "hamburger") die het menu opent. Geef de knop een stijl onder Hamburgerknop.
- Bekijk het voorbeeld en maak het EverWeb-venster smaller om het te testen.
Als uw menu over twee regels loopt voordat het overschakelt, verhoog dan de breedte. Als de knop ook op computers verschijnt, is het getal te hoog ingesteld. Dit werkt op pagina's met Gecentreerd en Responsief. Als u aparte mobiele pagina's gebruikt, zie dan Mijn website ziet er op een telefoon verkeerd uit: zo werkt mobiel in EverWeb.
Veelgestelde vragen
- Een link naar een andere website in het menu: in EverWeb 4.6 en later voegt u die toe onder Extra menulinks (zie hierboven). Voor 4.5, zie Een link naar een andere website in het navigatiemenu van EverWeb zetten.
- Menu-items die naar onderdelen van één lange pagina springen: gebruik in EverWeb 4.6 en later Extra menulinks en koppel elk item aan een onderdeel van de pagina. In 4.5 kan de Navigatiebalk dit niet: bouw dat menu op uit knoppen of tekst en geef elk onderdeel een link. Zie Linken naar een andere pagina, een website, een e-mailadres, een telefoonnummer, een pdf of een onderdeel van een pagina.
- De menu-items veranderen niet als u hun kleuren instelt in Hyperlinks (4.6): de items gebruiken een knopstijl. Wijzig de stijl, of kies Geen bij Stijl van menu-item om de kleuren uit Hyperlinks te gebruiken.
- De hele balk heeft één kleur gekregen (4.6): de eigen Vulling van de balk is ingesteld in Vorm opties. Zet de vulling van de balk uit als u alleen de items wilt kleuren.
- Een menu-item dat niet werkt: controleer of het deel uitmaakt van de Navigatiebalk en geen los tekstvak is dat erbovenop is geplaatst.
Gerelateerde artikelen
- Dezelfde koptekst, hetzelfde menu en dezelfde voettekst op elke pagina met een basismodel
- Knoppen ontwerpen die er klikbaar uitzien: kleuren, afgeronde hoeken, schaduwen en aanwijseffecten
- Kan EverWeb uitklapmenu's maken?
- Een link naar een andere website in het navigatiemenu van EverWeb zetten
- Mijn website ziet er op een telefoon verkeerd uit: zo werkt mobiel in EverWeb