28220 sujets

CSS et mise en forme, CSS3

[Résolu] Menu et sous-menu : la méthode des listes de définitions

Bonjour,

Je cherche à styliser un menu.
J'étais persuadé que l'opération serait facile, ayant déjà eu à développer des menus de ce genre.
Sauf qu'il y a visiblement une subtilité qui m'échappe ici.

Voici à quoi doit ressembler le menu au repos :

http://spheerys.free.fr/alsa/menu/menu1.jpg

Une fois que l'utilisateur a cliqué sur Menu 1, je souhaite que le sous menu s'affiche de la sorte :

http://spheerys.free.fr/alsa/menu/menu2.jpg

Seulement problème, le sous-menu s'affiche SOUS les autres items du menu principal :

http://spheerys.free.fr/alsa/menu/menu3.jpg

Voilà ce que a donne en direct : http://spheerys.free.fr/alsa/menu/menu.html

Le code CSS :
					ul {
					 width: 200px;
					}
					
					ul li {
					 display: block;

					 list-style-image: none;

					 list-style-type: none;
					 font-family: Verdana,Arial,Helvetica,sans-serif;
					 font-size: 12px; 

					 font-weight: bold;
				   	 height: 29px; 
					 background: transparent url(fond.png) top left repeat-x;
					}
					
					
					ul li a {

					 display: block;
					 width: 200px;
					 border-bottom: 0px;
					 padding: 3px 0 0 15px;

					}
					
					ul li:hover {

					 background: transparent url(fond.png) bottom left repeat-x; 
					}
					
					ul ul {
					 display: none;
					}

					ul li.here ul {
					 display: block;
					}					
					
					ul ul li:hover {
					 background-image: none; 
					}
					
					ul ul li {
					 font-size: 10px; 
					 font-weight: normal;
					 background-image: none; 
					 height: inherit; 
					}


Et le code HTML si besoin :
			<ul>
			  <li class="here"><a>Menu 1</a>
			    <ul>
			      <li><a>Sous-menu 1</a></li>
			      <li><a>Sous-menu 2</a></li>
			      <li><a>Sous-menu 3</a></li>
			    </ul>
			  </li>
 			  <li><a>Menu 2</a>
			    <ul>
			      <li><a>Sous-menu 1</a></li>
			      <li><a>Sous-menu 2</a></li>
			      <li><a>Sous-menu 3</a></li>
			      <li><a>Sous-menu 4</a></li>
			    </ul>      
			  </li>
			  <li><a>Menu 3</a>
			    <ul>
			      <li><a>Sous-menu 1</a></li>
			    </ul>
			  </li>
			  <li><a>Menu 4</a>
			    <ul>
			      <li><a>Sous-menu 1</a></li>
			      <li><a>Sous-menu 2</a></li>
			      <li><a>Sous-menu 3</a></li>
			      <li><a>Sous-menu 4</a></li>
			      <li><a>Sous-menu 5</a></li>
			    </ul>
			  </li>   
			</ul>


D'après mes investigations, ce chevauchement provient de la propriété suivante :
 ul li { height: 29px; }

Or si je l'enlève, je ne parviens plus à caler l'image de fond des items du menu principal comme je veux :

http://spheerys.free.fr/alsa/menu/menu4.jpg


Bref, si vous avez une idée, elle est la bienvenue Smiley smile
Modifié par Spheerys (09 Jan 2007 - 00:58)
Pourquoi ne pas mêler les listes de définitions (dl) et celle-ci (ul) ?

Par exemple

<dl>
    <dt>Menu 1</dt>
    <dd>
        <ul>
            <li>Sous menu</li>
            <li>Sous menu</li>
            <li>Sous menu</li>
        </ul>
    </dd>
</dl>

Modifié par Antoine Cailliau (05 Jan 2007 - 21:22)
Et oui pourquoi pas !
Je n'avais jamais eu l'occasion de tester ces listes de définitions et c'est un vrai bonheur !
On y gagne vraiment en clarté par rapport à deux listes UL imbriquée Smiley smile

Merci Antoine Smiley cligne
Antoine Cailliau a écrit :
Pourquoi ne pas mêler les listes de définitions (dl) et celle-ci (ul) ?

Par exemple

<dl>
    <dt>Menu 1</dt>
    <dd>
        <ul>
            <li>Sous menu</li>
            <li>Sous menu</li>
            <li>Sous menu</li>
        </ul>
    </dd>
</dl>


Oui Antoine mais tu ne trouves pas que là le terme "menu 1" ressemble fortement à un titre de section ? la section que constitue justement la liste <ul> qui suit ?

N'est il pas étrange et très déstabilisant finalement de :

1. De ne pas utiliser la balise adéquate dans ce cas, donc évidemment un <hn> ?
2. Et de surcroit de placer ce terme qui ressemble tant à un titre carrément dans une balise de type inline, en l'occurrence <dt> ?

Non imbrication de <ul> oui mais :

<div>
<h1>Les menus</h1>

<div>
<h2>Menu 1</h2>
<ul>
<li></li>
<li></li>
etc...
</ul>
</div>

<div>
<h2>Menu 2</h2>
<ul>
<li></li>
<li></li>
etc...
</ul>
</div>

<div>
<h2>Menu 3</h2>
<ul>
etc...
</div>

</div>


N'est il pas plus pertinent et plus exploitable (fonctionnalités d'extraction de plan de page par exemple) ?

PS :
pour les hypocondriaques de la divite, je leur conseille une bonne petite tisane tous les soirs à 20 heures 26... ça aide... Smiley cligne
Modifié par clb56 (09 Jan 2007 - 01:22)
Sujet clos
Aller à