[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > XHTML / CSS > Faire un menu similaire à celui du design PopUp > Lecture du tutoriel

Faire un menu similaire à celui du design PopUp

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Salut les Zér0s. Ici, nous allons apprendre à créer facilement un menu horizontal, comme celui du design PopUp, avec un peu de Javascript et surtout du CSS.

Il est donc recommandé d'avoir lu le cours de M@teo21.
Pour le Javascript, aucune connaissance n'est requise, tout est expliqué dans le tutoriel !

Sommaire du tutoriel :

La structure
L'essentiel : le Javascript
Et en CSS ?
Code complet et compatibilité
Q.C.M.

La structure

Nous allons, dans ce chapitre, créer la structure de la page.

L'(x)HTML

On commence par mettre la structure d'une page Web

:

Code : HTML

<!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" >
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <title>Menu horizontal simple</title>
        </head>
        <body>
                <div id="header"><img alt="Banniere" src="logo_sdz_fr.png" /></div>
                <div id="menu"><a href="#">Accueil</a></div>
 
                <div id="menu_accueil">blabla menu accueil</div>
                <div id="contenu">Blabla du contenu</div>
                <div id="footer">Copyright tout pourri.</div>
        </body>
</html>

Essayer

AAAAAAAAH ! C'est sur ça que je travaille >_<

Oui mais c'est normal, il n'y a pas de CSS !
Le <div> "menu_accueil" est le menu qui apparaîtra au passage de la souris sur "Accueil".

Le CSS

Ici, on va donner du style à notre page.

Code : CSS

BODY {
background:#E8F0F4;
margin:0;
padding:0;
}
#header {
background:#E8F0F4 url(bg_logo.png) repeat-x;
text-align:center;
}
#menu {
margin-top:5px;
padding-left:25px;
background-color:#FFFFFF;
border:dashed #000000 1px;
border-right:none;
border-left:none;
font-family:Arial, Verdana;
}
#menu_accueil {
position:absolute;
display:none; /* On fait disparaître le <div> */
left: 0px;
top:140px;
width:180px;
border:dashed #000000 1px;
border-top:none;
height:auto;
font-family:Arial, Verdana;
background-color:#FFFFFF;
}
#contenu {
background-color:#FFFFFF;
border:solid #000000 1px;
margin-top:10px;
font-family:Arial, Verdana;
}
#footer {
text-align:center;
background-color:#FFFFFF;
border:dashed #000000 1px;
margin-top:10px;
font-family:Arial, Verdana;
}

Essayer

Ça commence à prendre forme

!
Le "display:none;" sert donc à faire disparaître le <div>.

Dans le deuxième chapitre, on va mettre l'essentiel : le Javascript !

L'essentiel : le Javascript

Nous y voici enfin

: le JS (Javascript) !

Je vais d'abord vous donner le code et après, je vous l'expliquerai :

Code

Code : JavaScript

function afficher(element)
{
document.getElementById(element).style.display = 'block';
}
function cacher(element)
{
document.getElementById(element).style.display = 'none';
}

Code : HTML

<!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" >
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <link title="CSS" href="Style.ex3.css" type="text/css" rel="stylesheet" />
                <script type="text/javascript" src="javascript.js"></script>
                <title>Menu horizontal simple</title>
        </head>
        <body>
 
                <div id="header"><img alt="Banniere" src="logo_sdz_fr.png" /></div>
                <div id="menu"><a href="#" onclick="return(false);" onmouseover="javascript:afficher('menu_accueil');" onmouseout="javascript:cacher('menu_accueil');">Accueil</a></div>
                <div id="menu_accueil" onmouseover="javascript:afficher('menu_accueil');" onmouseout="javascript:cacher('menu_accueil');">blabla menu accueil</div>
                <div id="contenu">Blabla du contenu</div>
                <div id="footer">Copyright tout pourri.</div>
        </body>
</html>

Voilà : vous remarquerez qu'il y a peu de choses qui changent !

Explications

Code : JavaScript

