Hamburger menu maken voor mobiel (mobile-friendly menu)

uit de cursus Responsive websites maken met Adobe Muse

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Volgende video: Responsive desktop layout

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Responsive websites maken met Adobe Muse

perm_identity Belinda | video_library 71 video's | query_builder 06:00:26

Makkelijk websites maken met Adobe Muse

Leer hoe je met Adobe Muse websites maakt en publiceert. Dankzij de eenvoudige interface kan iedereen zonder voorkennis van HTML-code, CSS en/of JavaScript toch vrij eenvoudig een responsive website creëren en online publiceren. Jammer genoeg is Adobe gestopt met de verdere ontwikkeling van Muse maar het programma is nog steeds te downloaden en te gebruiken.

Doelgroep van deze cursus

Iedereen die websites wil leren maken zonder kennis te willen hebben van broncode, html, css en javascript.

Wat ga je leren

In deze online cursus leer je de verschillen tussen een statische, vloeiende en responsive website. Alle meest gebruikte vensters, gereedschappen en instellingen komen aan bod.  Direct vanaf de eerste instructievideo’s besteden we aandacht aan de meest snelle en efficiënte manier waarop je webpagina’s en -sites zou moeten maken. Dus werken met master pages en stijlen.

Interactieve media met JavaScript Widgets

Je leert de widgets van het programma toe te passen. Dit zijn voorgebakken JavaScript toepassingen waarmee je in een handomdraai bijvoorbeeld een fotogallerij, formulier en interactieve kaarten kunt maken.

Om ervoor te zorgen dat de website er goed uitziet op elk apparaat. Van mobiel, tablet tot desktop besteden we een volledig hoofdstuk aan Responsive Webdesign.

Vereiste voorkennis en vaardigheden

Dit progamma kan iedereen leren, het is laagdrempelig en werkt met het WYSIWYG-principe. Jij creëert prachtige webpagina’s met behulp van de gereedschappen, opties en instelvensters en Adobe Muse schrijft de benodigde code voor jou op de achtergrond weg.

We gaan nu het navigatiemenu aanpassen voor de mobiele versie.

Hiervoor maken we een hamburgermenu met twee verschillende Library Widgets die we met elkaar gaan combineren.

Ik laat eerst zien hoe een hamburgermenu eruit ziet. En wat het doet.

Maak het browservenster smaller. Let op het navigatiemenu.

Op het moment dat ik de schermbreedte van een mobiel bereik.

dan verandert het menu in een hamburgermenu.

Dit icon staat symbool voor het zogeheten hamburger-menu.

Klik op de icon en deze klapt in en uit.

Uitgeklapt bedekt deze de onderliggende pagina-items.

Klik op een menu-item om naar de desbetreffende pagina te gaan.

Het hamburgermenu heeft de horizontale navigatiebalk vervangen.

Dan gaan we dit menu nu opbouwen. Open in Muse de A-Master Page.

Activeer het breekpunt gebied voor mobiel.

Selecteer het huidige menu.

Klik met de rechtermuisknop in en kies uit het contextuele menu voor ‘Hide in Breakpoint’.

Klik met de rechtermuisknop in en kies uit het contextuele menu voor ‘Hide in Breakpoint’.

Hiermee zorg je ervoor dat de menubalk enkel in dit breekpunt gebied niet meer zichtbaar is.

Kijk maar als ik op de andere gebieden klik staat er wel het menu, behalve hier.

Ik ga het kolomstramien voor de mobiel aanpassen.

Klik dan met de rechtermuisknop ingedrukt in het breekpunt gebied en kies voor Breakpoint Properties.

Ik zet de Margins aan links- en rechterzijde op pixels.

En het aantal kolommen op twee.

Dit kun je later natuurlijk ook altijd weer aanpassen als je dat wilt.

Open de Widget Library.

In de map Panels staat de widget ‘Accordion’. Sleep deze in de pagina.

De accordion bestaat uit een Label en een Content Area.

Klik op de labels om het bijbehorende gebied te tonen.

Voor ons hamburgermenu hebben we enkel één label en één contentgebied nodig.

Dus selecteer de overige twee labels en verwijder deze.

Selecteer opnieuw de Accordion.

Soms kun je beter eerst deselecteren, in het niets klikken.

Om de huidige selectie ongedaan te maken.

Klik dan opnieuw aan op de widget.

Zorg dat de naam van de widget ‘Accordion’ onder de aanwijzer wordt getoond.

Klik dan met de rechtermuisknop ingedrukt op de Accordion en kies uit het contextuele menu ‘Clear all Styling’.

Om alle bestaande opmaak te verwijderen.

Daarna nogmaals, met de rechtermuisknop ingedrukt, voor ‘Clear Widget Contents’.

Om de huidige content te verwijderen.

We gaan de afbeelding van het hamburgermenu plaatsen via File > Place.

Navigeer in de oefenmap naar de map Assets. Selecteer het bestand ‘mobile-menu-icon.png’ en klik op Open.

Eén keer klikken op de pagina en de afbeelding wordt op ware grootte geplaatst.

Deze is bij pixels en dat is wat je ongeveer nodig hebt op een touchscreen, aan minimaal formaat voor een icon.

Zorg dat de afbeelding geselecteerd is en knip deze weg met Commando X.

