Leer hoe u menu's aan uw Adobe Muse-site kunt toevoegen en configureren. Leer hoe u mobiele menu's en rolloverstaten maakt en menulabels bewerkt.

Opmerking:

Adobe Muse voegt geen nieuwe functies meer toe en stopt op donderdag 26 maart 2020 met de ondersteuning. Zie de pagina Einde van levensduur voor Adobe Muse voor meer informatie en assistentie.

Navigatie is een van de belangrijkste aspecten bij het bouwen van een website. Bij het ontwerp van een website is de keuze voor het type en de plaatsing van de sitenavigatie van cruciaal belang. De gebruikerservaring van een website valt of staat met menu's en navigatie.

In Adobe Muse kunt u snel sitenavigatie maken met menuwidgets. Hoewel u koppelingen kunt maken om de pagina's handmatig te koppelen, bieden menuwidgets u een eenvoudige en flexibele manier om
navigatie aan uw site toe te voegen. Net als bij andere widgets sleept u de menuwidget op uw pagina om menu’s toe te voegen. U zult hierbij merken dat de menulabels, die hetzelfde als de paginanaam zijn, automatisch worden ingevuld. Wanneer u de paginanaam in de overzichtsweergave wijzigt, worden de menulabels automatisch bijgewerkt. 

U kunt zowel verticale als horizontale menu's toevoegen. Daarnaast kunt u met Adobe Muse sandwichmenu's en rolloverstaten voor menu-items maken. Lees verder om te zien hoe u dit alles met Adobe Muse kunt doen.

 

Een menuwidget toevoegen

  1. Zorg dat uw stramienpagina is geopend voor bewerking in de ontwerpweergave en open de Widget-bibliotheek. Als deze nog niet is geopend, kiest u Venster > Widget-bibliotheek.

  2. In het deelvenster Widget-bibliotheek klikt u op Menu's om de lijst met menuwidgets uit te vouwen. Afhankelijk van het ontwerp van uw site en waar u het menu wilt plaatsen, selecteert u een van de volgende opties:

    • Horizontaal om een horizontaal menu toe te voegen.
    • Verticaal om een verticaal menu toe te voegen.
    De verticale of horizontale menuwidget in Adobe Muse selecteren
    De verticale of horizontale menuwidget selecteren
  3. Met de tool Selecteren sleept en plaatst u de widget op de gewenste plek in uw lay-out. U kunt bijvoorbeeld een horizontale menuwidget in de kop plaatsen.

    Plaats de widget Menu boven op de achtergrondafbeelding van het bruine lint in de kop.
    Plaats de widget Menu boven op de achtergrondafbeelding van het bruine lint in de kop.

    Het menu toont automatisch de namen van de pagina's die u hebt gemaakt, in dezelfde volgorde waarin deze in het siteoverzicht worden weergegeven. De menulabels worden automatisch aan de pagina's gekoppeld en zijn dynamisch. En als u later besluit de pagina’s te wijzigen of te verplaatsen, dan wordt het menu automatisch bijgewerkt. De koppelingen blijven gewoon werken.

  4. Klik op de kleurkiezer in het deelvenster Beheer en stel de kleur voor het menu in. Vervolgens gebruikt u het veld Tekengrootte om de tekstgrootte voor de tekst in het menu in te stellen.

    Tekengrootte en kleur kiezen
    Stel de kleur en puntgrootte van het lettertype in om de tekstknoppen in de widget Horizontaal menu te regelen.