1 2	onmouseover="javascript:afficher('menu_accueil);" onMouseout="javascript:cacher('menu_accueil);"

Voici les lignes que j'ai rajoutées à "menu" et à "menu_accueil"

.

Code : JavaScript

1	javascript:afficher('menu_accueil);

Code : JavaScript

1	javascript:cacher('menu_accueil);

Ce morceau de code appelle la fonction afficher / cacher, qui contient ça :
Code : JavaScript

1	document.getElementById(element).style.display = 'valeur';

Décomposons ce code :
Code : JavaScript

1	document.getElementById(element)

Sert à sélectionner l'élément ayant l'ID donné (element).
Code : JavaScript

1	style.display = 'valeur'

Ce code sert à changer ou à donner la valeur à la propriété CSS display.
Donc "document.getElementById('valeur').style.display = 'none';" sert à faire disparaître l'élément "valeur" et "document.getElementById('valeur').style.display = 'block';" sert à le faire apparaître.

C'est tout pour ces (courtes) explications

Et en CSS ?

Oui, on peut aussi faire ça en CSS ; d'ailleurs, PopUP utilise cette technique.
Merci à dysmann pour le code.

Code : HTML

<!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" >
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <link title="CSS" href="Style.ex4.css" type="text/css" rel="stylesheet" />
                <title>Menu horizontal simple</title>
        </head>
        <body>
                <div id="header"><img alt="Banniere" src="logo_sdz_fr.png" /></div>
                <div id="menu"><a href="#">Accueil</a></div>
                <div id="menu_accueil">blabla menu accueil</div>
                <div id="contenu">Blabla du contenu</div>
                <div id="footer">Copyright tout pourri.</div>
        </body>
</html>

Code : CSS

BODY {
background:#E8F0F4;
margin:0;
padding:0;
}
#header {
background:#E8F0F4 url(bg_logo.png) repeat-x;
text-align:center;
}
#menu {
margin-top:5px;
padding-left:25px;
background-color:#FFFFFF;
border:dashed #000000 1px;
border-right:none;
border-left:none;
font-family:Arial, Verdana;
}
#menu_accueil {
position:absolute;
display:none; /* On fait disparaître le <div> */
left: 0px;
top:140px;
width:180px;
border:dashed #000000 1px;
border-top:none;
height:auto;
font-family:Arial, Verdana;
background-color:#FFFFFF;
}
#menu:hover+#menu_accueil, #menu+#menu_accueil:hover{display:block}
#contenu {
background-color:#FFFFFF;
border:solid #000000 1px;
margin-top:10px;
font-family:Arial, Verdana;
}
#footer {
text-align:center;
background-color:#FFFFFF;
border:dashed #000000 1px;
margin-top:10px;
font-family:Arial, Verdana;
}

Essayer

Cette explication m'a été donnée par dysmann puisque je ne connais pas cette méthode ; merci à lui (j'ai modifié quelques phrases) !

Citation : dysmann

C'est simple, tout d'abord on cache le div : display:none; puis, quand on bouge sur le titre (h1:hover) et sur le div lui-même (div:hover) on affiche le div: display :block;

Ça nous donne donc : h1:hover, div:hover{display:block}
Mais il y a un problème ! Ce n'est pas au titre que l'on veut appliquer display:block, mais au div, quand le titre qui est juste avant dans le code html est survolé. Pour ça, on utilise l'opérateur + :

Code : CSS

1	h1:hover + div, div:hover{display:block}

