Comment intégrer un menu responsive css sans JavaScript dans WordPress ?

Pourquoi intégrer un menu pure css responsive dans WordPress alors qu’il existe pléthore de plugin qui font ça très bien ? Et bien tout d’abord c’est une solution simple donc robuste. Ensuite, le menu est partie intégrante d’un thème donc j’estime inutile d’ajouter un plugin juste pour ça. Enfin, c’est aussi pour la beauté du geste.

Le menu css utilisé

Je n’ai pas développé le menu css depuis zéro car là aussi il en existe (pas tant que ça cependant qui soit vraiment responsive). J’ai utilisé celui-ci (démo).

A part le look qui mérite d’être affiné, il marche bien et fera une bonne base de départ. Le contenu complet du fichier minimal-menu.css que nous utiliserons dans la suite est à la fin de l’article.

Les étapes de l’intégration dans WordPress

Cette intégration se fait en trois étapes

  • Déclarer le fichier css dans le thème
  • Modifier le walker du menu de navigation du thème
  • Insérer le code pour générer le menu dans le thème

Nous allons voir chaque étape une par une.

Déclarer le fichier css dans le thème

La version simple consiste à recopier le code fourni à la fin de l’article dans le fichier styles.css du thème. Comme il y a pas mal de ligne, c’est plus propre pour la maintenance ultérieure de laisser les règles css du menu dans un fichier à part. Pour cela, nous allons le placer dans un dossier css du thème et ajoutons sa déclaration dans le fichier functions.php du thème, comme suit :

add_action(
	'wp_enqueue_scripts',
	function() {
		$version = filemtime( get_stylesheet_directory() . '/css/minimal-menu.css' );
		wp_register_style(
			'minimal-menu',
			get_stylesheet_directory_uri() . '/css/minimal-menu.css',
			null,
			$version,
			'all'
		);

		wp_enqueue_style( 'minimal-menu' );
	}
);

Note : si vous déclarez d’autres fichiers css (par exemple normalize.css), il suffit de les enchaîner en utilisant troisième argument de wp_register_style (à la place de null) et d’appliquer wp_enqueue_style au dernier.

Modifier le walker du menu de navigation dans le thème

Cette étape est assez technique dans le principe. Par contre, elle est simple à réaliser et il n’est pas nécessaire de tout comprendre en détail. Si vous voulez plus de détail sur les « walker », je vous conseille ce très bon article de Wabeo. Il date un peu mais est cependant toujours valable.

Cette étape consiste à enrichir le code généré par WordPress pour les menus en ajoutant ce qui manque pour faire fonctionner notre menu, à savoir une checkbox avant chaque sous-menu. Pour cela, nous allons compléter le code d’un de ces fameux walker en déclarant une classe fille de la classe WordPress Walker_Nav_Menu dans notre fichier functions.php du thème. Le code de notre classe va simplement reprendre l’intégralité du code du walker start_el() de la classe Walker_Nav_Menu. C’est en fait une méthode de la classe qui génère de début de chaque élément du menu. C’est donc là que nous allons ajouter notre checkbox, dans le cas d’un item qui a des enfants. WordPress étant bien fait, nous pouvons facilement identifier de tels items car ils ont la classe css menu-item-has-children. Allons-y.

Créer la classe fille de Walker_Nav_Menu dans le fichier functions.php du thème

class Djth_Walker_Mobile_Nav_Menu extends Walker_Nav_Menu {
}

Y recopier le code du walker start_el() de la classe Walker_Nav_Menu

Vous trouverez ce code dans l’installation de WordPress, dans wp-includes/class-walker-nav-menu.php. Recopier simplement tout le code de la méthode public function start_el(). Je le remet ci-dessous, expurger de ses commentaires qui compliquent la lecture.

class Djth_Walker_Mobile_Nav_Menu extends Walker_Nav_Menu {

	public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {

		if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
			$t = '';
			$n = '';
		} else {
			$t = "\t";
			$n = "\n";
		}

		$indent = ( $depth ) ? str_repeat( $t, $depth ) : '';

