28172 sujets

CSS et mise en forme, CSS3

Quand la liste est plus large que l'onglet d'un menu déroulant...

Bonjour tous !

Je viens de m'inscrire ici et, promis, je n'y viendrai que pour poser des questions... je suis bien trop nulle pour répondre !

Donc je commence tout de suite Smiley cligne

Je ne suis pas très calée en création web, mais, comme je suis très prétentieuse... et très radine, je fais tout moi-même tout de même... mais avec pas mal de difficultés.

Je reformate tout mon site (qui est très ancien et pas mal en fouilli) et je commence (intelligemment !) par le menu (il est déjà en ligne, vous pouvez le voir ici).
Actuellement mes appels de menu sont longs à dessein pour masquer le fait que mes listes seraient beaucoup plus larges que l'onglet dans le cas contraire.

Existe-t-il une solution css pour créer un menu déroulant dont la liste serait plus large que l'onglet (sans que l'onglet se déforme bien sûr !) ? (comme celui-ci par exemple)

Merci d'avance
Modifié par djinnie (11 Nov 2011 - 18:40)
Bonsoir,

Le lien de jmlapam permet de créer un menu à l'aspect très séduisant mais attention : si JavaScript est désactivé, il devient alors totalement inaccessible. Je ne dis pas qu'il ne faut pas user de cette technique, mais je tiens simplement à le faire remarquer. Smiley cligne

Je poste quand même un exemple très basique de menu à deux niveaux géré via du CSS uniquement. C'est moins impressionnant du point de vue du design et des effets, mais avec un peu plus de "cosmétique" et des transitions CSS3 on peut arriver à quelque chose de sympa !

HTML :
<ul id="menu">
	<li><a href="#">Item 1</a></li>
	<li>
		<a href="#">Item 2</a>
		<ul>
			<li><a href="#">Item 2-1</a></li>
			<li><a href="#">Item 2-2</a></li>
			<li><a href="#">Item 2-3</a></li>
		</ul>
	</li>
	<li><a href="#">Item 3</a></li>
</ul>


CSS :
body, ul {
	margin: 0;
	padding: 0;
}

body {
	font-family: arial, verdana, sans-serif;
	font-size: 14px;
}

#menu, #menu ul {
	line-height: 25px;
	background-color: #efefef;
	list-style-type: none;
}

#menu {
	height: 25px;
}

#menu > li {
	width: 80px;
	position: relative;
	float: left;
}

#menu > li + li {
	border-left: solid 2px #000;
}

#menu ul {
	width: 200px;
	display: none;
	position: absolute;
	left: -2px;
	border-left: solid 2px #000;
}

#menu > li:hover ul {
	display: block;
}

#menu a {
	padding: 0 10px;
	display: block;
	text-decoration: none;
	color: #000;
}

#menu ul a {
	border-top: dotted 1px #000;
}

#menu a:hover {
	color: #6b6b6b;
}


Pour comprendre cet exemple, voici un peu de documentation sur le positionnement absolu qui est utilisé ici pour ne pas "déformer l'onglet si le sous-menu est plus large". Smiley smile
Modifié par jeremy-p (12 Nov 2011 - 00:53)
Merci à tous les 2.
Je vais déjà tester le positionnement absolu (qui de toute façon semble nécessaire et va déjà me demander un effort de réflexion, vu que je suis alignée à droite), j'aimerais d'ailleurs aussi limiter le recours aux scripts (j'en ai déjà suffisamment qui tournent à mon goût ! et puis je ne suis pas très douée pour les adapter...)
Je reviendrai vous dire ce que ca donne.
Bon week-end
exact jeremy-p, je l'ai plus posté comme tutoriel de base qu'autre chose et je suis d'accord avec toi, il faut une alternative à javascript, toujours, dans un souci d'accessibilité.
Sujet clos
Aller à