Aller au contenu

Menu Déroulant en 3 niveau

Snifer

Par Snifer
dans Programmation et Lignes de code

Messages recommandés

Snifer Contributeur

Snifer

Posté(e)
Posté(e)

hello

j'aimerai savoir comment rendre mon menu deroulant en 3 niveaux. actuellement j'ai un titre Univers Vintages et j'aimerai regroupé sous ce titre (quitte a le changer) de la meme façon que par exemple original bandai - japonaise (Univers Vintages - Original Bandai) .

j'ai essayer pas mal de choses mais sa me faisait des decalge ou des menu statiques ......

aidez moi svp

voici le code

 <ul id="navigation">
	  <tr>
		<td class="fondTitre" height="50" colspan="3">

		  <b><FONT Color="orange" size="5">Univers Vintages</font></b></td>
	  </tr>

<li class="toggleSubMenu">

<span>Original Bandai</span>
		<ul class="subMenu">
			<li><a href="jap.html" title="">Japonaise</a></li>
			<li><a href="frjap.html" title="">Fr Japan</a></li>
			<li><a href="fr_1988.html" title="">Françaises</a></li>
			<li><a href="fr_ch.html" title="">Fr chinoises</a></li>
			<li><a href="espa.html" title="">Espagnoles</a></li>
			<li><a href="black_box.html" title="">Memorial Box</a></li>
			<li><a href="dvdbox.html" title="">Dvd Box Jap</a></li>
			<li><a href="dvdboxhk.html" title="">Dvd Box HK</a></li>
	<li><a href="hk.html" title="">Hong Kong</a></li>
			<li><a href="bresil.html" title="">Bresilienne</a></li>
			<li><a href="fr_reed.html" title="">Réédition Française</a></li>
			<li><a href="espa_reed.html" title="">Réédition Espagnoles</a></li>
			<li><a href="correed.html" title="">Coréenne</a></li>
			<li><a href="recal.html" title="">Les Recalés</a></li>		
		</ul>
	</li>

	<li class="toggleSubMenu"><span>Officiel Giochi Preziosi Italien</span>
		<ul class="subMenu">
			<li><a href="ita.html" title="">Italienne</a></li>
			<li><a href="ita2.html" title="">Italienne 2</a></li>
			<li><a href="ita_reed.html" title="">Réédition Italienne</a></li>
			<li><a href="ita_reed2.html" title="">Réédition Italienne 2</a></li>
		</ul>
	</li>

	<li class="toggleSubMenu"><span>Bootlegs</span>
		<ul class="subMenu">
			<li><a href="tai_jap.html" title="">Jap Taiwan</a></li>
			<li><a href="sf.html" title="">Saint Fighter</a></li>
			<li><a href="sfs.html" title="">Saint Fighter Star</a></li>
			<li><a href="ws.html" title="">Warior Saint Seiya</a></li>
			<li><a href="rwc.html" title="">Robot Warrior Cloth</a></li>
			<li><a href="tai_espa.html" title="">Taiwan Espagnol</a></li>
			<li><a href="tai_espa2.html" title="">Taiwan Espagnol 2</a></li>
			<li><a href="tai_espa3.html" title="">Taiwan Espagnol 3</a></li>
			<li><a href="tai_fr.html" title="">Taiwan Français</a></li>
			<li><a href="tai_fr2.html" title="">Taiwan Français 2</a></li>
			<li><a href="sendo.html" title="">Sendo Seiya</a></li>
			<li><a href="hktai.html" title="">Hong Kong</a></li>
			<li><a href="usa.html" title="">USA</a></li>	
			<li><a href="logobandai.html" title="">Logo Bandai</a></li>
			<li><a href="pas_dorigine.html" title="">Pas D'origine</a></li>	
			<li><a href="vintagemyth.html" title="">Vintage Myth</a></li>	

		</ul>
	</li>


	<li class="toggleSubMenu"><span>Customs</span>
		<ul class="subMenu">
			<li><a href="skullscustoms.html" title="">Skulls Customs</a></li>
			<li><a href="customszero.html" title="">Customs Zero</a></li>
			<li><a href="customszerojaune.html" title="">Customs Zero Boite Jaune</a></li>

		</ul>
	</li>

