28172 sujets

CSS et mise en forme, CSS3

Contenu d'un menu déroulant

Bonjour,

Je dispose d'un menu déroulant XHTML/CSS à un niveau.
Ce que je cherche à réaliser, c'est créer des "boîtes" pour organiser les différents items du menu, du type de celles que l'on peut voir sur les sites suivants :
-www.siteduzero.com
-www.discount.com
En effet, le menu que j'aimerais réaliser contiendra un grand nombre d'items et il faut que TOUS les items apparaissent à l'écran sans que l'utilisateur ait à naviguer à travers différents niveaux.

Si quelqu'un a des idées, je suis preneur Smiley smile

--
AP
Modifié par Laurie-Anne (29 Jun 2011 - 08:32)
Bonjour,

Je suis allé consulter les codes des 2 sites mentionnés. Voici ce que j'en pense :
- siteduzero.com :
le menu fait appel à jQuery et au CSS. La partie en javascript qui utilise la librairie est directement incorporée dans le code de la page et donc facile à cerner. La partie CSS se trouve dans le fichier séparé nommé "design.css". Le menu fait également appel à plusieurs images. La partie HTML est placée dans le div id="speedbarre"

-discount.com
menu nettement plus basique que celui du SDZ. Le code date et fait appel aux tableaux pour la mise en page Smiley ohwell . La partie CSS se trouve dans le fichier "default.pl".
Le code-source n'est pas valide; il comporte 61 erreurs et 20 avertissements.

A toi de voir Smiley cligne
Bonjour,

Je suis pas très fan de "pomper" sans comprendre les designs des sites, c'est pourquoi j'ai essayé de faire ce qui suit.
<ul id="menu">
      <li class="link"><a href="#">Menu1</a><br />
         <ul>
            <li>Groupe1</li>
            <li><a href="#">Sous-menu1</a></li>
         </ul>
         <ul>
            <li>Groupe2</li>
            <li><a href="#">Sous-menu1</a></li>
         </ul>
      </li>
      <li class="link"><a href="#">Menu2</a><br />
         <ul>
            <li>Groupe1</li>
            <li><a href="#">Sous-menu1</a></li>
         </ul>
         <ul>
            <li>Groupe2</li>
            <li><a href="#">Sous-menu1</a></li>
         </ul>
      </li>
   </ul>



ul, li { list-style : none; }
#menu .link {float : left;}
#menu li ul { display : none; }
#menu li:hover ul {
   display : block;
   float : left;
   background-color : grey;
   }


Cela dit, j'ai un souci de décalage lorsque le "Menu1" s'affiche, le "Menu2" se décale vers la droite d'une longueur égale à la largeur de "Groupe1 + Groupe2". Je pense que cela vient du "#menu .link {float : left;} mais j'avoue que je sèche un peu.

Cordialement,
Voici quelque chose, qui vaut ce que ça vaut, mais qui peut t'inspirer. C'est loin du menu du SDZ, mais c'est sans jQuery ou même simple JavaScript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>menu pur CSS</title>
    <style type="text/css">
/*<![CDATA[*/
	body {
		font: normal 14px arial,verdana,helvetica,sans-serif;
		margin:0;
		padding:0;
	}
	a {
		text-decoration : none;
		color : #F5F5F5;
		padding: 5px;
		font-size: 12px;
	}
	ul, li {
		list-style : none;
	}
	#menu .link {
		float : left;
		width : 60px;
		background:#000;
		color:#F5F5F5;
		padding : 10px;
		font-weight : bold;
		font-size : 12px;
	}
	#menu .link a.item{
		font-size: 18px;
	}
	#menu li.link ul {
		display : none;
		overflow : hidden;
		margin-top : 10px;
		background: #7E7E7E;
		border: 1px solid aqua;
		float: left;
		position : absolute;
		left : 70px;  /* facultatif et modifiable */
		/* max-width: 400px; */ /* facultatif et modifiable */
	}
	#menu li:hover ul {
		display : block;
	}
	#menu li.link ul li {
		float : left;
		margin-left: -20px;
		margin-right: 30px;
		padding: 10px;
	}
	#menu li.link ul li p {
		max-width:150px; /* modifiable */
	}
	#menu li.link ul li a {
		margin-left: -5px;
		color: pink;
	}
	#menu li.link ul li a:hover {
		color: yellow;
	}
	.groupe {
		font-weight: bold;
		color : #7DFFFF;
		padding:3px;
		border:1px solid #fff;
		text-align:center;
	}
	.link a:hover {color : orange}
	.clearboth {clear:both;}
	#suite {width:95%;margin: 20px auto 0 auto;}
	#tbl {background:#fff; color: gray; width:150px;}
	#tbl th {background:#ffff66; color:#000}
    /*]]>*/
    </style>
  </head>
  <body>