Dubbelklik in het Label. Zorg dat het huidige gereedschap wordt vervangen voor het tekstgereedschap.

Ik selecteer de aanwezige tekst deze kan weg.

En plak de afbeelding op de tekstregel met Commando V.

Ik wil het icon aan de rechterkant plaatsen dus zet ik de uitlijning voor deze regel op rechts lijnend.

Met mijn selectie-gereedschap verplaats ik nu de widget in de header.

En ik wijzig het formaat van de widget alvast op de juiste breedte.

Dit is het eerste deel. Dan nu het menu.

Hiervoor ga je opnieuw naar de Widget Library.

Kies uit de map Menus voor een verticaal menu en sleep deze in de pagina.

En wel in het content gebied, dus zorg ervoor dat je het content gebied raakt.

Een blauwe omlijning licht op. Laat dan de muis los.

Het verticale menu wordt opgebouwd. Op basis van de aanwezige pagina's in mijn Plan Mode.

Ik verplaats het menu naar de positie waar ik die wil hebben.

En kan deze ook alvast de juiste breedte meegeven.

Op dit moment hebben de menu-items een kleine tussenruimte. Deze wil ik verwijderen.

Hiervoor heb je het venster Spacing nodig. Het hele menu moet geselecteerd zijn.

En dan zie je bij Gutter > Vertical het getal staan. Deze zet ik nu op .

En alle tussenruimtes zijn verdwenen.

Ik wil nog wel een horizontale scheidingslijn plaatsen tussen de menu-items.

Hiervoor moet ik één menu-item selecteren.

Ga dan naar Stroke. Ontkoppel lijn langs alle zijden.

En zet enkel de lijn naar beneden op pixel. Geef deze een lijnkleur mee

En voilà. Je hebt een scheidingslijn gemaakt.

Bepaal nu ook alvast de verschillende staten voor de Menu-Items.

Voor Normal wil ik als vulkleur de lichte kleurvariant. Deze zelfde kleur activeer ik ook voor de Rollover.

Al is dit eigenlijk overbodig want een touchscreen kent geen Rollovers.

Voor Mouse-Down gebruik ik de donkere kleurvariant.

En diezelfde kleur verbind ik dan ook aan de staat Active.

Dan wil ik de teksten nog gaan vormgeven.

Dubbelklik net zolang op de tekst van een menu-item.

Totdat je in het Control-venster de instellingen voor tekstopmaak ziet.

Het lettertype wordt de ‘Lucida Sans’. De corpsgrootte wordt pixels.

De tekst moet inderdaad gecentreerd staan. Dat staat deze al.

En de afspatiëring zet ik op .

Keer terug naar mijn selectie-gereedschap.

Deselecteer, selecteer opnieuw.

Zorg dat je weer één menu-item geselecteerd hebt.

En ik maak deze nog even nog ietsje groter. Zodat elk menu-item goed aanklikbaar is straks.

Op dit moment staat de hoogte van de menu-items op pixels en dat is minimaal nodig voor een touchscreen.

Nou dit is het wel zo’n beetje.

Hoef ik enkel nog de opties voor de ‘Accordion’ na te kijken.

Deselecteer eerst door ergens in het niets te klikken.

En selecteer de Accordion. Klik op het optie-menu.

Ik wil dat men het menu open en dicht kan klappen door op het label te klikken.

Dus vink ik de optie ‘Can Close All’ aan.

Je wilt immers niet dat het menu constant in beeld blijft staan.

Mag het menu als deze uitgeklapt wordt onderliggende pagina-elementen naar beneden gaan duwen?

Of moet hij deze juist overlappen?

Wat mij betreft komt het menu erboven te staan.

Dus ik vink de optie ‘Overlap Items Below’ ook aan.

Dan kunnen we nu dit menu gaan testen in de browser.

Ga naar File > Preview in browser.

Maak het browservenster smaller totdat je de querie van mobiel bereikt hebt.

Wat ik trouwens nu ook zie, is dat mijn mobiele versie ook op deze queries zichtbaar zijn.

Dus dat moet ik nog verbeteren.

Het horizontale menu is in deze querie wel verdwenen.

Maar mijn hamburger-menu wordt bedekt door de pagina-items. En dit had omgekeerd moeten zijn.

Dit komt omdat de header-laag waarschijnlijk onder de content-laag staat.

Keer terug naar de A-Master page.

Open het lagen-venster en zorg dat de header-laag boven de content-laag komt te staan.

Bekijk opnieuw het resultaat in de browser.

Inderdaad nu staat mijn menu boven de content.

Je kunt nu controleren dat alle menu’s naar de juiste pagina’s linken.

Maak het browservenster weer breder.

Je ziet dat het hamburger-menu in elk breekpunt gebied is toegevoegd.

En dat was ook niet de bedoeling. Keer weer terug naar de A-Master Page.

Klik met de rechtermuisknop ingedrukt op de Accordion.

En kies uit het contextuele menu voor ‘Hide in Other Breakpoints'.

Dit zou ervoor moeten zorgen dat dit menu enkel nog maar getoond wordt op de mobiele versie.

Dat kan ik hier ook controleren via de queries.

En uiteindelijk ook nog eens controleren in de browser.