Lien vers le commentaire
Partager sur d’autres sites
Dunaedine Nouveau

Dunaedine

Posté(e)
Posté(e)
hello

j'aimerai savoir comment rendre mon menu deroulant en 3 niveaux. actuellement j'ai un titre Univers Vintages et j'aimerai regroupé sous ce titre (quitte a le changer) de la meme façon que par exemple original bandai - japonaise (Univers Vintages - Original Bandai) .

j'ai essayer pas mal de choses mais sa me faisait des decalge ou des menu statiques ......

aidez moi svp

voici le code

 <ul id="navigation">
		<tr>
		 <td class="fondTitre" height="50" colspan="3">

		    <b><FONT Color="orange" size="5">Univers Vintages</font></b></td>
	   </tr>

 [...]

Déjà une première chose, pourquoi as-tu des balises TR et TD hors d'une TABLE?

Ensuite, tu utilises manifestement des CSS avec ce code. Il serait intéressant de le mettre.

Lien vers le commentaire
Partager sur d’autres sites
Snifer Contributeur

Snifer

Posté(e)
  • Auteur
Posté(e)

Hello,

j'ai extrait qu'une partie du code, il est beaucoup plus long que sa je vais tout recopier la :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<base target="Accueil">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">



<script LANGUAGE="JavaScript"> 
function PopupImage(img) { 
   w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');     
   w.document.write("<HTML><BODY onblur=\"window.close();\"><IMG src='"+img+"'>"); 
   w.document.write("</BODY></HTML>"); 
   w.document.close(); 
} 
</script> 

<title>Menu Gauche</title>



<style type="text/css">
	#navigation {
		margin: 0;
		padding: 0;
		list-style: none:
		background: #000;
		color: #fff;
		width: 200px;
		font: 1.2em "Trebuchet MS", sans-serif;
		}
	#navigation a, #navigation span {
		display: block;
		padding: 4px 10px;
		color: #fff;
		text-decoration: none;
		background: #000 url(structures/menu-item.png) left bottom no-repeat;
		}
	#navigation .toggleSubMenu a, #navigation .toggleSubMenu span {
		background-image: url(structures/menu-item-deroule.png);
		}


	#navigation .toggleSubMenu2 a, #navigation .toggleSubMenu span {
		background-image: url(structures/menu-item-deroule.png);
		}


	#navigation .open a, #navigation .open span {
		background-image: url(structures/menu-item-enroule.png);
		}
	#navigation a:hover, #navigation a:focus, #navigation a:active {
		text-decoration: underline;
		}
	#navigation .subMenu {
		font-size: .8em;
		background: #ccc url(structures/subMenu.png) 0 0 repeat-x;
		font-size: .9em;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #666;
		}
	#navigation ul.subMenu a {
		background: none;
		padding: 3px 20px;
		}
</style>
<!--[if lte IE 6]>
<style type="text/css">
	li {
		height: 1px;
		}
</style>
<![endif]-->
   <script type="text/javascript" src="jquery-1.2.1.js"></script>
   <script type="text/javascript">
   <!--
   $(document).ready( function () {
       // On cache les sous-menus
       // sauf celui qui porte la classe "open_at_load" :
       $("ul.subMenu:not('.open_at_load')").hide();
       // On selectionne tous les items de liste portant la classe "toggleSubMenu"

       // et on remplace l'element span qu'ils contiennent par un lien :
       $("li.toggleSubMenu span").each( function () {
           // On stocke le contenu du span :
           var TexteSpan = $(this).text();
           $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
       } ) ;

       // On modifie l'evenement "click" sur les liens dans les items de liste
       // qui portent la classe "toggleSubMenu" :
       $("li.toggleSubMenu > a").click( function () {
           // Si le sous-menu etait deja ouvert, on le referme :
           if ($(this).next("ul.subMenu:visible").length != 0) {
               $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
           }
           // Si le sous-menu est cache, on ferme les autres et on l'affiche :
           else {
               $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
               $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
           }
           // On empêche le navigateur de suivre le lien :
           return false;
       });

   } ) ;
   // -->
   </script>

</head>
<body>
<body topmargin="0" leftmargin="5">



         <tr>
           <td class="fondTitre" height="50" colspan="3">

             <b><FONT Color="orange" size="5">Menu</font></b></td>
         </tr>



   <ul id="navigation">
       <li><a href="accueil.html" title="">Accueil</a></li>
   </ul> 




