Exemple d’un Top Menu Responsive

La barre haute de navigation est devenue sans conteste l’élément essentiel pour la navigation sur mobile et tablette. Si de nombreux plugins existent pour créer facilement un slider, il est peut-être nécessaire de créer son propre panel sortant du côté gauche de la page. Créer son propre top menu responsive est la garantie d’en avoir le contrôle total. Par exemple, les plugins proposés peuvent inciter à dupliquer les liens du menu de navigation.
Le fonctionnement de ce panel de navigation repose sur le css et ses transitions et aussi sur JQuery, qui nous permet de lancer les transitions avec des ajouts de classes sur le panel, qui est situé en dehors de l’écran, et sur le content, qui glissera vers la gauche afin de laisser de la place au panel.

Avant de débuter la lecture, jetez un oeil à la démo.

Pour commencer, je vous propose de mettre en place la structure de notre page HTML.

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Slider Panel Left</title>
		<link rel="stylesheet" href="sliderstyle.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="sliderleft.js"></script>
	</head>
	<body>
		<div id="sliderleft">
			
		</div>
		
		<div id="container">
			
			<nav id="topmenu">
				<div id="topmenu-hamburger"></div>
				
				<a id="brand" href="#">BRAND</a>
				
				<ul>
					<li><a href="#">Item 1</a></li>
					<li><a href="#">Item 2</a></li>
				</ul>
				
				<form>
					<input type="text" placeholder="chercher..." />
					<input type="submit" value="?" />
				</form>
			</nav>
			
			<div id="page">
				<:-- le content -->
			</div>
			
			
		</div>
		
	</body>
</html>

Le div d’id « topmenu-hamburger » sera affiché uniquement sur les mobiles et les tablettes et permettra d’afficher notre panel de navigation. Le div d’id « sliderleft » est notre panel. Il sera rempli avec les liens du nav et ce avec JQuery. Nous évitons ainsi la duplication de code.

Voici le code css pour cette page:

body{
	margin:0;padding:0;
	overflow-x:hidden;
	font-size:16px;
}

/* container */

#container{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transition: transform 0.6s;
}

/* panelleft */

#sliderleft{
	min-height:100%;
	background:#DBE2E9;
	position:fixed;
	top:0;left:-50%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width:50%;
	transition: transform 0.6s;
}

#sliderleft ul{
	list-style:none;
	margin:0px;padding:0px;
}
#sliderleft ul li{
	padding:4px;
}
#sliderleft ul li a{
	font-size:16px;
	color:black;
	text-decoration:none;
}

.sliderleft-transition{
	transform: translateX(100%);
}

.sliderleft-shadow{
	box-shadow: 3px 0 5px -2px black;
}

#slider-close{
	padding:10px;
	border-radius:50%;
	float:right;
	border:2px solid darkgray;
	cursor:pointer;
	font-weight:bold;
	margin:5px;
	transition: transform 0.4s;
	background:white;
	color:black;
	font-size:18px;
}
#slider-close:hover{
	transform: rotateY(360deg);
}

/* page content */

#page{
	margin-top:65px;
	padding:15px;
}

.content-transition{
	transform: translateX(50%);
}

/* top menu */
#topmenu{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	background:black;
	height:60px;
	font-size:20px;
	color:white;
}
#topmenu ul{
	list-style:none;
	margin:0;padding:0;
	margin-top:20px;
	padding-left:10px;
	float:left;
}
#topmenu ul li{
	display:inline;
	padding-left:7px;
}
#topmenu ul li a{
	color:lightgrey;
	text-decoration:none;
}

#topmenu ul li a:hover{
	color:yellow;
}

#brand{
	font-size:30px;
	float:left;
	color:darkgrey;
	text-decoration:none;
	font-weight:bold;
	font-style:italic;
	margin-top:15px;
	margin-left:10px;
}

#brand:hover{
	color:red;
}

