Faire un menu

Principes de base

Un menu se prépare à partir d'une liste, le plus souvent une liste à puces (liste non ordonnée = balise <ul>).

1. Saisir l'ensemble des items du menu en allant à chaque fois à la ligne (touche Retour). Vous obtenez des paragraphes. S'il doit y avoir des sous-menus, les saisir dans l'ordre logique d'apparition.

2. Sélectionner tous les items et les transformer en liste : cliquer sur lme bouton liste simple dans la palette des Propriétés. Si besoin, sélectionner ensuite les éléments de sous-menu et les transformer en liste imbriquée : cliquer sur le bouton BlockQuote dans la palette des Propriétés. Il existe des structures de code HTML différentes pour faire des menus, mais celle ci-dessus est la plus courante. Voir les codes ci-dessous avec le résultat pour un menu simple ou un menu avec sous-menu.

Un menu vertical simple

Pour que lapremière liste ci dessus devienne un menu, il faut attribuer des liens à chaque item. Sélectionner un item puis attribuez-lui un lien. Si les pages cibles n'existe pas il faut attribuer un lien vide en tapant le signe # dans la zone lien de la palette des Propriétés.

Puis il faut faire les règles css pour mettre en forme le menu.

1. règle pour <ul> : en général on commence par supprimer les puces (onglet Liste > liste-style-type = none). On peut attribuer un autre style de puce de la même manière. On peut également dans cet onglet sélectionner une image qui jouera le rôle de puce. Penser dans ce cas à la dessiner à une dimension adaptée. Il est également souvent de mise de paramétrer les marges et le padding à zéro pour la liste et l'alignement du texte dans la liste (onglet Bloc > text-align). Il est inutile de préciser les réglages de texte car c'est sur les liens que l'on fera ces réglages.

2. règle pour <li> : chaque item est paramétré (dimension, fond de couleur ou fond image, padding et margin, border). C'est le fond, couleur ou image qui donnent l'effet bouton aux éléments du menu. L'écartement entre les items est géré par des marges et leur séparation par des bordures. Il est possible d'être plus sobre et de se contenter d'une bordure d'un seul côté, en bas par exemple.

3. règle pour les liens a:link,a:visited, a:hover, a:active (bien respecter cet ordre pour que cela fonctionne). Les 4 ne sont pas obligatoires.

Ici, les sélecteurs sont souvent composés, notamment si le menu est dans une div nommée : #menu ul, #menu ul li, #menu ul li a:link, etc.

Un menu horizontal simple

Le principe est le même que précédemment. Pour mettre les éléments de la liste sur une même ligne, il y a deux approches possibles : transformer les éléments <li> en ligne (inline) ou les faire flotter, à gauche ou à droite.

http://css.mammouthland.net/menu-horizontal-en-css.php

Un menu/sous-menu vertical déroulant en css

Toute une liste de menus verticaux, avec ou sans animation javascrip., à voir ici :

http://css.developpez.com/galerie/?page=menus-verticaux

un menu/sous-menu horizontal

Une version simple :

http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php

 

Utilisation des Spry de navigation

Les Spry sont des éléments prédéfinis qui ajoutent le code javascript et les css nécessaires à leur fonctionnement. Une partie d'entre eux servent à mettre en place simplement des éléments de navigation souvent utilisés dans les sites actuels: barre de menus, panneaux à onglets, accordéon, panneau réductible.

1. Cliquer sur la page où vous souhaitez insérer un élément Spry.

2. Dans la Palette Insertion, déroulez le menu local jusqu'à Spry ( à la place de Commun), puis choisissez l'élément souhaité (voir ci-dessus).

3. Dans le cas d'un menu horizontal, il y a des éléments prédéfinis qui peuvent être sélectionnés et modifiés à partir de la Palette Propriétés. Vois ci-dessous après personnalisation des éléments du menu.

4. Au moment de l'enregistrement de la page, DreamWeaver vous demande d'ajouter qualques ressources. Ce sont des fichiers javascript enregistés automatiquement dans un dossier du site nommé "

5. Enfin, vous pouvez localiser et modifier les Feuilles de style liées à ce menu afin de lui donner l'aspect souhaité :