		$classes   = empty( $item->classes ) ? array() : (array) $item->classes;
		$classes[] = 'menu-item-' . $item->ID;

		// Filters the arguments for a single nav menu item.
		$args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

		// Filters the CSS classes applied to a menu item's list item element.
		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
		$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

		// Filters the ID applied to a menu item's list item element.
		$id = apply_filters( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args, $depth );
		$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

		$output .= $indent . '<li' . $id . $class_names . '>';

		$atts           = array();
		$atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
		$atts['target'] = ! empty( $item->target ) ? $item->target : '';
		if ( '_blank' === $item->target && empty( $item->xfn ) ) {
			$atts['rel'] = 'noopener noreferrer';
		} else {
			$atts['rel'] = $item->xfn;
		}
		$atts['href']         = ! empty( $item->url ) ? $item->url : '';
		$atts['aria-current'] = $item->current ? 'page' : '';

		// Filters the HTML attributes applied to a menu item's anchor element.
		$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

		$attributes = '';
		foreach ( $atts as $attr => $value ) {
			if ( is_scalar( $value ) && '' !== $value && false !== $value ) {
				$value       = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
				$attributes .= ' ' . $attr . '="' . $value . '"';
			}
		}

		// This filter is documented in wp-includes/post-template.php.
		$title = apply_filters( 'the_title', $item->title, $item->ID );

		// Filters a menu item's title.
		$title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

		$item_output  = $args->before;
		$item_output .= '<a' . $attributes . '>';
		$item_output .= $args->link_before . $title . $args->link_after;
		$item_output .= '</a>';
		$item_output .= $args->after;

		// Filters a menu item's starting output.
		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

Ajouter le code générant la checkbox

Juste avant les deux dernière ligne « // Filters a menu item’s starting output. », nous ajoutons ce code trouvé ici :

		// Add show menu toggle if the item has children.
		$has_children = array_search ( 'menu-item-has-children' , $classes );

		if($has_children != false) :
			$item_output .= '<input class="show-submenu" type="checkbox" id="show-submenu-' . $item->ID .'" name="show-submenu-' . $item->ID . '" />';
		endif;

Voici le code complet de notre nouveau walker

class Djth_Walker_Mobile_Nav_Menu extends Walker_Nav_Menu {

	public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {

		if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
			$t = '';
			$n = '';
		} else {
			$t = "\t";
			$n = "\n";
		}

		$indent = ( $depth ) ? str_repeat( $t, $depth ) : '';

		$classes   = empty( $item->classes ) ? array() : (array) $item->classes;
		$classes[] = 'menu-item-' . $item->ID;

		// Filters the arguments for a single nav menu item.
		$args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

		// Filters the CSS classes applied to a menu item's list item element.
		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
		$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

		// Filters the ID applied to a menu item's list item element.
		$id = apply_filters( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args, $depth );
		$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

		$output .= $indent . '<li' . $id . $class_names . '>';

		$atts           = array();
		$atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
		$atts['target'] = ! empty( $item->target ) ? $item->target : '';
		if ( '_blank' === $item->target && empty( $item->xfn ) ) {
			$atts['rel'] = 'noopener noreferrer';
		} else {
			$atts['rel'] = $item->xfn;
		}
		$atts['href']         = ! empty( $item->url ) ? $item->url : '';
		$atts['aria-current'] = $item->current ? 'page' : '';

		// Filters the HTML attributes applied to a menu item's anchor element.
		$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

		$attributes = '';
		foreach ( $atts as $attr => $value ) {
			if ( is_scalar( $value ) && '' !== $value && false !== $value ) {
				$value       = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
				$attributes .= ' ' . $attr . '="' . $value . '"';
			}
		}

		// This filter is documented in wp-includes/post-template.php.
		$title = apply_filters( 'the_title', $item->title, $item->ID );

		// Filters a menu item's title.
		$title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

