menu déroulant

dufossey · Message par **dufossey** » 12 févr. 2009, 14:57

bonjour,

voici donc la deuxième étape : mon menu est organisé avec des balises <li>, j'ai mis #menu li en flottant et en bloc pour obtenir un menu horizontal !
je souhaiterai qu'un menu déroulant vertical arrive suite à un clic de souris quand je passe sur les différents items de mon menu.

j'ai cherché un peu sur le forum et j'ai trouvé ce lien : http://fabiwan.kenobi.free.fr/css/NestedLists.html qui me semble intéressant mais je ne comprend ce qu'il faut faire dans mon code pour y arriver !

pourriez vous m'expliquer le raisonnement à suivre pour que je puisse ensuite l'appliquer car là je patauge un peu

!

merci d'avance
cdlmt
andré

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 12 févr. 2009, 15:11

Je ne sais pas de quel menu précisément tu parles, mais tous ces menus sont basés sur des imbrications de listes (une liste dans une liste....).
La première liste constituant le menu de premier niveau, au survol ou en cliquant sur un des éléments de cette liste on va faire apparaître le sous-menu qui est la liste inbriquée... et ainsi de suite.

L'animation étant faite par du css...

Le menu de gauche (déplié) de
http://fabiwan.kenobi.free.fr/css/NestedLists.html
correspond à la vision sans l'animation active.

Les différentes possibilités de menus correspondent au même code html animés avec un css différents.

dufossey · Message par **dufossey** » 12 févr. 2009, 15:17

d'accord donc je dois créer des listes (code html) sous-jacentes à mon menu principale qui seront invisibles et visibles au clic (code css).

donc ma question est réellement comment créer des listes qui sont invisibles et qui deviennent visibles au clic de ma souris sous le css ???

merci d'avance
cdlmt
andré

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

dufossey · Message par **dufossey** » 12 févr. 2009, 16:23

j'ai intégrer le code css de kenobi dans mon site et l'ai légèrement modifié !
par contre, je ne comprend pas pourquoi mon menu déroulant reste à l'horizontal alors que je voudrais qu'il défile vers le bas.

avez vous une explication :
je vous donne mon code css :

Code : Tout sélectionner

