Menu Horizontal à doite et Sous Menu Horizontal à gauche

Bonjour,

Je cale depuis plusieurs heures sur un soucis. Comme une image parle plus que tout je vous joins le rendu final à obtenir.

http://img269.imageshack.us/img269/4915/exportqm.jpg

Je voudrais réaliser cela uniquement avec du css (si possible), mais surtout fonctionnel sur IE7.0 et +, FF3.5 et +, Safari, Chrome et Opera.
(sauf pour les radius-border)

J'ai réussi avec le code suivant:

div#menu {
	position:relative;
	width:100%;
	min-height:100px;
	padding:0px;
	margin:0px;
	text-align:right;
}
div#menu ul.menu {
	position:absolute;
	margin:0px;
	padding:0px;
	top:0px;
	right:0px;
	list-style:none;
}
div#menu ul.menu li {
	float:left;
	background-color:#41281b;
	margin:0px;
	margin-right:-3px;
	padding:0px;
	
	/*CSS3*/
	-moz-border-radius-topright: 20px;
	border-top-right-radius: 20px;
}
div#menu ul.menu a {
	position:relative;
	background:url(../img/menu_fond.jpg) right top no-repeat;
	display:block;
	float:left;
	height:60px;
	line-height:60px;
	padding:0px 40px;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	color:#FFF;
	
	/*CSS3*/
	-moz-border-radius-topright: 20px;
	border-top-right-radius: 20px;
}
div#menu ul.menu li:last-child {
	margin-right:0px;
}
div#menu ul.menu li.current a {
	background:none;
	background-color:#3eb6ea;
}

// Corection taille premier menu
	var ul_size = jQuery("#menu ul").width();
	var li_size = jQuery("#menu ul li:first-child").width();
	jQuery("#menu ul li:first-child").width(li_size + 980 - ul_size);
	jQuery("#menu ul li:first-child a").width(li_size + 980 - ul_size - 80);

J'obtiens :
http://img841.imageshack.us/img841/909/serverdevcornestone.jpg

C'est assez loin du but et je ne bute que sur le menu, même pas sous menu...

Petit présicion mais important, ce sont des menus totalement dynamique sous le CMS Joomla!, sinon serait été trop facile

Merci de votre aide !!
Modifié par dutom007 (13 May 2011 - 14:38)

Bonjour,

Quelques pistes:

- Si tu as une structure de listes imbriquées pour ton menu (ou de DIV imbriqués pour rubrique / sous-menu), tu auras sans doute intérêt à utiliser le sélecteur d'enfant pour bien maitriser la portée de tes styles. Je ne te fais pas l'injure de rappeler que ça peut s'écrire ul.menu > li > a par exemple.

- Je dirais qu'il faut reproduire, en termes de positionnement, quelque chose qui se rapproche de ce que tu as visuellement: chaque lien passe en-dessous du lien qui le précède. Donc ça veut dire que tes liens peuvent avoir un padding-left d'environ 30px, et que tu joueras sans doute sur du z-index (pour contrôler l'empilement) et sur une marge négative (au niveau des LI) pour obtenir le bon positionnement.

Merci fvsch,

Pour la première piste il est sur que je devrais porter attention à cela lorsque je travaillerais sur le sous menu.

Pour la deuxième, le nombre de menu peut varier, ainsi que le contenu et donc la taille. Comment "CSSiser" ça ?
Sachant que chaque menu à un fond dégradé, une taille différente, que le menu actif est bleu (à partir du bord gauche pour le premier), qu'il y a des bords arrondis... Et le tout avec une bonne compatibilité...

Pour info je travaille sous Joomla!, et peut donc choisir une présentation tableau ou liste.

Merci encore

dutom007 a écrit :
Pour la deuxième, le nombre de menu peut varier, ainsi que le contenu et donc la taille. Comment "CSSiser" ça ?

Pour l'essentiel, en évitant de déclarer des width inutiles.

dutom007 a écrit :
Sachant que chaque menu à un fond dégradé

Image de fond.

dutom007 a écrit :
une taille différente

Ne pas figer la largeur. Utiliser un mode de rendu ou un positionnement qui fait que l'élément se comporte comme un bloc tout en prenant la largeur du texte (plus éventuel padding): float:left, ou bien display:inline-block. Ma préférence irait au deuxième ici (avec alignement à droite grâce à un text-align:right sur le parent).

dutom007 a écrit :
que le menu actif est bleu

Comment appliquer des styles spécifiques à la page en cours dans un menu ?

dutom007 a écrit :
(à partir du bord gauche pour le premier)

Là il va falloir ruser en rajoutant en plus une classe sur le conteneur par exemple. Faire que le premier item prend toute la largeur restante en partant de la droite, ça va être pas mal compliqué je pense. Ou alors il faut tenter d'utiliser display:table-cell avec des largeurs faibles sur la plupart des items et très large sur le premier... ça peut marcher, mais compatible IE8+ (pas IE7) et ça va gêner pour créer des superpositions d'éléments.

a écrit :
Pour l'essentiel, en évitant de déclarer des width inutiles.

Comme tu peux le voir sur mon css, aucun width inutile

a écrit :
Image de fond

C'est que j'utilise actuellement

a écrit :
display:inline-block

Le prob de cette propriété:valeur est quelle a un faible taux de compatibilité

a écrit :
Comment appliquer des styles spécifiques à la page en cours dans un menu ?

Pas de souci pour ça avec la class "current"

a écrit :
Faire que le premier item prend toute la largeur restante en partant de la droite, ça va être pas mal compliqué je pense.

C'est ce que fait le code JS

Mon plus gros souci est d'avoir un véritable effet de superposition des onglet.

Pour l'alignement à droite j'ai utilisé un float:right sur le ul puis left sur les li (de cette manière l'ordre des éléments ne change pas).

Mais je me demande au final s'il ne vaut pas mieux que je superpose tout les éléments en absolute dans le coin haut gauche avec le contenu aligner à droite et qu'avec JS je spécifie des width de 980px puis le dernier puis un peu moins pour l'avant dernier et ....

Tu vois ?