Je vous propose un tutoriel sur la réalisation d’un menu latéral animé avec du jQuery. Ce sera, en même temps l’occasion de mettre en application les quelques règles de responsive design que j’avais abordé dans ce billet.

Vous pouvez donc tout de suite télécharger les fichiers source ou bien regarder le résultat en démo :

DémoFichiers sources

L’intérêt est ici d’avoir un menu caché et de le faire apparaître avec un peu de jQuery lors du clic sur le bouton du menu.

Le code HTML


<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>

<meta charset="utf-8" />

<title>Menu latéral par Stratis Bakas pour Webdesignweb.Fr</title>

<meta name="DC.creator" content="Stratis Bakas - http://stratisbakas.com" />
<meta name="robots" content="index, follow" />
<meta name="description" content="Stratis Bakas webdesigner et développeur web à Lyon. Création de sites internet. Design d'interfaces graphiques et ergonomiques." /> 
<meta name="keywords" content="web design, responsive, web development, développeur web" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- feuilles de styles -->
<link type="text/css" href="css/style.css" rel="stylesheet" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300' rel='stylesheet' type='text/css'>

<!-- scripts -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/site.js"></script>

</head>

<body>
	
	<div id="menu">
    	<a href="javascript:;" class="close"></a>
		<ul>
			<li class="active"><a href="#">Accueil</a></li>
			<li><a href="#">Articles</a></li>
			<li><a href="#">Votes</a></li>
			<li><a href="#">Blog</a></li>
		</ul>
	</div>
    
    <div id="page">
    	<a id="logo">
        	<img src="img/logo.png" alt="Logo Tuto menu latéral jQuery" title="Logo Tuto menu latéral jQuery" />
        </a>
        <a href="javascript:;" class="menu_btn"></a>
        
        <div style="height:30px"></div>
        
        <!-- debut des articles -->
        <div id="articles">
        
            <div class="article">
                <img src="img/img1.jpg" width="100%" />
                <h2>Le titre de l'article</h2>
                <p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
                <a class="read_more" href="#">Lire la suite</a>
            </div><!-- .article -->
            
            <div class="article">
                <img src="img/img2.jpg" width="100%" />
                <h2>Le titre de l'article</h2>
                <p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
                <a class="read_more" href="#">Lire la suite</a>
            </div><!-- .article -->
            
            <div class="article">
                <img src="img/img3.jpg" width="100%" />
                <h2>Le titre de l'article</h2>
                <p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
                <a class="read_more" href="#">Lire la suite</a>
            </div><!-- .article -->
            
            <div class="article">
                <img src="img/img4.jpg" width="100%" />
                <h2>Le titre de l'article</h2>
                <p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
                <a class="read_more" href="#">Lire la suite</a>
            </div><!-- .article -->
            
            <div style="clear:both"></div>
            
    	</div><!-- #articles -->
        
    </div><!-- #page -->
	
</body>
</html>


Le code css :


body {
	overflow-x:hidden;
	overflow-y: auto;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	background:#292929;
	margin:0;
}

img {
	width:100%;
	max-width:100%;	
}

#page {
	width:960px;
	position:relative;
	margin-top:20px;
	padding-left:10px;
}

.menu_btn {
	background: #f2b33d url(../img/menu_bg.png) center center no-repeat;
	display:block;
	height:42px;
	width:42px;
	position:absolute;
	top:0;
	right:30px;
}

#menu {
	height:100%;
	position:fixed;
	background:#f2b33d;
	top:0;
	bottom:0;
	height:100%;
	width:240px;
	right:-240px;
	z-index:9999;
}

#menu ul {
	padding:0;
	margin:0;
	list-style:none;
	color:white;
}

#menu ul li {
	height:47px;
	padding-left:30px;
	line-height:47px;
	border-bottom:1px solid #d39b33;
}

#menu ul li.active {
	background:#fbce52;	
}

#menu ul li:hover {
	background:#fbce52;		
}

#menu ul li a {
	color:white;
	text-decoration:none;
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
	display:block;
}

.close {
	display:block;
	background:#373737 url(../img/croix.png) center center no-repeat;
	height:47px;
	width:47px;
	position:absolute;
	top:0;
	left:-47px;	
}

#logo {
	padding-left:20px;
	max-width:309px;
	display:block;
}

.article {
	width:450px;
	float:left;
	margin:10px;
	border-top:3px solid #f2b33d;
	background:#2f2f2f;	
}

.article img {
	border-bottom:3px solid #353535;	
}

h2 {
	font-weight:300;
	color:white;
	padding-left:15px;
}

.article p {
	color:#595959;
	padding:0 15px;
	font-size:11px;
	line-height:18px;
	text-align:justify;	
}

a.read_more {
	color:white;
	padding-left:15px;
	text-decoration:none;
	background:url(../img/fleche.png) no-repeat 140px center;
	height:25px;
	display:block;
	line-height:25px;
	margin-bottom:15px;
}



/* Disable iOS/WinMobile font size changes */
@media screen and (max-width: 600px),
screen and (max-device-width: 480px) {
	html {
		-ms-text-size-adjust: none;
		-webkit-text-size-adjust: none;
	}
}

/* ==== Media Queries ==== */

/* Wide Screen */
@media (min-width : 1280px) {
	
	#page {
		width:1280px;
	}
	
	.article {
		width:400px;
	}
    
}

/* Default Screen */
@media (min-width : 960px) and (max-width : 1280px) { 
	
	#page {
		width:960px;
	}

}

/* Tablet Screen Big */
@media (min-width : 720px) and (max-width : 960px) {
	
	#page {
		width:720px;
	}
	
	.article {
		width:330px;
	}

}

/* Tablet Screen Small */
@media (min-width : 640px) and (max-width : 720px) {
	
	#page {
		width:640px;
	}
	
	.article {
		width:600px;
	}
    
}

/* Mobile Screen Wide */
@media (max-width : 640px) {
	
	#page {
		width:100%;
		padding:0;
	}
	
	.menu_btn {
		right:10px;	
	}
	
	#logo {
		width: 70%;	
	}
	
	.article {
		width:auto;
	}

}

Le code jQuery :


$(document).ready(function() 
{
	$(".close").css("display", "none");

	var isMenuOpen = false;

	$('.menu_btn').click(function()
	{
		if (isMenuOpen == false)
		{
		//alert('je suis dans le bon cas')
			$("#menu").clearQueue().animate({
				right : '0'
			})
			$("#page").clearQueue().animate({
				"margin-left" : '-290px'
			})
			
			$(this).fadeOut(200);
			$(".close").fadeIn(300);
			
			isMenuOpen = true;
		} 
	});
	
	$('.close').click(function()
	{
		if (isMenuOpen == true)
		{
			$("#menu").clearQueue().animate({
				right : '-240px'
			})
			$("#page").clearQueue().animate({
				"margin-left" : '0px'
			})
			
			$(this).fadeOut(200);
			$(".menu_btn").fadeIn(300);
			
			isMenuOpen = false;
		}
	});
});



J’espère une fois de plus que ce tuto vous aura plu et n’hésitez pas à partager