{"id":5567,"date":"2021-09-16T15:43:24","date_gmt":"2021-09-16T13:43:24","guid":{"rendered":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/?p=5567"},"modified":"2023-10-15T21:17:00","modified_gmt":"2023-10-15T19:17:00","slug":"flyout-menu","status":"publish","type":"post","link":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/flyout-menu\/","title":{"rendered":"FlyOut Menu"},"content":{"rendered":"
\n
\"\"<\/figure><\/div>\n\n\n

Een FlyOut menu is een navigatiemenu dat tevoorschijn komt wanneer je op een menuknop klikt. Dit menu bevat meerdere knoppen en links naar overige onderdelen (pagina’s) van een wesite of app. Met behulp van Components kunnen we dit menu opzetten zodat het kan worden hergebruikt en we aanpassingen in het origineel kunnen doen. Dit scheelt een hoop werk bij het aanmaken van interacties (links).<\/p>\n\n\n\n\n\n\n\n

Intro<\/span>Stap 1<\/span>Stap 2<\/span>Stap 3<\/span>Theorie<\/span><\/div>
\n\n\n
\n
\"\"<\/a>
Klik voor geanimeerd voorbeeld<\/figcaption><\/figure><\/div>\n\n\n

Je hebt misschien wel eens een site in XD ontworpen, waarbij je voor elke pagina alle interacties (links in een menu bijvoorbeeld) opnieuw aangemaakt hebt. Dit is natuurlijk veel werk. Er bestaat daarom een oplossing die tijd scheelt. Deze methode maakt gebruik van een Component.<\/p>\n\n\n\n

Heb je nog geen ervaring in het werken met Components, dan raad ik je aan om de oefening Components<\/a> te bekijken. <\/p>\n\n\n\n

Hiermee maak je \u00e9\u00e9nmaal het menu aan (het origineel, oftewel de Main Component) en daarna plaats je dit menu als verschillende Instances (verschijningen) in je site.<\/p>\n\n\n

\n
\"\"
Je ziet de Main Component in de Default State. Deze component bevat zowel de menuknop (rode cirkel) als de pagina-knoppen. Deze laatste vallen buiten beeld omdat het menu is ingeklapt. <\/figcaption><\/figure><\/div>\n\n\n

Het grote voordeel is dat alle interacties (links) die je in het Main Component aanmaakt ook meteen verschijnen in alle Instances. Je hoeft dus niet per pagina telkens opnieuw je navigatiemenu te linken aan andere pagina’s.<\/p>\n\n\n\n<\/div>\n

\n\n\n\n
    \n
  1. Zet een document op met minstens 5 pagina’s. <\/li>\n\n\n\n
  2. Geef deze een simpele inhoud. Zorg dat de pagina’s onderling goed verschillen, bijvoorbeeld door grote cijfers 1-5 te plaatsen of met kleuren te werken.<\/li>\n\n\n\n
  3. Ontwerp een menuknop. Deze knop zal dienen om het menu in- en uit te klappen.<\/li>\n<\/ol>\n\n\n\n

    Bedenk je hoe jouw menu precies gaat werken en waar het gepositioneerd is. Het deel van het menu dat uitgeklapt wordt bevat de knoppen naar de pagina’s. Klik op de voorbeelden hieronder:<\/p>\n\n\n\n

    \n
    \n
    \"\"<\/a>
    Voorbeeld 1<\/figcaption><\/figure><\/div><\/div>\n\n\n\n
    \n
    \"\"<\/a>
    Voorbeeld 2<\/figcaption><\/figure><\/div><\/div>\n<\/div>\n\n\n
    \n
    \"\"<\/a>
    Klik om te vergroten<\/figcaption><\/figure><\/div>\n\n\n

    De menuknop laat het menu in- en uitklappen. We hebben dus twee states <\/em>nodig: ingeklapt en uitgeklapt. De Default State is ingeklapt.<\/p>\n\n\n\n

    Hiernaast (rechts) zie je de Default State van het menu uit voorbeeld 1 hierboven. De menuknop is in beeld, maar de paginaknoppen staan buiten beeld (rode pijl).<\/p>\n\n\n\n

      \n
    1. Bedenk je waar jouw menu-items komen te staan ten opzichte van je menuknop, wanneer je menu is ingeklapt (ergens buiten beeld bijvoorbeeld). <\/li>\n\n\n\n
    2. Ontwerp de pagina-knoppen in de Default State (ingeklapt). Je menu bevat voor iedere pagina een knop.<\/li>\n\n\n\n
    3. Selecteer nu het gehele menu, dus menuknop en paginaknoppen, en maak hiervan een Component. Deze krijgt nu automatisch de Default State.<\/li>\n<\/ol>\n\n\n\n

      In stap 2 gaan we een tweede state toevoegen en het menu animeren.<\/p>\n\n\n\n<\/div>\n

      \n\n\n\n

      Het ingeklapte menu in de Default State is gemaakt. Nu moeten we het uitgeklapte menu vormgeven in een nieuwe state. Bedenk je alvast welke objecten worden verplaats wanneer het menu uitklapt.<\/p>\n\n\n

      \n
      \"\"
      Component states<\/figcaption><\/figure><\/div>\n\n\n
        \n
      1. Voeg een New State toe aan het Component en noem deze Uitgeklapt.<\/li>\n\n\n\n
      2. Selecteer deze state en selecteer via het Layer paneel de objecten die moeten verplaatsen. <\/li>\n\n\n\n
      3. Zet alle objecten in de uitgeklapte positie.<\/li>\n\n\n\n
      4. Test of de objecten van plaats wisselen wanneer je tussen de states wisselt.<\/li>\n<\/ol>\n\n\n\n

        De menuknop schakelt tussen de twee states. Er zijn er twee interacties nodig wanneer erop geklikt wordt: van de ‘Default State’ naar ‘Uitgeklapt’ en terug.<\/p>\n\n\n

        \n
        \"\"<\/a>
        Link de pagina-knoppen aan de pagina’s in de Main Component<\/figcaption><\/figure><\/div>\n\n\n
          \n
        1. Ga naar tabblad Prototype en voeg de twee interacties toe aan je menuknop.<\/li>\n\n\n\n
        2. Test je flyout-menu in Preview. Je zou nu door op de menuknop te klikken heen en weer moeten schakelen tussen de twee states.<\/li>\n\n\n\n
        3. Selecteer de uitgeklapte state en link nu alle pagina-knoppen aan je pagina’s.<\/li>\n<\/ol>\n\n\n\n

          We zijn nu zover dat je Menu Component helemaal af is! En nu komt het grote gemak<\/em>: plaats instances van je menu-component vanuit de Library op de overige pagina’s en bekijk de Preview.<\/p>\n\n\n\n

          Je ziet nu dat op alle pagina’s een volledig werkend en gelinkt menu staat. Komt er een pagina bij, dan zet je de bijbehorende pagina-knop in het Main Component en linkt hem aan de pagina. Alle instances updaten gelijk mee!<\/em><\/p>\n\n\n\n<\/div>\n

          \n\n\n\n
          Brainteasers<\/h5>\n\n\n\n

          Ben je op weg om een die-hard<\/em> in XD te worden, dan zijn er nog enkele uitdagingen te gaan. Hieronder vind je er drie, gesorteerd van makkelijk naar moeilijk. Zoek zelf op internet naar de informatie over hoe je dit aanpakt.<\/p>\n\n\n\n