#topmenu-hamburger{
	float:left;
	width:50px;height:50px;
	margin-top:5px;
	background-image:url(hamburger.png);
	cursor:pointer;
	display:none;
}

#topmenu form{
	display:block;
	float:right;
	margin-top:5px;
}

#topmenu input[type="text"]{
	height:30px;
	font-size:20px;
	padding:5px;
	border-radius:4px;
	border:1px solid lightgrey;
	width:150px;
}

#topmenu input[type="submit"]{
	border-radius:50%;
	border:1px solid lightgrey;
	width:30px;
	height:30px;
	margin-top:10px;
	margin-right:10px;
}

/* responsive */

@media screen and (max-width: 480px) {
	#topmenu-hamburger {
		display:block;
	}
	#topmenu ul{
		display:none;
	}
	#topmenu input[type="text"]{
		width:95px;
		font-size:15px;
	}
	#brand{
		font-size:20px;
		margin-top:20px;
		margin-left:3px;
		
	}
}

@media screen and (max-width: 300px) {
	#topmenu form{
		display:none;
	}
}

Nous utilisons les medias queries afin d’afficher et de cacher notre bouton « hamburger » permettant à l’utilisateur d’afficher le panel de navigation. Ce dernier est placé en dehors de l’écran avec left:-50% et sera affiché à l’écran grâce à la classe .sliderleft-transition qui fera effectuer une translation de -50% à 0% à notre panel. De même, la classe content-transition permettra de faire glisser le contenu de notre page afin de laisser la place à notre panel.
La propriété « overflow-y: hidden » pour le body permet de ne pas avoir une barre de défilement latérale quand nous faisons glisser le content vers la gauche.

Voici le code javascript.

$( document ).ready(function() {
	
	isOpen = false;
	menuAdd = false;
	
	$('#topmenu-hamburger').click(function(event) {
		
		if(isOpen===false){
			open();
			} else {
			close();	
		}
		event.stopPropagation();
	});
	$('#container').click(function() {
		close();
	});
	
	
	$(document).on('click', "#slider-close" , function() {
		close();		
	});
	
	function open(){
		isOpen = true;
		if(menuAdd === false){
			text = "";
			$('#topmenu ul li a').each(function() {
				
				text = text + '<li><a href="'+($(this).attr('href'))+'">'+($(this).text())+'</a></li>';
				
			})
			
			
			text = 
			'<div id="slider-close">X</div>'+
			'<ul>'+text+'</ul>'; 
			
			$("#sliderleft").append(text);
			menuAdd = true;
		}	
		$('#container').addClass("content-transition");
		$('#sliderleft').addClass("sliderleft-transition");
		$('#sliderleft').addClass("sliderleft-shadow");
	}
	
	function close(){
		$('#container').removeClass("content-transition");
		$('#sliderleft').removeClass("sliderleft-transition");
		$('#sliderleft').removeClass("sliderleft-shadow");
		isOpen = false;
		
	}
	
});

Ce code permet dans un premier temps de récupérer tous les liens du menu de navigation et de les ajouter à notre panel de navigation. Dans un second temps, le script ajoute ou enlève les classes de transition au content et au panel.

Publié dans HTML5

quand j’aurai le temps

  • les filtres wordpress
  • plugin wordpress et enregistrement de données
  • les wordpress custom post type
  • la bdd d'un blog wordpress
  • la balise more de wp
  • personnaliser une galerie wp
  • gérer les longueurs des extraits de wp
  • les animations css3
  • le memento symphony2
  • le squelette d'une page html5
  • liste sur plusieurs colonnes
  • le responsive design
  • exemple d'un jeu basique en html5
  • la réplication des bases de données
  • mettre en place une architecture en silo avec wp
  • parser un fichier xml (donc un rss) avec php5
  • mettre en place lightbox sans plugin
  • améliorer les performances de son wp
  • ajouter un bouton à l'éditeur de texte de wp
  • ...