<ul id="navigation">
<li class="toggleSubMenu">

<span>Tout sur Vintages Lands</span>
           <ul class="subMenu">
               <li><a href="meilleurnavigation.html" title="">Meilleur Navigation</a></li>
               <li><a href="maj.html" title="">Les Maj du site</a></li>
	<li><a href="imagescopyright.html" title="">Images & Copyrights</a></li>
	<li><a href="rechercheimages.html" title="">Recherche D'images</a></li>
	<li><a href="remerciement.html" title="">Remerciements</a></li>

           </ul>
       </li>
</ul> 

<ul id="navigation">


       <li class="toggleSubMenu"><span>Commentaires</span>
           <ul class="subMenu">
       <li><a href="livre_dor/livre_lire.php" title="">Livre D'Or</a></li>
</ul>

</ul>


<ul id="navigation">
         <tr>
           <td class="fondTitre" height="50" colspan="3">

             <b><FONT Color="orange" size="5">Univers Vintages</font></b></td>
         </tr>

<li class="toggleSubMenu">

<span>Original Bandai</span>
           <ul class="subMenu">
               <li><a href="jap.html" title="">Japonaise</a></li>
               <li><a href="frjap.html" title="">Fr Japan</a></li>
               <li><a href="fr_1988.html" title="">Françaises</a></li>
               <li><a href="fr_ch.html" title="">Fr chinoises</a></li>
               <li><a href="espa.html" title="">Espagnoles</a></li>
               <li><a href="black_box.html" title="">Memorial Box</a></li>
               <li><a href="dvdbox.html" title="">Dvd Box Jap</a></li>
               <li><a href="dvdboxhk.html" title="">Dvd Box HK</a></li>
	<li><a href="hk.html" title="">Hong Kong</a></li>
               <li><a href="bresil.html" title="">Bresilienne</a></li>
               <li><a href="fr_reed.html" title="">Réédition Française</a></li>
               <li><a href="espa_reed.html" title="">Réédition Espagnoles</a></li>
               <li><a href="correed.html" title="">Coréenne</a></li>
               <li><a href="recal.html" title="">Les Recalés</a></li>		
           </ul>
       </li>

       <li class="toggleSubMenu"><span>Officiel Giochi Preziosi Italien</span>
           <ul class="subMenu">
               <li><a href="ita.html" title="">Italienne</a></li>
               <li><a href="ita2.html" title="">Italienne 2</a></li>
               <li><a href="ita_reed.html" title="">Réédition Italienne</a></li>
               <li><a href="ita_reed2.html" title="">Réédition Italienne 2</a></li>
           </ul>
       </li>

       <li class="toggleSubMenu"><span>Bootlegs</span>
           <ul class="subMenu">
               <li><a href="tai_jap.html" title="">Jap Taiwan</a></li>
               <li><a href="sf.html" title="">Saint Fighter</a></li>
               <li><a href="sfs.html" title="">Saint Fighter Star</a></li>
               <li><a href="ws.html" title="">Warior Saint Seiya</a></li>
               <li><a href="rwc.html" title="">Robot Warrior Cloth</a></li>
               <li><a href="tai_espa.html" title="">Taiwan Espagnol</a></li>
               <li><a href="tai_espa2.html" title="">Taiwan Espagnol 2</a></li>
               <li><a href="tai_espa3.html" title="">Taiwan Espagnol 3</a></li>
               <li><a href="tai_fr.html" title="">Taiwan Français</a></li>
               <li><a href="tai_fr2.html" title="">Taiwan Français 2</a></li>
               <li><a href="sendo.html" title="">Sendo Seiya</a></li>
               <li><a href="hktai.html" title="">Hong Kong</a></li>
               <li><a href="usa.html" title="">USA</a></li>	
               <li><a href="logobandai.html" title="">Logo Bandai</a></li>
               <li><a href="pas_dorigine.html" title="">Pas D'origine</a></li>	
               <li><a href="vintagemyth.html" title="">Vintage Myth</a></li>	

           </ul>
       </li>


       <li class="toggleSubMenu"><span>Customs</span>
           <ul class="subMenu">
               <li><a href="skullscustoms.html" title="">Skulls Customs</a></li>
               <li><a href="customszero.html" title="">Customs Zero</a></li>
               <li><a href="customszerojaune.html" title="">Customs Zero Boite Jaune</a></li>

           </ul>
       </li>


         <tr>
           <td class="fondTitre" height="50" colspan="3">

             <b><FONT Color="orange" size="5">Autres</font></b></td>
         </tr>


       <li class="toggleSubMenu"><span>Collections</span>
           <ul class="subMenu">
       <li><a href="snifcollect.html" title="">Snifer974</a></li>