#entete {
  border-style: none;
  margin: 0%;
  border-left-color: white;
  font-weight: bold;
  font-style: oblique;
  text-transform: capitalize;
  text-align: left;
  color: white;
  font-size: medium;
  background-color: #3366ff;
  height: 120px;
}
h1 {
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  font-style: oblique;
  text-transform: capitalize;
  text-align: left;
  font-size: xx-large;
  margin-left: 10px;
}
h2 {
  font-family: Arial,Helvetica,sans-serif;
  font-style: oblique;
  font-weight: bold;
  text-decoration: underline;
  font-size: x-large;
  margin-left: 20px;
}
#pied {
  margin: 0px;
  font-family: "Times New Roman",Times,serif;
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  text-align: right;
  font-size: x-small;
  line-height: 50px;
}
#menu {
  border-width: thin;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-top-color: white;
  margin-left: 0%;
  color: white;
  background-color: #3366ff;
  padding-top: 1px;
  height: 25px;
}
#menu li {
  border: thin solid white;
  font-family: Arial,Helvetica,sans-serif;
  color: white;
  background-color: #3366ff;
  display: block;
  float: left;
  width: 24%;
  text-align: center;
}
#menu li:hover {
  font-family: Arial,Helvetica,sans-serif;
  text-align: center;
  color: #3366ff;
  background-color: white;
}
ul.navlist {
  font-family: sans-serif;
}
ul.navlist a {
  font-weight: bold;
  text-decoration: none;
  background-color: yellow;
}
ul.navlist, ul.navlist ul, ul.navlist li {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
ul.navlist li {
}
ul.navlist li a {
  border-color: #ffffff;
  border-width: 1px;
  padding: 3px;
  color: #ffffff;
  background-color: #3366ff;
}
ul.navlist li a:hover {
  color: #ffff00;
  background-color: #003366;
}
ul.navlist li a:active {
  border: 1px inset #ffffff;
  color: #cccccc;
  background-color: #003366;
}
ul.navlist ul {
  display: none;
  position: absolute;
  font-size: 8pt;
  padding-top: 5px;
}
ul.navlist ul li {
  float: none;
}
ul.navlist ul li a {
  border:  none;
  margin: 0px;
  padding: 2px;
  display: block;
  width: 12em;
}
ul.navlist li:hover ul {
  display: block;
  z-index: 10;
}
ul.navlist li.hover ul {
  display: block;
  z-index: 10;
  margin-top: -8px;
}
ul.navlist li:hover ul li a:before {
  content: " >> ";
}
.icone {
  border-style: none;
  float: left;
  margin-top: 3px;
  margin-left: -7px;
  padding-right: 10px;

cdlmt
andré
[modo: merci de bien vouloir mettre vos messages en forme pour que le code ne prenne pas trop de place! méthode: une fois le code copié dans le message, le sélectionner puis cliquer sur le rectangle "code" situé au dessus de la fenêtre de saisie des messages. Merci]
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 12 févr. 2009, 16:49

Si tu peux mettre ta page de test ou non en ligne, ce sera + simple.

dufossey · Message par **dufossey** » 12 févr. 2009, 21:56

bonsoir,

finalement, j'ai conservé le menu déroulant horizontal en l'adaptant à la forme de mon site.
je vous met le code complet pour pouvoir le visualiser !

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>structure musculation</title>
  <style type="text/css">
#entete {
  border-style: none;
  margin: 0%;
  border-left-color: white;
  font-weight: bold;
  font-style: oblique;
  text-transform: capitalize;
  text-align: left;
  color: white;
  font-size: medium;
  background-color: #3366ff;
  height: 120px;
}
h1 {
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  font-style: oblique;
  text-transform: capitalize;
  text-align: left;
  font-size: xx-large;
  margin-left: 10px;
}
h2 {
  font-family: Arial,Helvetica,sans-serif;
  font-style: oblique;
  font-weight: bold;
  text-decoration: underline;
  font-size: x-large;
  margin-left: 20px;
}
#pied {
  margin: 0px;
  font-family: "Times New Roman",Times,serif;
  font-weight: normal;
  font-style: italic;
  text-transform: lowercase;
  text-align: right;
  font-size: x-small;
  line-height: 50px;
}
#menu {
  border-width: thin;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-top-color: white;
  margin-left: 0%;
  color: white;
  background-color: #3366ff;
  padding-top: 1px;
  height: 22px;
}
#menu li {
  border: thin solid white;
  font-family: Arial,Helvetica,sans-serif;
  color: white;
  background-color: #3366ff;
  display: block;
  float: left;
  width: 24%;
  text-align: center;
}
ul.navlist {
  font-family: sans-serif;
}
ul.navlist a {
  font-weight: bold;
  text-decoration: none;
  background-color: yellow;
}
ul.navlist, ul.navlist ul, ul.navlist li {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
ul.navlist li {
}
ul.navlist li a {
  border-color: #ffffff;
  border-width: 1px;
  padding: 0px;
  color: #ffffff;
  background-color: #3366ff;
}
ul.navlist li a:hover {
  color: #3366ff;
  background-color: white;
}
ul.navlist li a:active {
  border: 1px inset #ffffff;
  color: #cccccc;
  background-color: #003366;
}
ul.navlist ul {
  display: none;
  position: absolute;
  font-size: 8pt;
  padding-top: 2px;
  list-style-type: none;
}
ul.navlist ul li {
  float: none;
}
ul.navlist ul li a {
  border:  none;
  margin: 0px;
  padding: 2px;
  width: 12em;
  float: left;
  list-style-type: disc;
}
ul.navlist li:hover ul {
  display: block;
  z-index: 10;
}
ul.navlist li.hover ul {
  display: block;
  z-index: 10;
  margin-top: -8px;
}
ul.navlist li:hover ul li a:before {
  content: " >> ";
}
.icone {
  border-style: none;
  float: left;
  margin-top: 3px;
  margin-left: -7px;
  padding-right: 10px;
}

  </style>
</head>
<body>
<div id="entete">
<h1><img style="width: 82px; height: 89px;"
 class="icone" alt="collège H.Langlois" src="logo.gif">musculation</h1>
<h2>cycle en quatrième au collège de Pont de l'Arche</h2>
</div>
<div id="menu">
<ul class="navlist">
  <li><a href="#">anatomie</a>
    <ul style="left: 9px; width: 542px;">
      <li><a href="#">muscles</a></li>
      <li><a href="#">étirements</a></li>
      <li><a href="#">questionnaire</a></li>
    </ul>
  </li>
  <li>
    <a href="#">fiches</a>
    <ul style="left: 305px; width: 488px;">
      <li><a href="#">triceps</a></li>
      <li><a href="#">biceps</a></li>
      <li><a href="#">pectoraux</a></li>
      <li><a href="#">deltoide</a></li>
      <li><a href="#">abdominaux</a></li>
      <li><a href="#">lombaires</a></li>
      <li><a href="#">dorsaux</a></li>
      <li><a href="#">fessiers</a></li>
      <li><a href="#">quadriceps</a></li>
      <li><a href="#">ischio-jambier</a></li>
      <li><a href="#">mollet</a></li>
    </ul>
  </li>
  <li>
    <a href="#">thèmes</a>
    <ul style="left: 604px; width: 501px;">
      <li><a href="#">concentrique</a></li>
      <li><a href="#">excentrique</a></li>
      <li><a href="#">isométrique</a></li>
    </ul>
  </li>
  <li>
    <a href="#">cycle</a>
    <ul style="left: 701px; width: 541px;">
      <li><a href="#">téléchargement</a></li>
      <li><a href="#">explication</a></li>
    </ul>
  </li>
</ul>
</div>
<div id="texte">texte</div>
<div id="pied">pied</div>
</body>
</html>

en testant sous IE et FF, je n'ai pas le même résultat ???
comment corriger ce soucis ?

désolé pour les gros blocs de code, je ne connaissais pas la manip !

merci encore
cdlmt
andré

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

dufossey · Message par **dufossey** » 15 févr. 2009, 12:48

bonjour,
j'ai bien avancé dans ma structure, j'ai mis mon menu déroulant à la vertical en lui donnant un dégagement à droite et à gauche.

par contre, je rencontre un problème d'affichage sous FF et IE ,mon menu déroulant se décale malgré une position absolue selon la largeur de l'écran utilisé pour visionner le site.

de plus, sous IE, la marge haute (pourtant à 0) de mon sous menu est importante et empêche d'aller cliquer dessus !

pouvez vous m'aider car là je m'arrache les cheveux pour savoir comment régler ces problèmes d'affichage dans le navigateur ???

je n'ai actuellement pas d'hébergeur donc je vous remet le code complet de ma page pour pouvoir visualiser celle ci !

merci d'avance
cdlmt
andré

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>structure musculation</title>
  <style type="text/css">
.icone {
  border-style: none;
  float: left;
  margin-top: 3px;
  margin-left: 5px;
  padding-right: 10px;
}
#entete {
  border-style: none;
  margin: 0;
  border-left-color: white;
  font-weight: bold;
  font-style: oblique;
  text-transform: capitalize;
  text-align: left;
  color: white;
  font-size: medium;
  background-color: #3366ff;
  height: 120px;
}
.titrefiche {
  border: thin outset #ffcc66;
  font-family: Arial,Helvetica,sans-serif;
  text-align: center;
  float: left;
  list-style-type: none;
  margin-top: 5px;
  background-color: #66ff99;
  height: 20px;
  width: 400px;
  margin-left: 5px;
  display: block;
}
.muscles {
  border: thin outset #ffcc66;
  font-family: Arial,Helvetica,sans-serif;
  text-align: center;
  float: left;
  margin-left: 40px;
  list-style-type: none;
  margin-top: 5px;
  background-color: #ff6666;
  height: 20px;
  width: 300px;
  display: block;
}
.thèmes {
  border: thin outset #ffcc66;
  font-family: Arial,Helvetica,sans-serif;
  text-align: center;
  background-color: #ffff99;
  margin-left: 20px;
  float: left;
  margin-top: 5px;
  height: 20px;
  width: 200px;
  display: block;
}
.imageexos {
  border: medium outset black;
  margin: 10px 40px 15px 15px;
  padding: 50px 100px;
  float: left;
}
h1 {
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  font-style: oblique;
  text-transform: capitalize;
  text-align: left;
  font-size: xx-large;
  margin-left: 10px;
}
h2 {
  font-family: Arial,Helvetica,sans-serif;
  font-style: oblique;
  font-weight: bold;
  text-decoration: underline;
  font-size: x-large;
  margin-left: 20px;
}
#pied {
  text-transform: lowercase;
  height: 420px;
}
#menu {
  border-width: thin;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-top-color: white;
  margin-left: 0%;
  color: white;
  background-color: #3366ff;
  padding-top: 1px;
  height: 25px;
}
#menu li {
  border: thin solid white;
  font-family: Arial,Helvetica,sans-serif;
  color: white;
  background-color: #3366ff;
  display: block;
  float: left;
  width: 23%;
  text-align: center;
  margin-right: 5px;
  margin-left: 5px;
}
ul.navlist {
  font-family: sans-serif;
}
ul.navlist a {
  font-weight: bold;
  text-decoration: none;
  background-color: yellow;
}
ul.navlist, ul.navlist ul, ul.navlist li {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
ul.navlist li {
}
ul.navlist li a {
  border-color: #ffffff;
  border-width: 1px;
  padding: 0px;
  color: #ffffff;
  background-color: #3366ff;
  width: 20%;
}
ul.navlist li a:hover {
  color: #3366ff;
  background-color: white;
}
ul.navlist li a:active {
  border: 0px inset #ffffff;
  color: #cccccc;
  background-color: #003366;
}
ul.navlist ul {
  display: none;
  position: absolute;
  padding-top: 0px;
  list-style-type: none;
  font-size: 60%;
}
ul.navlist ul li {
  float: none;
  clear: both;
}
ul.navlist ul li a {
  border:  none;
  margin: 0px;
  padding: 2px;
  width: 31em;
  float: left;
  list-style-type: disc;
  position: absolute;
}
ul.navlist li:hover ul {
  display: block;
  z-index: 10;
}
ul.navlist li.hover ul {
  display: block;
  z-index: 10;
  margin-top: -8px;
}
ul.navlist li:hover ul li a:before {
  content: " >> ";
}
#bandeaufiche {
  height: 30px;
  background-color: #ccffff;
}
h3 {
  font-family: Arial,Helvetica,sans-serif;
  text-align: left;
  text-transform: capitalize;
  font-style: normal;
  font-weight: bold;
  list-style-type: circle;
  margin-bottom: 0px;
  padding-bottom: 1px;
  margin-left: 0px;
  text-decoration: underline;
}
.consigne {
  font-family: "Times New Roman",Times,serif;
  list-style-type: circle;
  list-style-image: url();
  margin-left: 30px;
  padding-bottom: 1px;
}

  </style>
