Op het internet worden diverse navigatie menu’s aangeboden die meestal ook responsive zijn om te gebruiken binnen je website. Maar wat je als nu specifiek zoekt op een responsive menu voor WordPress. En je wilt geen standaard plugin gebruiken. Dan kan het nog wel eens lastig zoeken worden. Meestal zijn de stappen onduidelijk of moet je een normaal menu ombouwen voor je WordPress website.
Voor de iconen in het menu is gebruikt gemaakt van Fontawesome. Kijk via deze link hoe deze geïmplementeerd moet worden in je website.
Responsive menu WordPress
Hier vind je in een aantal stappen hoe je een Responsive menu in WordPress moet maken en gebruiken.
Het toevoegen van het menu in de header.php
<menu id="site-navigation" class="main-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary') ); ?></menu>Het toevoegen van Javascript in een bestaande of nieuwe .js file.
In het voorbeeld gaan we uit van een nieuwe bestand “script.js” geplaats in de map js binnen het thema.
( function( window, $, undefined ) {
'use strict';
$( 'menu' ).before( '<button class="menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to menus
$( 'menu .sub-menu' ).before( '<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to sub menus
// Show/hide the navigation
$( '.menu-toggle, .sub-menu-toggle' ).on( 'click', function() {
var $this = $( this );
$this.attr( 'aria-pressed', function( index, value ) {
return 'false' === value ? 'true' : 'false';
});
$this.toggleClass( 'activated' );
$this.next( 'menu, .sub-menu' ).slideToggle( '800' );
});
})( this, jQuery );Stap 3 is het oproepen van het javascript bestand binnen het bestand Functions.php met de volgende code.
wp_enqueue_script( 'script.js', get_template_directory_uri() . '/js/script.js', array('jquery'), '20151111', true );
wp_enqueue_script("script.js");Stap 4 is het stylen van het menu. Het voorbeeld is standaard en uit te breiden naar wens.
menu
{
height:auto;
font-size:15pt;
float:left;
z-index:2;
margin:0 auto;
}
menu ul
{
padding:0;
margin:0 auto;
width:100%
}
menu ul ul
{
position:absolute
}
menu li
{
display:inline
}
menu a
{
color:#333;
font-family:'Dosis',sans-serif;
display:inline-block;
width:auto;
padding:10px;
text-align:center;
text-decoration:none;
line-height:67px;
font-size:20px;
vertical-align:middle
}
menu li:last-child a
{
border-right:0
}
menu li:first-child a
{
border-left:0
}
menu a:hover,menu a:active
{
color:#08d!important
}
menu a:visited
{
color:#333
}
menu li ul
{
display:none
}
menu ul ul
{
background:#fff;
width:250px;
box-shadow:0 0 5px 0 rgba(00,00,00,0.1)
}
menu ul ul a
{
width:250px;
line-height:40px;
font-size:16px;
color:#333;
border-bottom:1px solid #e3e2e3
}
menu ul ul a:visited
{
color:#333
}
menu ul li:hover ul
{
display:block;
position:absolute
}
menu ul ul a
{
text-align:left
}
menu
{
clear:both
}
.sub-menu-toggle,.menu-toggle
{
display:none;
visibility:hidden
}
@media only screen and (min-width: 1101px) {
menu
{
display:block!important
}
}
@media only screen and (max-width: 1100px) {
menu
{
margin:0!important;
position:absolute!important;
left:0;
right:0;
width:100%!important;
height:100vh;
z-index:3;
overflow-y:auto;
padding-top:20px;
background:rgba(255,255,255,0.9)
}
menu a
{
line-height:25px!important
}
menu li
{
display:block!important;
text-align:left!important;
left:0;
right:0
}
menu ul li:hover ul
{
position:relative!important
}
menu li ul
{
display:block
}
menu li ul li
{
display:block;
padding:0!important
}
menu ul ul
{
position:relative!important;
width:100%!important;
text-align:left!important;
border-bottom:0!important;
background:transparent;
text-indent:15px;
box-shadow:none;
}
menu ul ul a,menu ul ul a:visited
{
color:#333!important;
border:0!important
}
.menu-toggle,.sub-menu-toggle
{
display:block!important;
font-size:20px;
font-size:2em;
margin:0 auto;
overflow:hidden;
padding:5px;
z-index:9;
right:10%;
visibility:visible;
position:absolute;
border:none;
margin-top:25px;
transition:all 500ms ease-in-out
}
.menu-toggle.fixed
{
margin-top:10px
}
button.menu-toggle,button.sub-menu-toggle
{
background-color:transparent;
color:#333;
float:right;
z-index:999;
outline:none;
border:none
}
.sub-menu-toggle
{
padding:18px;
padding:2.8rem;
position:absolute;
right:0;
top:70px
}
.menu-toggle:before
{
content:"\f0c9";
font-family:"FontAwesome";
z-index:999
}
.menu-toggle.activated:before
{
content:"\f077";
font-family:"FontAwesome";
z-index:999
}
.sub-menu-toggle:before
{
content:"-"
}
.sub-menu-toggle.activated:before
{
content:"+"
}
menu
{
display:none;
position:relative
}
.menu-menu .menu-item
{
background-color:#f5f5f5;
display:block;
position:relative;
text-align:left
}
.menu-menu .menu-item:hover
{
position:relative
}
.menu-menu .sub-menu
{
clear:both;
display:none;
opacity:1;
position:static;
width:100%
}
.menu-menu .sub-menu a
{
border-left:0;
position:relative;
width:auto
}
.menu-menu .sub-menu .sub-menu
{
margin:0
}
.menu-menu .sub-menu .sub-menu a
{
background-color:#f5f5f5;
padding-left:30px
}
.menu-menu .sub-menu .sub-menu .sub-menu a
{
background-color:#fff;
padding-left:40px
}
.menu-primary a:hover,.menu-primary .current-menu-item > a
{
color:#333
}
}Nu is je Responsive menu WordPress klaar en kun je hem verder uitbreiden naar wens.