		$item_output  = $args->before;
		$item_output .= '<a' . $attributes . '>';
		$item_output .= $args->link_before . $title . $args->link_after;
		$item_output .= '</a>';
		$item_output .= $args->after;

		// Add show menu toggle if the item has children.
		$has_children = array_search ( 'menu-item-has-children' , $classes );

		if($has_children != false) :
			$item_output .= '<input class="show-submenu" type="checkbox" id="show-submenu-' . $item->ID .'" name="show-submenu-' . $item->ID . '" />';
		endif;

		// Filters a menu item's starting output.
		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

Insérer le code pour générer le menu dans le thème

Dernière étape, nous allons placer dans notre thème le code générant le menu. Pour le thème simple que j’ai utilisé pour ce tutoriel, la modification se situe dans le template header.php. Ajoutons ceci juste au début de la section <main> :

		<label class="minimal-menu-button" for="mobile-nav">Menu</label>
		<input class="minimal-menu-button" type="checkbox" id="mobile-nav" name="mobile-nav" />
		<?php 
			$walker = new Djth_Walker_Mobile_Nav_Menu;
			wp_nav_menu( array( 'theme_location' => 'main', 'container_class' => 'minimal-menu clr-white', 'walker' => $walker ) ); ?>

L’emplacement peut être différent selon le thème utilisé. Il est probablement nécessaire de remplacer ou de modifier l’appel existant à wp_nav_menu().

Et voilà, it should work !

Fichier minimal-menu.css

/* ====================================================================================================
	MINIMAL CSS3 MENU
==================================================================================================== */
.minimal-menu {
	position: relative;
	display: block;
	font-family: Gafata, Arial, sans-serif;
	text-decoration: none;
	border: 2px solid #fff;
	font-size: 0;
	line-height: 0;
	-webkit-box-shadow:	0 1px 0 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow:	0 1px 0 1px rgba(0, 0, 0, 0.1);
	box-shadow:			0 1px 0 1px rgba(0, 0, 0, 0.1);
}

.minimal-menu h3 {
	font-weight: normal;
}

.minimal-menu a {
	border-color: transparent;
}

.minimal-menu a:hover {
	-webkit-transition:	border-color 0.3s, background 0.3s;
	-moz-transition:	border-color 0.3s, background 0.3s;
	transition:			border-color 0.3s, background 0.3s;
}

	.minimal-menu ul,
	.minimal-menu ul li,
	.minimal-menu ul li a {
		position: relative;
	}

	.minimal-menu ul {
		z-index: 1;
	}

		.minimal-menu ul li {
			padding-bottom: 15px;
		}

			.minimal-menu ul li a {
				display: block;
				padding: 10px 18px;
				font-size: 16px;
				line-height: 20px;
				text-decoration: none;
			}
			
			.minimal-menu > ul > li > a {
				text-transform: uppercase; 
				border: 1px solid transparent;
				color: #fff;
			}

