Il vous arrive de vous demander comment mettre une information en avant dans votre site? Alors j’ai la solution pour vous, il suffit simplement de faire apparaître un bandeau en haut du contenu au chargement de la page.

Je vais donc vous expliquer comment faire fonctionner ceci avec quelques lignes de javascript.
J’ai donc créé une page html pour l’exercice et j’ai créé aussi deux versions du bandeau : une, avec le bandeau en haut de la page dans le contenu et une autre, avec le bandeau en position:fixed et un z-index:9999 afin de s’assurer qu’il passe au dessus du contenu.

Je vous laisse donc regarder les deux démos ci-dessous et ensuite je passe aux explications :

Bandeau normalBandeau fixed

Bien sûr certains diront qu’un message constamment affiché en haut peut gâcher le design ou même être gênant.
C’est pour cela que j’ai créé un bouton de fermeture (en forme de croix) du bandeau qui permet à tout moment de faire disparaître ce dernier.

Dans le fichier style.css j’ai utiliser un gif animé pour ma croix de fermeture, mais uniquement en :hover pour que l’on sache qu’une action est disponible.

fermer

Vous allez donc insérer le code Javascript directement dans votre page html.
Bandeau position normale
Commençons avec le bandeau en version normale :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>Barre JS WebDesignWeb.fr | Faites ressortir un message important</title>

  <link rel="stylesheet" media="screen" href="css/style.css" />
 
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
  
  <script type="text/javascript">

   $(document).ready(function(){

//au chargement de la page je règle le marginTop de #barre à 0 (il etait fixé à -50px dans le css) en 500ms

		     $('#barre').animate({
				marginTop: "0",
			}, 500);

//au clic sur #fermer qui est la croix j'anime le marginTop de #barre à -30px pour le faire remonter et laisser le border bottom apparent

			$("#fermer").mousedown(function(){      

						$('#barre').animate({ 
								marginTop: "-30px",
						}, 500);
					
			   });
	 });
  </script>
  

</head>
<body>

<div id="barre">
	Bienvenue sur l'exemple du tuto de <a href="http://www.webdesignweb.fr">WebDesignWeb.fr</a>. Rejoignez-moi sur <a href="http://twitter.com/#!/stratweb">Twitter</a>
	<div id="fermer"></div>
</div>

</body>
</html>

Le code css :

@charset "UTF-8";
/* CSS Document */

    
a {
	text-decoration: none;
	color: #6E052E;
}

#barre {
	width: 100%;
	background:#BFD626;
	padding:8px 0;
	font-family:  "Trebuchet MS";
	text-align: center;
	font-size:11px;
	margin-top:-50px;
	border-bottom: 10px solid #2e1b27;
}

#fermer {
	background: url(../img/fermer.png);
	width: 18px;
	height:18px;
	display: block;
	cursor: pointer;
	float:right;
	margin-right:30px;
}

#fermer:hover {
/* J'utilise un gif en :hover pour animer la croix de fermeture */
	background: url(../img/fermer.gif);
}

Bandeau position:fixed
Voici maintenant le bandeau en position:fixed. Le html ainsi que le css sont quasiment les mêmes :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>Barre JS WebDesignWeb.fr | Faites ressortir un message important</title>

  <link rel="stylesheet" media="screen" href="css/style.css" />
 
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
  
  <script type="text/javascript">

   $(document).ready(function(){

//au chargement de la page je règle le marginTop de #barre à 0 (il etait fixé à -50px dans le css) en 500ms

		     $('#barre').animate({
				marginTop: "0",
			}, 500);

//au clic sur #fermer qui est la croix j'anime le marginTop de #barre à -35px pour le faire remonter et laisser le border bottom apparent
			
			$("#fermer").mousedown(function(){      

						$('#barre').animate({ 
								marginTop: "-35px",
						}, 500);
					
			   });
	 });
  </script>
  

</head>
<body>

<div id="barre">
	Bienvenue sur l'exemple du tuto de <a href="http://www.webdesignweb.fr">WebDesignWeb.fr</a>. Rejoignez-moi sur <a href="http://twitter.com/#!/stratweb">Twitter</a>
	<div id="fermer"></div>
</div>

</body>
</html>

Le code css :

@charset "UTF-8";
/* CSS Document */

    
a {
	text-decoration: none;
	color: #6E052E;
}

#barre {
	width: 100%;
/*  #barre en position:fixed afin de le garder à l'écran tout le temps  */
        position: fixed;
