Een hamburger-menu in 5 minuten

Corine schreef eerder over het Gemakkelijkste mobiele menu ever. Ik heb dit een paar keer toegepast en het is inderdaad super simpel. Wat ik wel een (klein) nadeel vind is dat je in je css, menu’s en widgets toch het een en ander moet aanpassen (en onthouden hoe je dat ook alweer gedaan hebt). Gelukkig is er nog een andere manier die ook heel makkelijk en snel te maken is. Je moet hiervoor wel het Genesis framework gebruiken.

Ik bouw mijn child themes altijd zelf op basis van het kale sample Genesis child theme. Zo nu en dan pluis ik ook de code van andere Genesis child themes uit en zo kwam ik dit menu tegen. Het zit bijvoorbeeld in het Beautiful theme. Bekijk een demo.

1. javascript

Maak een nieuw tekstbestand en noem het responsive-menu.js. Kopieer onderstaande code in dit bestand.

[code]

jQuery(function( $ ){

$(“header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu”).addClass(“responsive-menu”).before(‘<div class=”responsive-menu-icon”></div>’);

$(“.responsive-menu-icon”).click(function(){
$(this).next(“header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu”).slideToggle();
});

$(window).resize(function(){
if(window.innerWidth > 768) {
$(“header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu”).removeAttr(“style”);
$(“.responsive-menu > .menu-item”).removeClass(“menu-open”);
}
});

$(“.responsive-menu > .menu-item”).click(function(event){
if (event.target !== this)
return;
$(this).find(“.sub-menu:first”).slideToggle(function() {
$(this).parent().toggleClass(“menu-open”);
});
});

});

[/code]

Bewaar het en upload het naar de map “js” in je Genesis child theme. Als je child theme deze map niet heeft maak je in de map van je child theme een nieuwe map aan en je noemt deze “js”. Zo ziet je child theme map er nu uit:

mapstructuur genesis child theme

2. functions.php

Plak de volgende regels in de functions.php van je Genesis child theme.

[code]
wp_enqueue_script( ‘ad-responsive-menu’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/responsive-menu.js’, array( ‘jquery’ ), ‘1.0.0’ );
wp_enqueue_style( ‘dashicons’ );
[/code]

Meestal staat er al een regel voor de Google fonts (vrij bovenaan), en je kunt deze regels daar aan toevoegen, omdat deze ook naar een script verwijst. Zo dus:

[code]
//* Enqueue scripts and styles
add_action( ‘wp_enqueue_scripts’, ‘genesis_sample_google_fonts’ );
function genesis_sample_google_fonts() {
wp_enqueue_style( ‘google-font-lato’, ‘//fonts.googleapis.com/css?family=Lato:300,400,700’, array(), CHILD_THEME_VERSION );
wp_enqueue_script( ‘ad-responsive-menu’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/responsive-menu.js’, array( ‘jquery’ ), ‘1.0.0’ );
wp_enqueue_style( ‘dashicons’ );
}
[/code]

3. style.css

Nu de css. Voeg onder Primary Navigation dit toe:

[code]
/* Responsive Menu ——————————————— */
.responsive-menu-icon {
cursor: pointer;
display: none;
margin-bottom: -1px;
text-align: center;
}

.responsive-menu-icon::before {
content: “f333”;
display: inline-block;
font: normal 20px/1 ‘dashicons’;
margin: 0 auto;
padding: 10px;
}
[/code]

en onder Responsive Styles (@media only screen and (max-width: 767px) dit:

[code]
.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
.genesis-nav-menu.responsive-menu {
display: none;
}

.genesis-nav-menu.responsive-menu .menu-item,
.responsive-menu-icon {
display: block;
}

.genesis-nav-menu.responsive-menu .menu-item {
margin: 0;
}

.genesis-nav-menu.responsive-menu .menu-item:hover {
position: static;
}

.genesis-nav-menu.responsive-menu .current-menu-item > a,
.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu.responsive-menu a,
.genesis-nav-menu.responsive-menu a:hover {
background: none;
line-height: 1;
padding: 16px 20px;
}

.genesis-nav-menu.responsive-menu .menu-item-has-children {
cursor: pointer;
}

.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
margin-right: 60px;
}

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: “f347”;
float: right;
font: normal 16px/1 ‘dashicons’;
height: 16px;
padding: 16px 20px;
right: 0;
text-align: right;
z-index: 9999;
}

.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
content: “f343”;
}

.genesis-nav-menu.responsive-menu .sub-menu {
border: none;
left: auto;
opacity: 1;
padding-left: 25px;
position: relative;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
-webkit-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
width: 100%;
z-index: 99;
}

.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
margin: 0;
}

.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu.responsive-menu .sub-menu li a,
.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
background: none;
border: none;
padding: 12px 20px;
position: relative;
width: 100%;
}

.nav-primary .genesis-nav-menu.responsive-menu {
padding-bottom: 16px;
}
[/code]

Wil je het hamburger-icoontje vervangen door iets anders, bijvoorbeeld een pijltje?

Hier lees je hoe je dat doet: How to change mobile responsive hamburger icon in Genesis.

De icoontjes zijn gewoon tekst, van het font dashicons. Je kunt dus ook makkelijk de kleur en grootte aanpassen.

Comments

  1. Leuk Winy. Handig om het zo op een rij te hebben. Dank!

  2. Ariane schreef dit

    Dank je wel Winy, had ik net nodig en lekker overzichtelijk zo!

  3. Kitty Bakker schreef dit

    Fantastisch Winy, erg fijne handleiding. ik heb het nu al een aantal keer toegepast.
    Maar nu nog met een leuke update!
    Naast het menu icoon het woordje “Menu”. Dat is nog weer een stuk gebruiksvriendelijker.
    Dat heb ik bijvoorbeeld hier toegepast: http://www.zegelfietsen.nl
    Ik heb een nieuwe post geschreven en je handleiding er mee uitgebreid.

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.

*