			.minimal-menu > ul > li:hover > a,
			.minimal-menu > ul > li.current > a {
				border: 1px solid #fff;
			}

			
.minimal-menu ul li.submenu > a:before,
.minimal-menu ul li.submenu > a:after {
	position: absolute;
	content: '';
	width: 5px;
	height: 1px;
	bottom: 0;
	left: 50%;
	background: #fff;
	-webkit-transition:	all 0.5s;
	-moz-transition:	all 0.5s;
	transition:			all 0.5s;
}

.minimal-menu ul li.submenu > a:before {
	margin-left: -4px;
	-webkit-transform:	rotate(45deg);
	-moz-transform:		rotate(45deg);
	transform:			rotate(45deg);
}

.minimal-menu ul li.submenu > a:after {
	margin-left: -1px;
	-webkit-transform:	rotate(-45deg);
	-moz-transform:		rotate(-45deg);
	transform:			rotate(-45deg);
}
			
/* RESPONSIVE
================================================== */
@media only screen and (min-width: 768px) {
	/* Blue
	----------------*/
	.minimal-menu.clr-blue {
		background: #5bc7fd;
	}
	
		.minimal-menu.clr-blue ul ul li:hover > a,
		.minimal-menu.clr-blue ul ul li.current > a {
			border-color: #5bc7fd;
		}
		
	/* Green
	----------------*/
	.minimal-menu.clr-green {
		background: #65e7a2;
	}

		.minimal-menu.clr-green ul ul li:hover > a,
		.minimal-menu.clr-green ul ul li.current > a {
			border-color: #65e7a2;
		}

	/* Orange
	----------------*/
	.minimal-menu.clr-orange {
		background: #e1c75f;
	}

		.minimal-menu.clr-orange ul ul li:hover > a,
		.minimal-menu.clr-orange ul ul li.current > a {
			border-color: #e1c75f;
		}

	/* Black
	----------------*/
	.minimal-menu.clr-black {
		background: #333;
	}
	
	.minimal-menu.clr-black > ul > li > a {
		color: #fff;
	}
	
	.minimal-menu.clr-black > ul > li:hover > a,
	.minimal-menu.clr-black > ul > li.current > a {
		border-color: #aaa;
	}
		
		.minimal-menu.clr-black ul ul li:hover > a,
		.minimal-menu.clr-black ul ul li.current > a {
			border-color: #999;
		}
		
	/* White
	----------------*/
	.minimal-menu.clr-white {
		background: #fff;
		border-color: #000;
	}
	
	.minimal-menu.clr-white > ul > li > a {
		color: #000;
	}

	.minimal-menu.clr-white > ul > li:hover > a,
	.minimal-menu.clr-white > ul > li.current > a {
		border-color: #aaa;
	}
		
		.minimal-menu.clr-white ul ul li:hover > a,
		.minimal-menu.clr-white ul ul li.current > a {
			border-color: #999;
		}
		
		.minimal-menu.clr-white > ul > li.submenu > a:before,
		.minimal-menu.clr-white > ul > li.submenu > a:after {
			background: #999;
		}

	
	
	.minimal-menu-button {
		display: none;
	}
	
	
	.minimal-menu {
		-webkit-border-radius:	30px;
		-moz-border-radius:		30px;
		border-radius:			30px;
	}
	
	.minimal-menu.pos-fixed {
		position: fixed;
		top: -2px;
		left: -2px;
		right: -2px;
		z-index: 9999;
		-webkit-border-radius:	0;
		-moz-border-radius:		0;
		border-radius:			0;
	}
	
	.minimal-menu a {
		white-space: nowrap;
		-webkit-border-radius:	50px;
		-moz-border-radius:		50px;
		border-radius:			50px;
	}

	.minimal-menu > ul {
		margin-bottom: -15px !important;
		padding: 5px;
	}
		
		.minimal-menu ul li {
			display: inline-block;
		}

			.minimal-menu ul li.submenu:hover > a:before,
			.minimal-menu ul li.submenu:hover > a:after {
				bottom: -20px;
				opacity: 0;
			}
		
	/*** Submenu ***/
	.minimal-menu ul ul, .minimal-menu ul .menu-wrapper {
		position: absolute;
		display: block;
		visibility: hidden;
		z-index: 1;
		height: auto;
		left: 3px;
		top: 100%;
		margin: 0;
		padding: 0;
		background: #fff;
		border: 1px solid #e3e3e3;
		border-bottom-width: 3px;
		opacity: 0;

		-webkit-border-radius:	3px;
		-moz-border-radius:		3px;
		border-radius:			3px;
	}

	.minimal-menu ul li:hover > ul, .minimal-menu ul li:hover > .menu-wrapper {
		-webkit-transition: opacity 0.3s, padding 0.3s;
		-moz-transition:	opacity 0.3s, padding 0.3s;
		transition:			opacity 0.3s, padding 0.3s;
		visibility: visible;
		padding: 10px 0;
		opacity: 1;
	}

		.minimal-menu ul ul li {
			display: block;
			overflow: hidden;
			height: auto;
			padding: 10px;
			-webkit-transition:	padding 0.3s;
			-moz-transition:	padding 0.3s;
			transition:			padding 0.3s;
		}
		
			.minimal-menu ul ul li a {
				font-size: 14px;
				color: #666;
				border: 1px solid transparent;
			}

			.minimal-menu ul ul li:hover > a,
			.minimal-menu ul ul li.current > a {
				border-style: solid;
				border-width: 1px;
			}
			
		.minimal-menu ul li:hover ul li {
			overflow: visible;
			padding: 0 10px;
		}

			.minimal-menu ul ul li.submenu > a:before,
			.minimal-menu ul ul li.submenu > a:after {
				left: auto;
				top: 50%;
				right: 0;
				background: #ccc;
			}
			
			.minimal-menu ul ul li.submenu > a:before {
				margin-top: -1px;
			}
			
			.minimal-menu ul ul li.submenu > a:after {
				margin-top: 2px;
			}
			
			.minimal-menu ul ul li.submenu > a:hover:before,
			.minimal-menu ul ul li.submenu > a:hover:after {
				right: -13px;
			}
			
			
		.minimal-menu ul ul ul {
			left: 100%;
			top: -11px;
		}

		
		/* Megamenu */
		.minimal-menu ul li.megamenu {
			position: static;
		}

			.minimal-menu ul .menu-wrapper {
				position: absolute;
				left: -1px;
				top: 100%;
				margin-top: -5px;
				width: 100%;
				-webkit-border-radius:	10px;
				-moz-border-radius:		10px;
				border-radius:			10px;
			}

			.minimal-menu ul .menu-wrapper a {
				white-space: inherit;
			}

				.minimal-menu ul .menu-wrapper .menu-col {
					position: relative;
					float: left;
					width: 23%;
					margin: 0 1%;
				}
				
					.minimal-menu ul .menu-wrapper h3 {
						margin: 20px 15px;
						font-size: 18px;
						line-height: 22px;
						color: #000;
					}

					.minimal-menu ul .menu-wrapper ul {
						position: relative;
						visibility: hidden;
						height: 100%;
						border: 0;
						opacity: 1;
						background: transparent;
					}
					
					.minimal-menu ul li:hover > .menu-wrapper ul {
						visibility: visible;
					}
						
						.minimal-menu ul .menu-wrapper ul li {
							padding: 0 10px;
						}
						
	.minimal-menu .show-submenu {
		display: none;
	}
}

@media only screen and (max-width: 767px) {
	/* Blue
	----------------*/
	.minimal-menu.clr-blue {
		background: #5bc7fd;
	}

	/* Green
	----------------*/
	.minimal-menu.clr-green {
		background: #65e7a2;
	}

	/* Orange
	----------------*/
	.minimal-menu.clr-orange {
		background: #e1c75f;
	}

	/* Black
	----------------*/
	.minimal-menu.clr-black {
		background: #000;
	}
	
	/* White
	----------------*/
	.minimal-menu.clr-white {
		background: #fff;
	}
	
	.minimal-menu.clr-white h3,
	.minimal-menu.clr-white ul li a {
		color: #000;
		border-bottom-color: rgba(0, 0, 0, 0.08);
	}
	
	.minimal-menu.clr-white h3 {
		background: rgba(0, 0, 0, 0.05);
	}
	
	.minimal-menu.clr-white ul li:hover a,
	.minimal-menu.clr-white ul li.current a {
		background: rgba(0, 0, 0, 0.1);
	}
	
		.minimal-menu.clr-white ul li li:hover a,
		.minimal-menu.clr-white ul li li.current a {
			background: rgba(0, 0, 0, 0.2);
		}
		
			.minimal-menu.clr-white ul li li li:hover a,
			.minimal-menu.clr-white ul li li li.current a {
				background: rgba(0, 0, 0, 0.3);
			}
		
	
	
	.minimal-menu {
		border-color: rgba(100%, 100%, 100%, 0.3);
	}
	
	.minimal-menu-button, .minimal-menu {
		position: fixed;
		right: 0;
		top: 0;
		z-index: 9999;
	}
	
	input.minimal-menu-button {
		display: none;
	}
	
	label.minimal-menu-button {
		display: inline-block;
		width: 50px;
		height: 50px;
		text-transform: uppercase;
		background: #000;
		color: #fff;
		cursor: pointer;
		text-indent: -9999px;
	}
	
	label.minimal-menu-button:before {
		position: absolute;
		content: '';
		width: 30px;
		height: 5px;
		left: 10px;
		bottom: 13px;
		border-top: 13px double #fff;
		border-bottom: 4px solid #fff;
		z-index: 1;
	}
	
	.minimal-menu {
		overflow: auto;
		left: -100%;
		top: 0;
		width: 55%;
		height: 100%;
		opacity: 0;
		-webkit-transition:	left 0.8s, opacity 0.5s;
		-moz-transition:	left 0.8s, opacity 0.5s;
		transition:			left 0.8s, opacity 0.5s;
	}
	
	#mobile-nav:checked + .minimal-menu {
		visibility: visible;
		left: 0;
		opacity: 1;
	}