Nu u de menuwidget aan uw lay-out hebt toegevoegd, kunt u deze widget aan uw eisen aanpassen. U kunt de menu's configureren met het deelvenster Opties.  Het deelvenster Opties is een contextueel deelvenster waarin u wijzigingen toepast om instellingen bij te werken die specifiek zijn voor die widget. Gebruik dit deelvenster om te bepalen hoe widgets zich gedragen en hoe de widgetinhoud wordt weergegeven.

  1. Selecteer de menuwidget en klik op de blauwe pijl in de rechterbovenhoek van de widget. Het systeem geeft het deelvenster Opties weer.

    De menuwidget configureren via het deelvenster Opties
    De menuwidget configureren via het deelvenster Opties
  2. De compositiewidget configureren via het deelvenster Opties U kunt de volgende opties configureren:

    • Type menu: hiermee specificeert u welke pagina's moeten worden opgenomen in de sitenavigatie. Kies Toppagina's om uitsluitend pagina’s van het eerste niveau of bovenliggende pagina's op te nemen. Selecteer Alle pagina's om ook de subpagina's in de navigatie op te nemen. De onderliggende pagina's verschijnen als submenu's. Selecteer Handmatig om handmatig de gewenste pagina's weer te geven in de menuwidget.
    • Richting: hiermee geeft u aan of u het menu horizontaal of verticaal wilt toevoegen. 
    • Samen bewerken: schakel dit selectievakje in als u alle menu-items bij elkaar wilt bijwerken. Dit selectievakje is standaard geselecteerd. Als u dit selectievakje niet inschakelt, worden de configuraties die u kiest alleen toegepast op het geselecteerde menu-item.
    • Itemgrootte: hiermee geeft u aan of de menu-items gelijkmatig moeten worden verdeeld op breedte of op grootte.
    • Pictogram links tonen: dit selectievakje is standaard uitgeschakeld. Selecteer deze optie als u een pictogram in de linkerbovenhoek van elk menu-item wilt toevoegen.
    • Label tonen: dit selectievakje is standaard geselecteerd. Wanneer u dit vakje uitschakelt, worden de menulabels niet langer weergegeven.
    • Pictogram rechts tonen: selecteer Uit als u pictogrammen rechts wilt uitschakelen. Selecteer Aan als u pictogrammen in de rechterhoek van de menu-items wilt configureren. Pictogram rechts is een handige optie wanneer u pijlen wilt toevoegen om aan te geven dat er submenu's voor een menu-item zijn. U kunt ook kiezen voor de optie Alleen submenu's om alleen voor de menu-items die submenu's hebben een pictogram rechts te configureren.
    • Plaatsing onderdelen: hiermee specificeert u het startpunt voor de interne onderdelen van ieder tabblad.
    Menuwidgets configureren via het deelvenster Opties
    Menuwidgets configureren via het deelvenster Opties

Deze procedure laat u zien hoe u de tekstlabels kunt bijwerken die de paginanamen in elk menu-item weergeven. Overweeg een menuwidget Horizontaal die gebruikmaakt van een eenvoudig basisontwerp met eenvoudige tekstlinks. In dit voorbeeld gaat we ervan uit dat voor alle staten hetzelfde lettertype wordt gebruikt.

  1. Dubbelklik en selecteer het menulabel dat u wilt bewerken.

  2. Om de tekst in het menu-item te bewerken, opent u het deelvenster Tekst (Venster > Tekst). Selecteer het label en gebruik het deelvenster Tekst om de tekst op te maken door de benodigde opties te selecteren:

    • Lettertype: selecteer het gewenste lettertype dat u op het menulabel wilt toepassen.
    • Lettertypestijl: selecteer, indien nodig, Cursief of Vet voor het menulabel.
    • Tekengrootte: selecteer de lettergrootte voor het menulabel.
    • Kleur: voer in het vervolgkeuzeveld de hexcode in van de kleur die u wilt toepassen of selecteer de kleur van uw keuze via het pipet.
    Menulabels in menuwidgets bewerken
    Menulabels in menuwidgets bewerken
  3. Gebruik het deelvenster Tekst om de margewaarden voor uw menulabel te configureren. Als u al een hyperlinkstijl hebt die u wilt toepassen op het menulabel, dan selecteert u de stijl in het vervolgkeuzeveld naast abc.

    Om een alineastijl toe te passen, selecteert u de stijl in het vervolgkeuzeveld Alineastijl in het deelvenster Tekst.

  4. Om Vulling en lijn op de menulabels toe te passen, dubbelklikt u op het menulabel om het te selecteren. Vanuit de werkbalk boven aan de pagina selecteert u de vulkleur en de lijnkleur. 

    U kunt vanuit de werkbalk ook de Lijndikte bewerken en de straal van de hoekafronding voor de menulabels inschakelen.

    Vulling- en lijninstellingen toepassen op menulabels
    Vulling- en lijninstellingen toepassen op menulabels

