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…