Flashxpress » Menu vertical déroulant

Nous allons créer, ici, un menu vertical déroulant à base de calques, de CSS et d’extensions et surtout sans image. Désolée, je sais pas faire d’intro ))

Voici le résultat du tutorial et la feuille de style finale.

Les extensions

Notre première étape consiste à charger les extensions nécessaires pour ce tutorial :

- chez Project Seven :Auto Hide Layers et Auto Layers;
- de Yaromat : Layer to Style;
- et de Dazdezines : Netscape/Opera resize Fix.
Nous aborderons très brièvement Productivity tools de Project Seven (Extension payante)

Les calques

Créons une nouvelle page dans DMX, nommons-la index.html.
Nous allons créer un premier bloc qui va nous servir à contenir le menu. Pour cela, insérons un calque (Insertion > Objets mise en forme > Calque) et nommons le navMenu.

Dans l’inspecteur de Propriétés, nous lui avons attribué les valeurs suivantes : 10px du bord Gauche, 13px du Sommet, 130px de Large, 54px de Haut, une position 1 (index-Z : ordre de superposition des calques) et une couleur blanche d’arrière-plan. Si vous regardez de plus près le code HTML, vous constaterez que ces valeurs ont été traduites en définition de style…

Dans ce calque, tapons le texte des différentes rubriques du menu principal…

Faisons des liens fictifs en sélectionnant chaque rubrique et en tapant « javascript:; » dans l’emplacement Lien de l’inspecteur de Propriétés.

Ensuite, créons autant de calques que de rubriques. Nommons-les « navNomdumenu », par exemple : navDreamweaver. Pour l’instant, leur placement importe peu, nous verrons cela plus tard. Toutefois, pour les distinguer, dans l’inspecteur de Propriétés, donnons-leur une hauteur de 100px, une largeur de 200px. Placons-les respectivement à 150/175/200px du bord Gauche et 10/20/30px du Sommet. Attribuons leur à chacun une couleur propre et surtout faisons en sorte qu’ils soient cachés (visibilité:hidden).

Vérifions dans le panneau Création, onglet Calques, que les calques des trois rubriques soient bien cachés (hidden) :

{mospagebreak}

En sélectionnant tous les calques, vous devez obtenir ceci :

Nous allons maintenant rattacher les rubriques du menu principal à leur calque respectif en utilisant notre première extension qui va nous permettre de l’afficher au passage de la souris sur la rubrique, Auto Layers.
Sélectionnons le premier lien, Dreamweaver. Allons dans le panneau Inspecteur de balise, onglet Comportements > Studio 7 > Auto Layers.
La fenêtre Auto Layers s’ouvre, sélectionnons le calque correspondant à la rubrique Dreamweaver, »navDreamweaver » puis cliquons sur Show Layers (montrer le calque). La mention Show apparaît à côté du calque. Puis OK.
Faire la même chose pour les rubriques Flash et Forum et leur calque respectif.

Par défaut, l’évènement appliqué à l’apparition du calque est OnClick. Changeons-le en cliquant sur la flèche entre l’évènement et l’action pour faire dérouler la liste d’évènement et choisir OnMouseOver.

Une fois le calque affiché, nous devons le cacher de nouveau. En effet, testons, si nous passons la souris sur le calque et que nous survolons ensuite la page, le calque reste visible.
Sélectionnons la balise body dans le sélecteur de balise (tous vos calques apparaissent à l’écran) puis dans le panneau Inspecteur de balise, onglet Comportements > Studio V > Auto Hide Layers.

Sélectionnons AutoHide pour tous les calques, sauf bien sûr le navMenu qui doit rester afficher, puis OK.

Nous allons encapsuler les calques des rubriques dans le calque du navMenu, puis le calque navMenu dans un bloc Content.
Pour cela, il nous suffit de déplacer la balise de fermeture du navMenu afin d’englober toutes les propriétés des calques et de créer un bloc Content (<div id= »content »></div>) comme tel :

