Aide pour créer un menu [détaillée]

ludacris · Message par **ludacris** » 19 janv. 2007, 12:58

voilà je voulais savoir comment est-ce que je pourrais créer un menu sur la gauche de la page, genre comme dans un site, disons ogame

avoir une barre sur le coté comme ceci,

merci d'avance de votre aide...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Message par **Ymai** » 19 janv. 2007, 18:35

Bonjour
La référence incontournable est
http://css.alsacreations.com/Galeries-de-menus-en-CSS
Reste à voir pour chacun comment implémenter cela dans NVU/KpZ.
Plus de précisions sont-elles nécessaires?

NYKO · Message par **NYKO** » 19 janv. 2007, 23:38

oui plus de précisions

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Message par **Ymai** » 20 janv. 2007, 12:42

Pour faire un menu du type http://css.alsacreations.com/modelesmenus/b1.htm
Je décrirai la méthode dans KompoZer. Si vous voulez absolument utiliser NVU (pourquoi?), il faut adapter.
Voici ce que nous allons obtenir, sans toucher la moindre ligne de code HTML. A copier/coller dans l'onglet "Source", pour voir le résultat.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <style type="text/css">
.menu {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

.menu a {
  border-style: solid;
  border-color: #663333;
  border-width: 1px 3px 3px 1px;
  display: block;
  width: 8em;
  background-color: #ffffcc;
  margin-top: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
  text-align: center;
  text-decoration: none;
}

.menu a:hover {
  background-color: #ffcc66;
}

.menu a:active {
  border-style: solid;
  border-color: #663333;
  border-width: 3px 1px 1px 3px;
  background-color: #ffffcc;
}


  </style>
  <title>menu</title>
</head>
<body>
Menu<br>
<ul class="menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>
</body>
</html>

Un menu est une liste non ordonnée d'éléments que l'on peut encore appeler "liste à puces", dans le cadre du traitement de texte.
1. Créer la liste à puces en utilisant le bouton "Appliquer ou enlever une liste à puces" de la barre d'outils de structure de KpZ/NVU.
2. Pour chacun des éléments de la liste, établir un lien hypertexte vers la cible, de manière tout à fait classique. Méthode décrite au titre "Les liens internes du menu" à l'adresse http://info.sio2.be/kpz/1/4.php ou au titre " Un lien vers un autre site web" à la page suivante.

Le menu est en place, il ne reste qu'à le mettre en forme.

Préambule
Ce menu est une liste non ordonnée limitée par les balises
<ul> et </ul> pour l'ensemble de la liste
<li> et </li> pour chaque élément de la liste
De plus, chacun des liens est indiqué par un couple de balises <a href=...> et </a>.

Au travail
1. Afin que les mises en forme que nous allons mettre au point ne s'appliquent qu'aux éléments du menu, nous allons décider que la liste non ordonnée sera affectée d'une classe que nous appellerons "menu".

* clic dans un des éléments du menu quelconque
* dans la barre d'état, au bas de la fenêtre de KpZ, repérer l'élément <ul> correspondant à la liste
* clic gauche sur l'élément <ul> pour le sélectionner
* clic droit sur le même élément > Propriétés avancées
* dans la zone "Attribut", choisir "class" dans la liste déroulante ou écrire "class"
* dans la zone "Valeur", indiquer "menu"
* cliquer sur OK
Dans la barre d'état, on voit maintenant <ul class="menu">. Aucun changement encore sur le menu, toutefois. C'est normal: on n'a encore rien dit sur la mise en forme de l'élément "menu".

Durant le reste de la manoeuvre, il est *hautement* intéressant de visualiser ce qui se passe dans la page alors que nous définissons les styles. S'arranger pour que la boîte de dialogue ne couvre pas le "menu".

2. Dans le menu, la liste ordonnée ne devrait pas présenter de puces. La forme des puces est une caractéristique de l'élément <ul>
* Frapper F11 pour ouvrir KaZcadeS (éditeur de styles).
* Cliquer sur la palette de couleurs, en haut et à gauche de la boîte de dialogue; nous allons ainsi pouvoir définir un nouveau style
* Dans la zone "Nouvelle règle de style", indiquer la mention ".menu" (attention, il faut absolument un "point" pour mentionner qu'il s'agit d'une "class"
* Cliquer sur "Créer la règle de style"
* Dans l'onglet "Listes", choisir "aucune" à la rubrique "Type de puces"
* Visualiser l'effet dans l'onglet "Normal" en déplaçant éventuellement la boîte de dialogue.
* Dans l'onglet "Boîtes"
- Rubrique "Espacement", indiquer 0 pour "Gauche"
- Rubrique "Marges", indiquer 0 pour "Gauche" (spécialement pour IE, semble-t-il.
* Visualiser l'effet dans l'onglet "Normal".

Nous n'avons pas encore l'effet de "Bouton" souhaité. C'est le moment.
Un "bouton" matérialise les liens hypertexte, c'est-à-dire les éléments <a>, mais seulement ceux qui font partie de la zone "menu"
* Nous sommes toujours dans l'éditeur KaZcadeS
* Cliquer sur la palette de couleurs, en haut et à gauche de la boîte de dialogue pour pouvoir définir un nouveau style.
* Dans la zone "Nouvelle règle de style", indiquer la mention ".menu a", indiquant donc que nous voulons appliquer le style aux éléments <a> qui ont pour parent une "class" "menu"
* Cliquer sur "Créer la règle de style"
* Les éléments de type <a> sont des éléments "en ligne". Il faut les transformer en éléments de type "bloc". Dans l'onglet "Boîte",
- rubrique "Affichage", sélectionner "Bloc"
- rubrique "Largeur", sélectionner une valeur qui convient 10em, par exemple
* Dans l'onglet "Fond", sélectionner une couleur de fond au choix.
* Dans l'onglet "Bordures", nous utiliserons d'abord le même style pour toutes les bordures (option par défaut).
- rubrique "Style", sélectionner "Plein"
- rubrique "Epaisseur", indiquer "1px"
- rubrique "Couleur", choisir une couleur qui convient

Les boutons sont maintenant formés. Mais on peut améliorer.
* Dans l'onglet "Boîte",
- rubrique "Marge" -> "Haut", indiquer 3px
- rubrique "Espacement" -> "Haut" / "Bas", indiquer 3px
* Onglet "Texte",
- rubrique "Alignement", choisir "Centré"
- rubrique "Décoration du texte", cocher "Normal" (le soulignement restera visible dans KpZ et disparaîtra dans le navigateur)

Il va de soi que toutes les valeurs de marges, espacements, bordures et autres indiquées ci-dessus doivent être adaptées aux goûts personnels.
Nous avons des boutons fonctionnels, mais qui ne changent pas encore de couleur lors des actions de la souris.

Occupons-nous des changements d'aspect au passage de la souris, maintenant.
* Nous sommes toujours dans l'éditeur KaZcadeS
* Cliquer sur la palette de couleurs, en haut et à gauche de la boîte de dialogue pour pouvoir définir un nouveau style.
* Dans la zone "Nouvelle règle de style", indiquer la mention ".menu a:hover", indiquant donc que nous voulons appliquer le style aux éléments <a> qui ont pour parent une "class" "menu" lorsque la souris passera au-dessus du bouton.
* Cliquer sur "Créer la règle de style"
* Dans l'onglet "Fond", sélectionner une couleur qui convient

Quitter KaZcades, enregistrer le travail et visualiser l'effet dans l'onglet "Normal" ou dans le navigateur.

Pour le changement d'aspect du bouton au moment de cliquer le bouton, la méthode est identique
* F11 pour retourner dans l'éditeur KaZcadeS
* Cliquer sur la palette de couleurs, en haut et à gauche de la boîte de dialogue pour pouvoir définir un nouveau style.
* Dans la zone "Nouvelle règle de style", indiquer la mention ".menu a:active", indiquant donc que nous voulons appliquer le style aux éléments <a> qui ont pour parent une "class" "menu" lorsque le bouton de la souris est cliqué.
* Cliquer sur "Créer la règle de style"
* Dans l'onglet "Fond", sélectionner une couleur qui convient

Quitter KaZcades, enregistrer le travail et visualiser l'effet dans l'onglet "Normal" ou dans le navigateur.

Amélioration: effet de relief.
Pour obtenir l'effet d'enfoncement du bouton au moment de cliquer, la méthode est simple.
* F11 pour retourner dans l'éditeur KaZcadeS
* Cliquer sur la règle ".menu a"
* Dans l'onglet "Bordure", décocher la case "Utiliser le même style pour tous"
- rubrique "Epaisseur": "Haut et Gauche: 1px", "Bas et droite: 3px"
- rubrique "Couleur": choisir une couleur assez sombre pour représenter une ombre
* Cliquer sur la règle ".menu a:active"
* Dans l'onglet "Bordure", décocher la case "Utiliser le même style pour tous"
- rubrique "Epaisseur": "Haut et Gauche: 3px", "Bas et droite: 1px" (exactement l'inverse de ".menu a"
- rubrique "Couleur": sélectionner la même couleur sombre que pour les bordures de l'élément ".menu a"

Merci à toutes celles et ceux qui indiqueront les problèmes dans les procédures décrites.
Si vous désirez modifier directement le texte plutôt qu'ajouter des contributions ci-dessous, http://sio2.be/wikini/wakka.php?wiki=TutoKpz

Message par **chinon37** » 20 janv. 2007, 19:16

si ça, c'est pas un tuto, je veux bien me passer de boisson houblonnée pandant 3 mois

Je le garde sous le coude pour les multiples demandes à venir!
[modo]J'ai légèrement modifié le titre!![/modo]

Message par **Ymai** » 20 janv. 2007, 22:41

Je garde cette base sous le coude, moyennant les remarques que l'on me fera, pour une prochaine leçon dans mes cours. Tout cela est bassement intéressé.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.1) Gecko/20061208 Firefox/2.0.0.1

Geckozone

Aide pour créer un menu [détaillée]

Aide pour créer un menu [détaillée]

Qui est en ligne ?