Hamburgermenu met MENU in 10 minuten – een update!

Winy schreef een fijne handleiding voor het maken van een hamburgermenu in 5 minuten. Werkt perfect. Maar bij uittesten blijkt dat niet iedereen het hamburgericoon voor een menu aanziet. Ik zocht naar de mogelijkheid om er het woord “Menu” naast te zetten.¬†Een update dus ten behoeve van de gebruiksvriendelijkheid. Bekijk hier een demo. En hieronder volgt de aangepaste handleiding.

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”><span class=”menu-text”>Menu</span></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;

}

.menu-text {
color: #fff;
display: inline-block;
line-height: 1;
margin-top: 11px;
vertical-align: top;

}
[/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.

De aanpassingen van Winy’s handleiding zitten in het javascript en de css. Bron: Sridhar Katakam

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.

*