<div id= »content »>
<div id= »navMenu » style= »position:absolute; width:130px; height:54px; z-index:1; left: 10px; top: 13px; background-color: #FFFFFF; layer-background-color: #FFFFFF; »>
<p><a href= »javascript:; » onmouseover= »P7_autoLayers(0,’navDreamweaver’) »>Dreamweaver</a><br / >
<a href= »javascript:; » onmouseover= »P7_autoLayers(0,’navFlash’) »>Flash</a><br / >
<a href= »javascript:; » onmouseover= »P7_autoLayers(0,’navForum’) »>Forum </a> </p>
<div id= »navDreamweaver » style= »position:absolute; width:200px; height:100px; z-index:2; left: 150px; top: 10px; visibility: hidden; background-color: #00FF66; layer-background-color: #00FF66; « >
</div>
<div id= »navFlash » style= »position:absolute; width:200px; height:100px; z-index:3; left: 175px; top: 20px; visibility: hidden; background-color: #FF3300; layer-background-color: #FF3300; »>
</div>
<div id= »navForum » style= »position:absolute; width:200px; height:100px; z-index:4; left: 200px; top: 30px; visibility: hidden; background-color: #CCCCCC; layer-background-color: #CCCCCC; »>
</div>
</div>
</div>

Dans le panneau Création, onglet Calques, vous obtenez ceci :

Dernière étape pour nos calques : les fixer. Pour cela, nous allons appliquer l’extension Netscape/Opera resize Fix : Commandes > Dazdezines > Netscape/Opera resize Fix.

Enregistrons la page et testons.

{mospagebreak}

La feuille de style

Dans un premier temps, définissons les propriétés de style du body dans les balises <head> de la façon suivante :

La propriété « margin » détermine la marge du bloc par rapport aux bords extrêmes de la page.
La propriété « padding » détermine l’espacement entre la bordure et le contenu du bloc.
Le background-color (couleur de fond), la font-family (police du body ici) et la font-size (taille de la police) complétant le tout…

Maintenant, déplaçons les définitions de style des calques du body dans le head pour ensuite, exporter ces définitions dans une feuille de style externe. Allons dans Commandes > Layer2style, la fenêtre Layer2style s’ouvre :

Nous avons la liste des calques sur la gauche. Sélectionnons Layer to style pour exporter les styles dans le head (style to layer : pour importer dans le body). Laissons les valeurs par défaut et OK. Vérifions que tout a bien été exporté. Voici ce que vous devez obtenir :

<body onLoad= »P7_autoHide(‘navDreamweaver’,'navFlash’,'navForum’) »>
<div id= »content »>
<div id= »navMenu »>
<p><a href= »javascript:; » onmouseover= »P7_autoLayers(0,’navDreamweaver’) »>Dreamweaver</a><br />
<a href= »javascript:; » onmouseover= »P7_autoLayers(0,’navFlash’) »>Flash</a><br />
<a href= »javascript:; » onmouseover= »P7_autoLayers(0,’navForum’) »>Forum </a> </p>
<div id= »navDreamweaver »></div>
<div id= »navFlash »></div>
<div id= »navForum »></div>
</div>
</div>
</body>

Exportons maintenant les styles du <head> dans une feuille externe : Fichier > Exporter > Styles CSS… Appelons-la flashxpress.css. Les styles sont alors transférés. Nous pouvons donc supprimer le code figurant dans les balises <head> et rattacher la feuille de style à la page. Dans le panneau Création, onglet Styles CSS, cliquons sur l’icône Attacher une feuille de style, indiquons le chemin de flasxpress.css, OK.

Dans la feuille de style, ajoutons une bordure et un p’tit padding de 1px au navMenu. Je suggère de toujours commenter votre CSS de cette façon :

/*menu déroulant*/
#navMenu {
position:absolute;
padding: 1px 1px 1px 1px;
width:130px;
height:54px;
z-index:1;
left: 10px;
top: 13px;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
border: 1px solid #de1d1a;}

Ainsi, vos éléments étant bien distincts, tout changement devient la simplicité même.
Modifions les styles en mettant un div devant chaque id : div#navDreamweaver, div#navFlash, etc… La propriété layer-background-color en CSS ne fait pas double emploi avec background-color, c’est une propriété équivalente qui sert uniquement à Netscape.

Avant de compléter notre feuille de style, bidouillons un peu notre code HTML ) En effet, pour pouvoir définir le style de certains blocs, il est préférable d’utiliser des balises HTML diversifiées pour être le plus précis possible. Aussi, dans notre navMenu, nous allons remplacer les balises <br> par des balises <h4> et les paramétrer au mieux, cela donne :

<h4><a href= »javascript:; » onmouseover= »P7_autoLayers(0,’navDreamweaver’) »>Dreamweaver</a></h4>
<h4><a href= »javascript:; » onmouseover= »P7_autoLayers(0,’navFlash’) »>Flash</a></h4>
<h4><a href= »javascript:; » onmouseover= »P7_autoLayers(0,’navForum’) »>Forum</a></h4>

Dans la feuille de style, définissons cette balise comme telle:

#navMenu h4 {
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 18px;}