/*  z-index:9999 pour que le bandeau soit toujours au dessus des autres elements  */
	z-index: 9999;
	background:#BFD626;
	padding:8px 0;
	font-family:  "Trebuchet MS";
	text-align: center;
	font-size:11px;
	margin-top:-50px;
	border-bottom: 10px solid #2e1b27;
}

#fermer {
	background: url(../img/fermer.png);
	width: 18px;
	height:18px;
	display: block;
	cursor: pointer;
	float:right;
	margin-right:30px;
}

#fermer:hover {
/* J'utilise un gif en :hover pour animer la croix de fermeture */
	background: url(../img/fermer.gif);
}

J’espère que ce tuto vous a plu… partagez et encore partagez et à bientôt…

21 comments
intégrateur web pas cher
intégrateur web pas cher

On a intérêt à bien suivre le script dès sa formulation ou faire du copier coller suivi d’une petite adaptation pour ne pas recevoir la mauvaise surprise de notification d’erreur.

thib190386
thib190386

Bonsoir, J'ai mis en place ton Script pour un message pour l'utilisation de Cookie sur mon site. Est ce que tu aurait l'idée d'une ligne de code pour que quand la personne ferme le bandeau, il n’apparaît plus sur les autres pages du site ( j'ai mis le script sur le head '' unique '' du site .. ) Merci bonne soirée

boutique pas cher
boutique pas cher

Merci pour le tuto. Le code peut aussi servir à afficher le bandeau demandé par la CNIL à propos des cookies. Merci pour le partage et bonne continuation, Maxime

little-dream
little-dream

Une autre version ici : Fiddle avec moins de JS, et l'utilisation de css pour l'animation...

West Valley High
West Valley High

Je viens de mettre en place sur un de mes sites, ça marche super. Merci.

françoisdu62
françoisdu62

Bonjour je sais pas si je suis au bonne endroit mais je suis entrain de faire un site pour mon club de basket et je voudrais savoir comment on créer des volets(je c'est pas si sa s’appelle comme sa) comme ceci (http://www.bcmbasket.com/) les volets saison,club... merci d'avance

Cocoduf
Cocoduf

Merci beaucoup Mr, mais est-ce que c'est possible de le faire sans jQuery ??

admin
admin

oui c'est possible mais cela doit être bien plus long

admin
admin

sans Javascript ou sans jQuery?

Cocoduf
Cocoduf

D'accord :) C'est pas grave merci quand même et bonne continuation !!

Adrien
Adrien

Excellent tuto c'est impec pour ce que je cherchais ! J'ai juste une amélioration que j'aimerais avoir mais je vois pas trop comment faire : j'affiche cette barre pour indiquer que la modification faite par l'utilisateur est réussi. Cependant quand je vais trop bas dans la page on ne voit plus le bandeau apparaître. As-tu une idée de comment le faire apparaître tout le temps quelque soit l'endroit où l'utilisateur est dans la page ? Merci ;)

admin
admin

Si j'ai bien compris tu trouveras ta réponse dans "demo avec bandeau en position fixed"

Quentin
Quentin

Salut ! Depuis la decouverte de ton blog, je le suis frequement ! Ce tuto est vraiment bien, mais tu nous mets en haleine quand tu glisse ces effets au survol sur les 3 carres de bas de page dans ta demo ! Prochainement un tuto sur ce genre d'effet ?

admin
admin

Chose promise chose dûe Voici le tuto en question N'hésites pas à faire tourner

admin
admin

Je vais en faire un tuto dès que je peux c'est prévu ;) et merci de ton soutien

ash
ash

Yop ! Merci beaucoup pour ce tuto! il m'a beaucoup servi. Mais il est surtout utile pour une page web unique (sans rechargement d'une page à une autre). Car le problème, c'est que la barre apparaît sur toutes les pages. Imaginons que j'arrive sur la page d’accueil (index.php), et que je ferme le bandeau. Lorsque j'irais sur une autre page, celle-ci ré-apparaîtra alors que j'avais fermé le bandeau précédemment. Vu que j'ai un site en version bêta, j'ai préféré utiliser quand même ton script, histoire d'être sur que les gens voient le message :p Bonne continuation peace.

admin
admin

Merci beaucoup pour ton commentaire. ça me fait plaisir de voir que mes tutos sont utilisés. Bonne continuation à toi aussi et à bientôt sur webdesignweb.fr

Sebbz
Sebbz

One two one two, this is a test.

admin
admin

A tous les utilisateurs j'essaye de combattre les spams donc je fais des tests et il se peut que certains de vos messages soient filtrés donc pas d'inquietudes