Rolloverstaten maken voor menu-items

  1. Met behulp van de tool Selectie selecteert u het menulabel waarvoor u de rolloverstaat wilt maken. Open het deelvenster Staten. De standaardstaten van de knop zijn al gedefinieerd. Klik op de miniatuur Rollover in het deelvenster Staten om die staat te bewerken.

  2. Terwijl het menulabel nog is geselecteerd, gebruikt u de vulkleurkiezer en kiest u geen vulkleur (transparant) door op het witte kleurstaal met de rode diagonale lijn te klikken.

  3. Klik op het gereedschap Tekst en gebruik de kleurkiezer in het regelpaneel om een gebroken witte kleur voor de rolloverstaat te kiezen.

  4. In het deelvenster Staten selecteert u de staat Muisknop ingedrukt. Terwijl de tool Tekst nog steeds is geselecteerd, stelt u de tekst van Muisknop ingedrukt in op een donkerdere kleur door de kleurstalen te selecteren in de kleurkiezer van het deelvenster Beheer.

  5. In het deelvenster Staten selecteert u de staat Actief. Klik op de koppeling Vulling in het regelpaneel om het menu Vulling te openen.

  6. Klik in het menu Vulling op de kleurkiezer en stel de vulkleur in op Geen. Klik op het mappictogram naast de sectie Afbeelding. Blader in het dialoogvenster Importeren dat verschijnt naar het bestand top-nav-over.png voor de achtergrondafbeelding. Klik op Selecteren om het te selecteren. Het dialoogvenster Importeren wordt automatisch gesloten.

  7. Controleer in het menu Vulling of de optie Aanpassen is ingesteld op Oorspronkelijke grootte. Klik in het gedeelte Positie op de middelste van de negen punten. Hierdoor wordt de vulling van de achtergrondafbeelding weergegeven op een gecentraliseerde positie, zonder vulkleur en behoudt deze het oorspronkelijke formaat. Klik ergens anders om het menu Vulling te sluiten.

    Knopstaten definiëren
    Definieer de actieve staat van het menu-item.

    Aangezien de standaardoptie Samen bewerken in de menuwidget Horizontaal is ingeschakeld, worden alle wijzigingen aan het menulabel automatisch toegepast op alle knoppen op de navigatiebalk.

  8. Kies Bestand > Opslaan om uw werk op te slaan. Klik op de X in het tabblad A-Master om de pagina in de ontwerpweergave te sluiten en terug te gaan naar de overzichtsweergave. U ziet dat alle miniaturen zijn bijgewerkt en de inhoud bevatten die aan de stramienpagina is toegevoegd.

    Opmerking:

    De hulplijnen voor de kop- en voettekstgebieden kunnen alleen in de stramienpagina's van uw site worden bewerkt. Wanneer u de grootte van de kop- of voettekst voor uw pagina's wilt bewerken, dubbelklikt u op de stramienpagina om deze te openen in de ontwerpweergave en de hulplijnen daar te verplaatsen.

Een mobiel menu maken

Adobe Muse biedt u ook de mogelijkheid een sandwichmenu of een mobiel menu te maken. Bij een dergelijk menu wordt er een submenu met vervolgkeuzes weergegeven wanneer u over het hoofdmenu beweegt. Zie Submenu's maken met compositiewidgets om dit type menu te maken.

Pagina's niet in het menu weergeven

Telkens wanneer u een nieuwe pagina op het hoogste niveau voor uw site maakt in de overzichtsweergave, voegt Adobe Muse de pagina automatisch aan het menu toe. Maar het kan gebeuren dat u een pagina wilt testen voordat u hem toegankelijk maakt voor bezoekers, of een specifieke pagina wilt verbergen. In deze gevallen kunt u in Adobe Muse specifieke pagina's niet in de navigatie laten weergeven om ervoor te zorgen dat deze pagina's niet worden opgenomen als menu-items in de menuwidget.

Volg de onderstaande procedure om pagina's niet in de menuwidget weer te geven:

  1. Nadat u een sitemap voor uw site hebt gemaakt, gaat u naar de overzichtsweergave in Adobe Muse. We gaan er bij deze procedure vanuit dat u een sitemap hebt met pagina's bestaande uit Startpagina, Portfolio, Mijn verhaal, Contact en Producten.

    De sitemap in de overzichtsweergave bekijken
    De sitemap in de overzichtsweergave bekijken

    Als u naar de stramienpagina gaat en een menuwidget sleept, dan ziet u dat alle pagina's worden opgenomen als onderdeel van het menu.

  2. Om een specifieke pagina uit te sluiten klikt u in de overzichtsweergave met de rechtermuisknop op de pagina die u wilt uitsluiten. Klik op Menuopties > Pagina's niet in menu's weergeven.

    Als u bijvoorbeeld de pagina Producten wilt uitsluiten, dan klikt u met de rechtermuisknop op Producten. Selecteer vervolgens Menuopties > Pagina's niet in menu's weergeven.

    Specifieke pagina's uitsluiten van menuwidgets
    Specifieke pagina's uitsluiten van menuwidgets

    Als u nu terugkeert naar de stramienpagina om uw menu te bekijken, dan zult u zien dat Producten is verwijderd uit de menuwidget.

    Opmerking:

    Om het hele menu te verwijderen, gaat u naar de pagina waaraan u de menuwidget hebt toegevoegd. Selecteer de widget en druk op Delete.

    In gevallen waarin u een menuoptie zonder een koppeling wilt weergeven, klikt u met de rechtermuisknop op de desbetreffende pagina in de overzichtsweergave. Selecteer Menuopties > Pagina opnemen zonder hyperlink.

    Deze optie is geschikt in verschillende gebruiksscenario's tijdens het maken van een website. Gebruik deze optie als u bijvoorbeeld een rolloverpagina Producten hebt waarop u wilt dat bezoekers alleen op productcategorieën, en niet het hoofdlabel Producten, klikken.

Werken met menuwidgets

Werken met menuwidgets
In deze video die wordt gepresenteerd door Brian Wood, leert u hoe u een menuwidget invoegt op uw pagina.
Adobe Press - Peachpit

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid