Aller au contenu

menu déroulant 2 niveaux en css: prb de décalage

jerome2

Par jerome2
dans (X)HTML et CSS

 Partager

Sujets conseillés

jerome2

jerome2

Posté
Posté

Bonjour à tous,

voilà je veux faire une menu déroulant à 2 niveaux (je me suis inspiré pour celà des fameux Suckerfish Dropdowns).

Là où je calle c'est que je voudrai que les premiers sousmenu s'affichent en vertical (en poussant les titres principaux vers le bas) et que les sous-sousmenu eux s'affichent sur la droite du menu.

Pour l'instant les sousmenu s'affichent bien en vertical mais ils cachent les titres principaux au lieu de les pousser, du coup mon menu est illisible !!

Voilà si qqun peut m'aider sur ce coup là.....

le code html:


<ul id="menu">

   <li>

	<a href="#">activites</a>

	<ul id="smenu">

	  <li>

		<a href="#">activités artistiques <img src="triangle.gif"></a>

		<ul id="menu">

		  <?php

									  $resultat=mysql_query("select*from activites where groupe like 1",$connexion);

									  $nb=mysql_num_rows($resultat);

									  for ($i=0;$i<$nb;$i++)

									  {

									  $nom=mysql_result($resultat,$i,"nom");

									  $adressepage=mysql_result($resultat,$i,"adressepage");

									  echo "<li><a href=$adressepage>$nom</a></li>\n";

									  }

									  ?>

		</ul>

	  </li>

	  <li>

		<a href="#">danse <img src="triangle.gif"></a>

		<ul id="menu">

		  <?php

									  $resultat=mysql_query("select*from activites where groupe like 2",$connexion);

									  $nb=mysql_num_rows($resultat);

									  for ($i=0;$i<$nb;$i++)

									  {

									  $nom=mysql_result($resultat,$i,"nom");

									  $adressepage=mysql_result($resultat,$i,"adressepage");

									  echo "<li><a href=$adressepage>$nom</a></li>\n";

									  }

									  ?>

		</ul>

	  </li>

	  <li>

		<a href="#">activités physiques <img src="triangle.gif"></a>

		<ul id="menu">

		  <?php

									  $resultat=mysql_query("select*from activites where groupe like 3",$connexion);

									  $nb=mysql_num_rows($resultat);

									  for ($i=0;$i<$nb;$i++)

									  {

									  $nom=mysql_result($resultat,$i,"nom");

									  $adressepage=mysql_result($resultat,$i,"adressepage");

									  echo "<li><a href=$adressepage>$nom</a></li>\n";

									  }

									  ?>



		</ul>

	  </li>

	  <li>

		<a href="#">activités techniques <img src="triangle.gif"></a>

		<ul id="menu">

		  <?php

									  $resultat=mysql_query("select*from activites where groupe like 4",$connexion);

									  $nb=mysql_num_rows($resultat);

									  for ($i=0;$i<$nb;$i++)

									  {

									  $nom=mysql_result($resultat,$i,"nom");

									  $adressepage=mysql_result($resultat,$i,"adressepage");

									  echo "<li><a href=$adressepage>$nom</a></li>\n";

									  }

									  ?>



		</ul>

	 </li>

	</ul>

  </li>

  <li>

	<a href="#">manifestations</a>

	<ul id="menu">

	  <li><a href="actualite.php">à venir</a></li>

	  <li><a href="archives.php">archives</a></li>



	</ul>

  </li>

  <li>

	<a href="#">cinéma</a>

	<ul id="menu">

	  <li><a href="films.php">les films du mois</a></li>

	  <li><a href="#">films précédents</a></li>



	</ul>

  </li>

  <li>

	<a href="#">publications</a>

	<ul id="menu">

	  <li><a href="vermay.php">vermay</a></li>

	  <li><a href="#">le jourmalt</a></li>

	</ul>

  </li>

  <li>

	<a href="#">informations</a>

	<ul id="menu">

	  <li><a href="association.php">association</a></li>

	  <li><a href="#">inscriptions</a></li>

	  <li><a href="contacts.php">contacts</a></li>

	  <li><a href="acces.php">plan d'accès</a></li>

	  <li><a href="horaires.php">heures d'ouvertures</a></li>

   </ul>

  </li>



</ul>

et le css:


#menu, #menu ul {

padding: 0;

margin: 0;

list-style: none;

line-height: 1;

}

#menu a {

display: block;

width: 10em;

text-decoration: none;

color: white;

font-weight: bold;

font-family: Verdana, Geneva, Arial, sans-serif;

}



/* le menu principal */

#menu li {

width: 14em;

height: 30px;

background: #a490de;

border: 1px solid grey;

}



/* les sous-menus */

#menu li ul {

	position: absolute;

	width: 14em;

	height: 30px;

	left: -999em;

}

#menu li:hover ul {

		position: relative;

	left: auto;

	width: 14em;

	height: 30px;

}

#menu li:hover ul, #menu li.sfhover ul {

	left: auto;

}





/* décale le ssmenu vers la droite */

#menu li ul ul {

	margin: -1em 0 0 10em;

}

/* cache le ssmenu */

#menu li:hover ul ul, #menu li.sfhover ul ul {

	position: absolute;

		left: -999em;

}

/* montre le ssmenu */

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {

		left: auto;

}

là je suis vraiment bloqué alors si qqun pouvait m'aider ça serait super cool merci !!

jerome2

jerome2

Posté
  • Auteur
Posté

merci cygnus,

mais ce menu ne propose qu'un décalage sur la droite, et il n'y a pas le premier sous menu qui pousse les éléments du menu principal....tu me suis ?

le décalage sur la droite c'est bon pour mon sous-sous menu, mais l'originalité que je voulais donner à mon menu c'était d'afficher le sous menu à la place des titres principaux, et les sous-sous menu décalé à droite

si qqun comprend ce que je cherche....

Cygnus

Cygnus

Posté
Posté

Euh ... :unsure:

Je crois qu'une illustration ne serait pas superflue ! :wacko:

Cygnus

Cygnus

Posté
Posté

Si tu veux faire une imbrication des deux menus, commence par reprendre la base du premier qui t'est fournie.

Puis, tu remplaces les <li><a>..</a></li> par des <li><ul>...</ul></li> contenant ton second sous-menu.

Pour agencer le premier, tu reprends le code fourni dans le premier exemple.

Et pour le second, celui fournit dans le deuxième exemple.

Et ça devrait le faire :rolleyes:

jerome2

jerome2

Posté
  • Auteur
Posté

ok merci Cygnus, j'ai fait ce que tu me conseillai (enfin je crois), mais le problème c'est que comme mes sous-sous menu sont imbriqués dans les sous menu, ils s'ouvrent en même temps que les sous menu alors que je voudrais qu'ils ne soient visibles qu'au passage de la souris sur les sous-menu.

De plus, les différents sous-menu sont anormalement écartés car le navigateur ne les affiche qu'à la suite du block de sous-sous menu.

à l'aide je galère !!!

j'ai mis mon essai en ligne pour qu'il soit un peu plus compréhensible quand même:

http://www.malt77.com/test.php

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...