	.minimal-menu h3, .minimal-menu ul li a {
		border-top: 1px solid transparent;
		border-bottom: 1px solid rgba(100%, 100%, 100%, 0.2);
		color: #fff;
	}
	
	.minimal-menu h3 {
		font-size: 18px;
		line-height: 1em;
		margin: 0;
		padding: 20px 0 20px 40px;
		color: #fff;
		background: rgba(100%, 100%, 100%, 0.10);
	}
	
	.minimal-menu ul {
		margin: 0;
		padding: 0;
	}
	
	.minimal-menu li, .minimal-menu a {
		display: block;
	}
	
	.minimal-menu li {
		position: relative;
	}
	
	.minimal-menu li:hover > a,
	.minimal-menu li.current > a {
		background: rgba(100%, 100%, 100%, 0.2);
	}
	
		.minimal-menu li li:hover > a,
		.minimal-menu li li.current > a {
			background: rgba(100%, 100%, 100%, 0.4);
		}
		
			.minimal-menu li li li:hover > a,
			.minimal-menu li li li.current > a {
				background: rgba(100%, 100%, 100%, 0.6);
			}
			
	
	.minimal-menu ul > li {
		padding-bottom: 0;
	}

	.minimal-menu > ul > li:hover > a,
	.minimal-menu > ul > li.current > a	{
		border-left: 1px solid transparent;
		border-right: 1px solid transparent;
	}
	