</head>
<body>
<div id="entete">
<h1><img class="icone"
 style="width: 82px; height: 89px;" alt=""
 src="../logo.gif">cycle&nbsp;de musculation</h1>
<h2>en quatrième au collège de Pont de l'Arche&nbsp;</h2>
</div>
<div id="menu">
<ul class="navlist">
  <li><a href="#">anatomie</a>
    <ul style="width: 237px; top: 165px; left: 7px;">
      <li><a href="#">muscles</a></li>
      <li><a href="#">étirements</a></li>
      <li><a href="#">questionnaire</a></li>
    </ul>
  </li>
  <li>
    <a href="#">fiches</a>
    <ul style="width: 235px; top: 164px; left: 306px;">
      <li><a href="#">triceps</a></li>
      <li><a href="#">biceps</a></li>
      <li><a href="#">pectoraux</a></li>
      <li><a href="#">deltoide</a></li>
      <li><a href="#">abdominaux</a></li>
      <li><a href="#">lombaires</a></li>
      <li><a href="#">dorsaux</a></li>
      <li><a href="#">fessiers</a></li>
      <li><a href="#">quadriceps</a></li>
      <li><a href="#">ischio-jambier</a></li>
      <li><a href="#">mollet</a></li>
    </ul>
  </li>
  <li>
    <a href="#">thèmes</a>
    <ul style="width: 40px; top: 165px; left: 605px;">
      <li><a href="#">concentrique</a></li>
      <li><a href="#">excentrique</a></li>
      <li><a href="#">isométrique</a></li>
    </ul>
  </li>
  <li>
    <a href="#">cycle</a>
    <ul style="width: 246px; top: 165px; left: 902px;">
      <li><a href="#">téléchargement</a></li>
      <li><a href="#">explication</a></li>
    </ul>
  </li>
