Accueil > jquery > vertical-sliding-panel

{ Vertical sliding panel }

Introduction

Superbre panneau latéral qui développe un panneau lorsqu'on clique dessus, idéal pour les sites qui souhaite gagner de la place tout en gardant une navigation fonctionnelle.

Voir une démo du panel (côté gauche position absolue)

Voir une démo du panel (côté droite position absolue)

Voir une démo du panel (côté gauche position fixe)

slide_panel

left sliding panel

Téléchargement

telecharger telecharger telecharger

Placement des fichiers

Décompressez l'archive que vous venez de téléchager, elle contient un dossier qui lui-même contient les trois différents exemples de Sliding Panel vertical. Choississez celui que vous allez intégrer à votre site et effacez les deux autres.

style.css

Les images (à placer dans le dossier 'images') :

plus.jpg
minus.png

La partie html

<div class="panel"> 
	<h3>Sliding Panel</h3> 
	<p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p> 
 
	<p>This panel is placed on the right instead of on the left. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p> 
 
	<h3>A Little Something About Me</h3> 
		<img class="right" src="images/jon_image.jpg" alt="Jon Phillips" /> 
	<p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p> 
 
	<div style="clear:both;"></div> 
 
	<div class="columns"> 
		<div class="colleft"> 
		<h3>Navigation</h3> 
			<ul> 
				<li><a href="http://spyrestudios.com/" title="home">Home</a></li> 
				<li><a href="http://spyrestudios.com/about/" title="about">About</a></li> 
				<li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li> 
				<li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li> 
				<li><a href="http://spyrestudios.com" title="blog">Blog</a></li> 
			</ul> 
		</div> 
	
		<div class="colright"> 
			<h3>Social Stuff</h3> 
			<ul> 
				<li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li> 
				<li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li> 
				<li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li> 
				<li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li> 
				<li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li> 
			</ul> 
		</div> 
	</div> 
<div style="clear:both;"></div> 
 
</div> 
<a class="trigger" href="#">infos</a>

N'oubliez pas d'appeler la feuille de style dans l'en-tête de votre page comme suit :

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
lt;/p

Le css

body {
background:#1a1a1a;
text-align:left;
color:#666;
width:700px;
font-size:14px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
}

a:focus {
outline: none;
}

h1 {
font-size: 34px;
font-family: verdana, helvetica, arial, sans-serif;
letter-spacing:-2px;
color:#9FC54E;
font-weight:700;
padding:20px 0 0;
}

h2 {
font-size: 24px;
font-family: verdana, helvetica, arial, sans-serif;
color:#444444;
font-weight: 400;
padding: 0 0 10px;
}

h3 {
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: 700;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 0;
}

img{
float: right;
margin: 3px 3px 6px 8px;
padding: 5px;
background: #222222;
border: 1px solid #333333;
}

p {
color:#cccccc;
line-height:22px;
padding: 0 0 10px;
margin: 20px 0 20px 0;
}

img {
border:none;
}

#container {
clear: both;
margin: 0;
padding: 0;
}

#container a{
float: right;
background: #9FC54E;
border: 1px solid #9FC54E;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

#container a:hover{
float: right;
background: #a0a0a0;
border: 1px solid #cccccc;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}


.content {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
color:#ffffff;
background:#333333;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
margin: 30px 0 50px;
padding: 15px 0;
}

.content p {
margin: 10px 0;
padding: 15px 20px;
}

.panel {
position: absolute;
top: 50px;
right: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
width: 330px;
height: auto;
padding: 30px 130px 30px 30px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 15px 20px 40px;
font-weight: 700;
background:#333333 url(images/plus.png) 15% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 20px 20px 40px;
font-weight: 700;
background:#222222 url(images/plus.png) 15% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;

}

a.active.trigger {
background:#222222 url(images/minus.png) 15% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

hr{
background-color: #333333;
height: 1px;
}

Jquery

Maintenant que la structure et le style sont en place il ne nous reste plus qu'à appeler la fonction jQuery qui va animer notre panel et le rendre utilisable, car il faut bien le dire sans jQuery, pas de panel (ou du moins juste une languette au bord de votre page qui ne servira à rien). Donc voici le code à copiez-collez dans entre les balises <head> et </head> de votre page.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$(".trigger").click(function(){
			$(".panel").toggle("fast");
			$(this).toggleClass("active");
			return false;
		});
	});
</script>

Voilà votre panel jQuery est en place, mettez-y ce que vous voulez et appréciez le gain de place !

Configuration

Si vous avez suivi le tuto voici quelques options de configuration pour votre panel, pour ceux qui ont téléchargé la source adéquate directement vous n'aurez en principe pas à modifier votre panel.

Mettre le panel à droite

Pour changer le sliding panel de côté et le mettre à droite, repérer les propriétés suivantes :

a.trigger{
 position: absolute;
 top: 80px; left: 0;
 }

 .panel {
 position: absolute;
 top: 50px; left: 0;
 }

Ainsi que les bords arrondis

border:1px solid #444444;
 -moz-border-radius-topleft: 20px;
 -webkit-border-top-left-radius: 20px;
 -moz-border-radius-bottomleft: 20px;
 -webkit-border-bottom-left-radius: 20px;

et remplacez les par celle-ci :

a.trigger{
 position: fixed;
 top: 80px; left: 0;
 }

 .panel {
 position: fixed;
 top: 50px; left: 0;
 }

On change aussi les arrondis de côté :

border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;

Fixer le panel

Pour faire en sorte que votre panel soit toujours visible lors d'un scroll, vous aurez à modifier deux ou trois choses dans les CSS, comme d'habitude, rien de bien compliqué ^^

Repérez les propriétés suivantes et modifiez-les comme indiqués.

a.trigger{
 position: fixed;
 top: 80px; left: 0;
 }

 .panel {
 position: fixed;
 top: 50px; left: 0;
 }

Modifier / Enlever la transparence du panel

Pour modifier ce paramètre rendez-vous dans la feuille de style, trouvez les propriétés filter et opacity et modifiez-les selon votre envie.

filter: alpha(opacity=85);
  opacity: .85;

Voir une démo du panel (côté gauche position absolue)

Voir une démo du panel (côté droite position absolue)

Voir une démo du panel (côté gauche position fixe)