		.minimal-menu ul ul a {
			padding-left: 40px;
		}
		
		.minimal-menu ul ul ul a {
			padding-left: 55px;
		}
		
		.minimal-menu ul ul ul ul a {
			padding-left: 70px;
		}
		
			.minimal-menu ul ul li a {
				font-size: 14px;
			}

	.minimal-menu ul li.submenu > a:before,
	.minimal-menu ul li.submenu > a:after {
		top: 50%;
		left: auto;
		right: 12px;
	}
	
	.minimal-menu.clr-white ul li.submenu a:before,
	.minimal-menu.clr-white ul li.submenu a:after {
		background: #999;
	}
	
	.minimal-menu ul li.submenu > a:before {
		margin-top: -2px;
	}
	
	.minimal-menu ul li.submenu > a:after {
		margin-top: 1px;
	}

	
	.minimal-menu .show-submenu {
		position: absolute;
		display: block;
		left: 0;
		top: 0;
		width: 100%;
		height: 40px;
		min-width: 100%;
		min-height: 40px;
		margin: 0;
		opacity: 0;
		-webkit-appearance: none;
	}
	
	.minimal-menu .show-submenu + ul,
	.minimal-menu .show-submenu + .menu-wrapper {
		display: none;
		visibility: hidden;
	}
	
	.minimal-menu .show-submenu:checked + ul,
	.minimal-menu .show-submenu:checked + .menu-wrapper {
		display: block;
		visibility: visible;
	}
}

@media only screen and (max-width: 480px) {
	.minimal-menu {
		width: 70%;
	}
}