Gemakkelijkste mobiele menu ever!

Dit vond ik zo’n vondst. Prachtige eenvoud.

Het gaat om het toevoegen van een menu voor de mobiele versie van een website waarbij het hoofdmenu in de zijbalk zit.

Wat je krijgt is een knop bovenaan je website (alleen mobiele versie) die laat je springen naar het menu dat verder onderaan staat.

Ik ga er nu vanuit dat het hoofdmenu al gemaakt is en in de sidebar staat.

1. Zoek op hoe de div of section heet waarin dat menu staat. Het is belangrijk dat die div of section een id heeft.

2. Ga naar Weergave  > menu, maak een nieuw menu (ik noemde het Jump) en voeg in dat menu een link toe (dus geen pagina of categorie oid). Die link luid dat #id-die-je-net-opzocht.

Dat zie er zo uit:

menu met anker

3. vul bij navigatie-label in wat er op de knop moet komen te staan. Bewaar het menu.

4. Ga naar Weergave > widgets.

5. Plaatst in de Header Rechts widget een aangepast menu en wijs het menu aan dat je net maakte.

menu in widget

6. Zorg met CSS dat het nieuwe menu alleen zichtbaar is voor schermen die heel smal zijn via een media-querrie.

Bijvoorbeeld overal:

[code]

header {
display: none;
}

[/code]

En onder de 400 px breed:

[code]

@media only screen and (max-width: 400px) {

header {
display: block;
}

[/code]

 

En dit is het resultaat:

Schermafbeelding 2014-09-04 om 00.28.37  Schermafbeelding 2014-09-04 om 00.29.11

Comments

  1. Winy Schalke schreef dit

    Hoi Corine,
    Prachtig, en zo eenvoudig! Ik herlas toevallig laatst het boekje “Mobile First” van Luc Wroblewski (een aanrader) en daar kwam ik deze simpele oplossing ook tegen. Ik heb hem toen meteen genoteerd voor mijn volgende project. We maken het vaak veel te ingewikkeld. Zo’n Genesis hamburger menu met Javascript… nergens voor nodig!

  2. Winy Schalke schreef dit

    Hoi Corine,
    Het kan ook als het hoofdmenu niet in de sidebar staat. Ik heb dit toegepast bij een website (nog in aanbouw).

    Zet een widget met een een aangepast menu in de sidebar en wijs het hoofdmenu aan. Dit menu heeft bijv. als ID #nav_menu-2.

    Voeg dit toe aan je css:

    Voor alle schermen:

    /* hoofdmenu in sidebar verbergen, alleen tonen bij smal scherm */
    #nav_menu-2 {
    display: none;
    }

    Voor kleine schermen:

    /* link naar menu in sidebar voor smal scherm */
    .site-header .widget-area {
    display: block;
    }

    /* hoofdmenu verbergen */
    .nav-primary {
    display: none;
    }

    /* hoofdmenu in sidebar tonen bij smal scherm */
    #nav_menu-2 {
    display: block;
    }

Wil je reageren?

Graag!
Je kunt hier een berichtje achterlaten. Het is noodzakelijk daarvoor je naam en emailadres in te vullen. Het emailadres zal nooit openbaar worden gemaakt.
Na goedkeuring door WP-bieb zal je bericht op de website verschijnen.

*