</ul>

       <li class="toggleSubMenu"><span>Recherches Figurines</span>
           <ul class="subMenu">
       <li><a href="snifrecherche.html" title="">Snifer974</a></li>
</ul>



       <li class="toggleSubMenu"><span>Partenaires</span>
           <ul class="subMenu">
       <li><a href="http://corsaire-saintseiya.forumactif.com/forum.htm"><img border="0" src="images/bannerlapassionvintage.jpg" width="88" height="31"></a></li>

</ul>

   </ul>
<br>
<center>
<a href="http://www.imingo.net" target=_top>
<img src="http://www.imingo.com/services/compteur/icptgr.php?id=comptervintages"
name="imingo.com" border="0" alt="un compteur pour votre site"></a>
</center>



<body bgcolor="#FFFFFF" text="#000000" oncontextmenu="return false">  
</body>
</html>

Et Le css (je l'utilise pour plusieurs page)

.fond {  background-color: #333333; margin-top: 1px; margin-right: 1px; margin-bottom: 1px}
.fondTitre {  background-color: #666666; font-family: Verdana, Arial; font-size: 14px; color: #ffcc00; font-weight: bold}
.fondTitre2 {  font-family: Verdana, Arial; font-size: 16px; color: #c0c0c0; font-weight: bold}
body {
font-family: Verdana, Arial;
font-size: 12px;
color: #c0c0c0;
background-color: #333333;
scrollbar-face-color: #999999;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #c0c0c0;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #333333;
scrollbar-arrow-color: #333333
}
.titre {  font-family: Verdana, Arial; font-size: 13px; color: #000000}
td {  font-family: Verdana, Arial; font-size: 12px; color: #111111}
.fondmilieu {  background-color: #333333}
.fondcentre {  background-color: #999999}
.fondcadre { background-color: #333333; margin-top: 1px; margin-right: 1px; margin-bottom: 1px ; font-family: Arial, Helvetica; font-size: 14px; font-weight: bold; color: #FFFF00
}
a:link {  font-family: Verdana, Arial; font-weight: bold; font-size: 8pt; color: #c1c1c1; text-decoration: none}
a:visited {  font-family: Verdana, Arial; font-weight: bold; font-size: 8pt; color: #E1E1E1; text-decoration: none}
a:active {  font-family: Verdana, Arial; font-weight: bold; font-size: 8pt; color: #FFFFFF; text-decoration: none}
a:hover {color: #ffcc00; font-size: 8pt; font-weight: bold; font-family: Verdana, Arial; text-decoration: none}

Lien vers le commentaire
Partager sur d’autres sites
Dunaedine Nouveau

Dunaedine

Posté(e)
Posté(e)

Même avec tout le code, il semble manquer des balises. Il n'y a pas une seule balise TABLE, les premières balises sont des balises TR. De plus, tu n'utilises pas le Doctype correct. Il n'y a pas de frame en XHTML Strict.

Un lien qui te sera utile: http://validator.w3.org/check

Ca permet de voir les erreurs au sein du code HTML.

Lien vers le commentaire
Partager sur d’autres sites
  • 2 semaines après...
albinou Nouveau

albinou

Posté(e)
Posté(e)

De plus, si tu veux que ton menu soit déroulant et sur plusieurs étages, il sera, je crois, indispensable que tu te tournes vers de JavaScript. Divers tutos sont disponibles un peu partout sur le net, donc tu devrais t'en sortir. Si tu veux des effets lors du déroulement, tu peux te tourner vers une librairie Javascript telle que MooTools (il en existe d'autres).

Voilà, je te souhaite une bonne chance.

albinou

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...