Cela ne marche que si le div est juste après le titre (si par exemple, il y avait disons une image entre le titre et le div, on aurait marqué : h1:hover+img+div, div:hover.

Voilà pour les explications, encore merci à dysmann !

Code complet et compatibilité

Dans ce chapitre, je vais juste vous donner le code complet et vous parler de la compatibilité !

Code complet

Code : JavaScript

function afficher(element)
{
document.getElementById(element).style.display = 'block';
}
function cacher(element)
{
document.getElementById(element).style.display = 'none';
}

Code : HTML

<!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" >
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <link title="CSS" href="Style.ex3.css" type="text/css" rel="stylesheet" />
                <script type="text/javascript" src="javascript.js"></script>
                <title>Menu horizontal simple</title>
        </head>
        <body>
 
                <div id="header"><img alt="Banniere" src="logo_sdz_fr.png" /></div>
                <div id="menu"><a href="#" onclick="return(false);" onmouseover="javascript:afficher('menu_accueil');" onmouseout="javascript:cacher('menu_accueil');">Accueil</a></div>
                <div id="menu_accueil" onmouseover="javascript:afficher('menu_accueil');" onmouseout="javascript:cacher('menu_accueil');">blabla menu accueil</div>
                <div id="contenu">Blabla du contenu</div>
                <div id="footer">Copyright tout pourri.</div>
        </body>
</html>

Code : CSS

BODY {
background:#E8F0F4;
margin:0;
padding:0;
}
#header {
background:#E8F0F4 url(bg_logo.png) repeat-x;
text-align:center;
}
#menu {
margin-top:5px;
padding-left:25px;
background-color:#FFFFFF;
border:dashed #000000 1px;
border-right:none;
border-left:none;
font-family:Arial, Verdana;
}
#menu_accueil {
position:absolute;
display:none; /* On fait disparaître le <div> */
left: 0px;
top:138px;
width:180px;
border:dashed #000000 1px;
border-top:none;
height:auto;
font-family:Arial, Verdana;
background-color:#FFFFFF;
}
#contenu {
background-color:#FFFFFF;
border:solid #000000 1px;
margin-top:10px;
font-family:Arial, Verdana;
}
#footer {
text-align:center;
background-color:#FFFFFF;
border:dashed #000000 1px;
margin-top:10px;
font-family:Arial, Verdana;
}

Essayer

Et voilà, ça marche !

Compatible ou pas ?

Comme vous le savez sûrement, il existe plusieurs navigateurs Internet. Les plus utilisés d'entre eux sont Firefox et Internet Explorer, mais (eh oui, il y a un mais

) il y en a d'autres.

Le problème, c'est que tout les navigateurs n'affichent pas la même chose : la plupart du temps, c'est Internet Explorer qui ne comprend pas certaines choses

et c'est parfois très embêtant !

Voici la liste des navigateurs les plus connus et leur compatibilité avec le menu :

Firefox : OK !
Internet Explorer 6 : OK !
Internet Explorer 7 : OK !
Opéra : OK !
Safari : OK !
Konqueror : OK !
Flock : OK !

Q.C.M.

Quelle est la propriété CSS qui permet de rendre un élément invisible ?

display:block;.
display:none;.
getElementById();.
onMouseover.

À quoi sert cette fonction ?

Code : JavaScript

1	getElementById();

Elle sert à rendre un élément visible.
Elle sert à prendre un élément.
Elle sert à rendre un élément invisible.

Que fait ce morceau de code ?

Code : JavaScript

1	document.getElementById('Gouargh').style.color= '#000000';

Il donne au texte contenu dans Gouargh une couleur noire.
Il rend invisible tout ce qui est noir dans Gouargh.
Il rend visible tout ce qui est noir dans Gouargh.
Autre.

Statistiques de réponses au QCM

Voilà, le tutoriel touche à sa fin

, et vous savez maintenant faire un menu comme celui du design PopUp !

N'hésitez pas à me faire des remarques et à me montrer vos problèmes (si vous en avez !).

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité

Faire un menu similaire à celui du design PopUp

La structure

L'(x)HTML

Le CSS

L'essentiel : le Javascript

Code

Explications

Et en CSS ?

Code complet et compatibilité

Code complet

Compatible ou pas ?

Q.C.M.

	Auteur : Adri22 Note : 13 / 20 (14 votes) Visualisations : 27 061 Plus d'informations Créé : le 17/06/2007 à 00:26:31 Modifié : le 30/08/2008 à 15:07:57 Avancement : 100% Licence : Creative Commons BY-NC-ND