<div id="global">
<ul id="menu">
      <li class="link"><a href="#" class="item">Menu1</a><br />
         <ul> 
            <li>
				<div class="groupe">M1-Groupe1</div>
				<p>
					<a href="#">Sous-menu1-a</a><br />
					<a href="#">un autre lien</a><br />
					<a href="#">autre lien</a><br />
					<a href="#">autre lien</a><br />
					<a href="#">autre lien</a><br />
					<a href="#">autre lien</a><br />
					<a href="#">autre lien</a><br />
					<a href="#">autre lien</a>
				</p>
			</li> 
            <li>
				<div class="groupe">M1-Groupe2</div>
				<p>
					<a href="#">Sous-menu1-b</a>
					<p>
						Ici on peut mettre du texte et/ou des images.
					</p>
					<img src="http://www.wayboffice.fr/template/img/web.png" alt="" width="128" height="128" />
				</p>
			</li> 
            <li>
				<div class="groupe">M1-Groupe3</div>
				<p>
					<a href="#">Sous-menu1-c</a><br />
					<table id="tbl" border="1">
						<tr><th>COL 1</th><th>COL 2</th><th>COL 3</th></tr>
						<tr><td>col 1a</td><td>col 2a</td><td>col 3a</td></tr>
						<tr><td>col 1b</td><td>col 2b</td><td>col 3b</td></tr>
					</table>
					<p>
						<a href="#">un lien</a><br />
						<a href="#">autre lien</a><br />
						<a href="#">autre lien</a>
					</p>
				</p>
			</li> 
         </ul> 
      </li>
      <li class="link"><a href="#" class="item">Menu2</a><br /> 
         <ul> 
            <li><div class="groupe">M2-Groupe1</div><p><a href="#">Sous-menu2-a</a></p></li> 
            <li><div class="groupe">M2-Groupe2</div><p><a href="#">Sous-menu2-b</a></p></li> 
         </ul> 
      </li>
      <li class="link"><a href="#" class="item">Menu3</a><br /> 
         <ul> 
            <li><div class="groupe">M3-Groupe1</div><p><a href="#">Sous-menu3-a</a></p></li> 
            <li><div class="groupe">M3-Groupe2</div><p><a href="#">Sous-menu3-b</a></p></li> 
            <li><div class="groupe">M3-Groupe3</div><p><a href="#">Sous-menu3-c</a></p></li> 
            <li><div class="groupe">M3-Groupe4</div><p><a href="#">Sous-menu3-d</a></p></li> 
         </ul> 
      </li>
   </ul>
   <br class="clearboth" />
   <div id="suite">
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
   </div>
   </div><!--</global>-->
  </body>
</html>

Ce code peut naturellement être amélioré!
Bon travail!
Modifié par lddsoft (01 Jul 2011 - 09:16)
angepierre a écrit :
le menu que j'aimerais réaliser contiendra un grand nombre d'items et il faut que TOUS les items apparaissent à l'écran sans que l'utilisateur ait à naviguer à travers différents niveaux.

Youhoooouuu, information overload dans la gueule de l'utilisateur!
(Sur le site du zéro c'est assez catastrophique par exemple. Vraiment pas un exemple à suivre.)

Mais passons...

Côté technique, j'aime assez le plugin jQuery Superfish pour les menus déroulants (quand j'ai le malheur de devoir implémenter un menu déroulant...). Par contre de mémoire il ne gère pas les mega drop-down car il attend une structure assez stricte en UL imbriqués, et pour un mega drop-down il faut pouvoir utiliser un DIV pour englober le sous-menu (et y placer une structure HTML arbitraire). J'avais donc dû le patcher un peu, mais avec des connaissances correctes en JavaScript et jQuery c'est tout à fait faisable.

Il y a peut-être d'autres scripts de menu déroulant qui valent le détour, bien sûr. Deux choses à surveiller:
- Navigation au clavier possible et relativement simple.
- Vérifier que les items de premier niveau sont tous cliquables et mènent à une page qui permet d'accéder aux différentes pages de la section (indispensable sur un périphérique tactile par exemple).
Modifié par fvsch (01 Jul 2011 - 13:14)
Sujet clos
Aller à