</ul>
</div>
<div id="bandeaufiche">
<li class="titrefiche">titre de la fiche</li>
<li class="muscles">triceps</li>
<li class="thèmes">concentrique</li>
</div>
<div id="pied"><img class="imageexos"
 style="width: 200px; height: 300px;" alt=""
 src="file:///C:/Documents%20and%20Settings/Utilisateur/Bureau/Image1.jpg"><br>
<ul>
  <li>
    <h3>postures :&nbsp;<span style="font-style: italic;"></span></h3>
  </li>
  <li class="consigne"><span style="font-style: italic;">consigne
1</span><span style="font-style: italic;"><span
 style="text-decoration: underline;"><span
 style="font-weight: bold;"></span></span></span></li>
  <li class="consigne"><span style="font-style: italic;"><span
 style="text-decoration: underline;"><span
 style="font-weight: bold;"></span></span>consigne
2</span></li>
  <li class="consigne"><span style="font-style: italic;">consigne
3<br>
    </span></li>
  <li>
    <h3>organisation :</h3>
  </li>
  <li class="consigne"><span style="font-style: italic;">consigne
1</span></li>
  <li class="consigne"><span style="font-style: italic;">consigne
2</span></li>
  <li class="consigne"><span style="font-style: italic;">consigne
3<br>
    </span></li>
  <li>
    <h3>charges de travail :</h3>
  </li>
  <li class="consigne"><span style="font-style: italic;">consigne