Le sélecteur id en HTML se caractérise en CSS par un dièse »# » suivi de la valeur de l’id. Ici, en indiquant #navMenu h4, nous spécifions que toutes les balises h4 comprises dans l’id « navMenu » et uniquement dans cet id sont concernées par les propriétés qui suivent. Nous avons indiqué un hauteur de 18px à cette balise pour pouvoir plus facilement positionner nos calques par la suite…

{mospagebreak}

Maintenant, occupons-nous des sous rubriques. Dans le calque navDreamweaver, tapons Extensions, Tutoriaux et Liens. Idem avec Flash et Forum (pour Forum, taper Dreamweaver et Flash) comme ci-dessous :

Pour paramétrer les sous rubriques comme nous l’entendons, changeons nos balises <p> par les balises correspondant à des éléments de liste, <ul> et <li>, et en faire des liens fictifs. Pour cela, sélectionnons les trois sous rubriques et dans l’inspecteur de Propriétés, cliquons sur Liste simple. Faisons de chaque sous rubrique un lien comme vu précédemment. Si vous regardez votre code HTML, vous devez constater que toutes vos balises <p> ont bien été remplacées :

<div id= »navFlash »>
<ul>
<li><a href= »javascipt:; »>Extensions</a></li>
<li><a href= »javascipt:; »>Tutoriaux</a></li>
<li><a href= »javascipt:; »>Liens</a></li>
</ul>
</div>

Il ne nous reste plus qu’à mettre en forme tout ça.
Plaçons nos calques. Dans la feuille de style, situons les calques à 127px dans la propriété left (depuis le bord gauche), situons les calques navDreamweaver, navFlash et navForum respectivement 0px, 18px et 36px dans la propriété Top (depuis le sommet), donnons une hauteur de 58px aux navDreamweaver et navFlash (40px pour navForum) et donnons-leur une largeur de 100px(120px pour navForum).

div#navForum {
position:absolute;
width:120px; /*largeur*/
height:40px; /*hauteur*/
z-index:4;
left: 127px;/*distance par rapport au bord gauche*/
top: 36px; /*distance par rapport au sommet de la page*/
visibility: hidden;
background-color: #CCCCCC;
layer-background-color: #CCCCCC;}

Indiquons des bordures pour chaque calque en ajoutant :

border: 1px solid #000000; /*épaisseur de 1px, bordure solide, couleur rouge*/

Sur nos balises <ul>, nous allons appliquer un margin à 0 et un padding à 2px (cela permet d’aérer le texte par rapport au border du bloc Menu). Ensuite, pour nous permettre d’avoir une liste de liens homogènes, utilisons la propriété display (propriété utilisée pour le SMIL).

#navMenu ul {
margin: 0 0 0 0;
padding:2px 2px 2px 2px;
display: block;
background-color: #cccccc;
color: #de1d1a;}

Appliquons la même chose à la balise <li> comme tel :

#navMenu li {
margin: 0 0 0 0;
display: block;
color: #de1d1a;}

L’attribut « block » transforme l’élément en « individualité », ainsi les sous-rubriques sont devenues des blocs compacts (la propriété list-style par défaut s’annule) qui ne se chevauchent pas. Pour tester la différence, remplacez l’attribut « block » par « inline », quand on passe la souris sur Extensions, on peut observer, avec la couleur, que le bloc est chevauché par celui d’en dessous.
Pour les liens, indiquons une largeur à 100% pour que le lien s’applique sur toute la longueur du bloc Menu (cette option ne fonctionne que sur Opera 7 et Mozilla), une couleur de lien et aucun surlignage.

#navMenu a {
width: 100%;
color: #000000;
text-decoration: none;}

Règlons les couleurs des liens survolés.

#navMenu li:hover, #navMenu a:hover, #navMenu a:focus, #navMenu h4:hover{
background-color: #de1d1a;
color: #ffffff;}

Et voilà, un p’tit menu simple et léger…

Petit plus…

Point important à connaître : Nous avons externalisé le code CSS de notre page. Nous pourrions faire de même avec le code javascript grâce à une extension de Project Seven, Productivity Tools. Celle-ci permet, de la même façon que Layer to Style, de sortir le js de la balise body pour le mettre dans le head et, sans passer par Dreamweaver, de générer un fichier .js et tout ça, sans avoir à toucher à une ligne de code… Une idée de tutorial, certainement

Ressources pour la création et les technologies du web

Menu vertical déroulant

Les extensions

Les calques

La feuille de style

Petit plus…

Sur le même sujet

En direct du forum

Répondre

Forum

Liens

Catégories

Mots-clefs