1</span></li>
  <li class="consigne"><span style="font-style: italic;">consigne
2</span></li>
  <li class="consigne"><span style="font-style: italic;">consigne
3</span></li>
</ul>
</div>
<div id="bandeaufiche">
<li class="titrefiche">titre de la fiche</li>
<li class="muscles">triceps</li>
<li class="thèmes">concentrique</li>
</div>
<div id="pied"><img class="imageexos"
 style="width: 200px; height: 300px;" alt=""
 src="file:///C:/Documents%20and%20Settings/Utilisateur/Bureau/Image1.jpg"><br>
<ul>
  <li>
    <h3>posture :&nbsp;<span style="font-style: italic;"></span></h3>
  </li>
  <li class="consigne"><span style="font-style: italic;">consigne
1</span></li>
  <li class="consigne"><span style="font-style: italic;">consigne
2</span></li>
  <li class="consigne"><span style="font-style: italic;">consigne
3<br>
    </span></li>
  <li>
    <h3>organisation :</h3>
  </li>
  <li class="consigne"><span style="font-style: italic;">consigne
1</span></li>
  <li class="consigne"><span style="font-style: italic;">consigne
2</span></li>
  <li class="consigne"><span style="font-style: italic;">consigne
3<br>
    </span></li>
  <li>
    <h3>charges de travail :</h3>
  </li>
  <li class="consigne"><span style="font-style: italic;">consigne
1</span></li>
  <li class="consigne"><span style="font-style: italic;">consigne
2</span></li>
  <li class="consigne"><span style="font-style: italic;">consigne
3</span></li>
</ul>
</div>
<div id="pied"><br>
<br>
pied</div>
</body>
</html>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

dufossey · Message par **dufossey** » 15 févr. 2009, 18:05

re,

voici l'adresse pour visualiser la structure du site :
http://hlanglois-27.bureauvirtuelscolai ... olaire.fr/

merci de me répondre car je me sens un peu seul !
cdlmt
andré

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Geckozone

menu déroulant

menu déroulant

Qui est en ligne ?