Bonjour les amis

J'utilise le menu générer via la gestion du menu du panel admin

Mais j'ai besoin d'un menu qui ressemble grosso modo à celui-ci!


Comment modifier le css dans #headmenu pour arriver à mes fins

Bien amicalement
Alex

A partir de la ligne 211 du fichier style.css de ton thème, je te conseil d'utiliser le plugin firebug sur firefox pour réaliser le repérage du css dans le thème

Firefox >> http://www.mozilla.org/fr/firefox/fx/
Firebug >> https://addons.mozilla.org/fr/firefox/addon/firebug/

Re angecris

Bon je m'en suis pas trop mal sortie
Voici le résultat:


Il me reste plus qu'à trouver comment aligner les sous menus vers la gauche puis les disposer les uns à cotés des autres et non les uns en dessus des autres comme ceci:


Bien amicalement
Alex

Bonjour alexandrevatin

Pour en arriver a ton résultat, il faut modiffier le CSS.

Éditer: je t'avais ajouter un bout de code, mais cela fonctionnait que sous Firefox, je continu a te trouver une solution.
Ce menu te plait: http://www.piccante.co/dropline/index.html ?

@++

Bonjour Zoltatem

Merci pour le coup de patte l'ami Zoltatem

Citation par Zoltatem, Dernier message le 15/2/2012 à 14:21

Citation:
Ce menu te plait: http://www.piccante.co/dropline/index.html ?

Oui je pense que je pourrais l'adapter
Disons que je dois réspecter une charte graphique
Je n'ai pas trop l'habitude des contraintes
Le résultat final doit resembler grosso modo a ceci:


Bien amicalement
Alex

Re alexandrevatin

Voila ton bout de code.

Remplace les lignes du fichier style.css 248 a 470 par celui ci:

Code:

#headmenu { clear: both; height: 40px; width: 960px; position: relative; text-align: center; z-index: 100; } #headmenu ul#nav { background-color: #DC0000; border-top-left-radius: 10px; border-top-right-radius: 10px; float: left; list-style: none outside none; margin: 0; padding: 0; width: 960px; } #headmenu ul#nav li { display: inline; } #headmenu ul#nav li a { background-color: #DC0000; border-top-left-radius: 10px; border-top-right-radius: 10px; color: #FFFFFF; float: left; font: bold 1.1em/40px arial,verdana,tahoma,sans-serif; margin: 0; padding: 0 30px; text-decoration: none; text-shadow: 1px 1px 1px #880000; } #headmenu ul#nav .current a, #headmenu ul#nav li:hover > a { background: none repeat scroll 0 0 #BB0000; border-top-left-radius: 10px; border-top-right-radius: 10px; color: #FFFFFF; text-decoration: none; text-shadow: 1px 1px 1px #330000; } #headmenu ul#nav ul { display: none; } #headmenu ul#nav li:hover > ul { background-color: #AA0000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; display: block; height: 45px; margin: 40px 0 0; position: absolute; width: 960px; } #headmenu ul#nav li:hover > ul li a { background-color: #AA0000; color: #FFFFFF; float: left; font: bold 1.1em/45px arial,verdana,tahoma,sans-serif; margin: 0; padding: 0 30px 0 10px; text-decoration: none; text-shadow: 1px 1px 1px #110000; } #headmenu ul#nav li:hover > ul li a:hover { color: #120000; text-decoration: none; text-shadow: none; }

@++

Re alexandrevatin

J'avais pas vue ta réponce

Je vais voir pour une adaptation en utilisant ce menu avec ton exemple

@++

Merci beaucoup Zoltatem

Je garde http://www.piccante.co dans mes favoris.
Il y a de très bonnes idées!
Je vais souvent trouver de l'inspiration ici:
http://www.htmldrive.net/

Bien amicalement
Alex

Re

Regarde ce menu: http://www.pragmamx.ca/test_menu/Sanstitre-1.html
Dit moi s'il te convient.
PS: je me suis inspiré de ton image

@++

RE Zoltatem

C'est tout à fait dans l'esprit!
Il faudrait que les sous menus soient sur la gauche car à premiere vu c'est difficile de les survoler.

C'est gentil de passer du temps pour moi Zoltatem

Bien amicalement
Alex

Re

Voici ton code:

Code:

#headmenu { clear: both; height: 40px; width: 960px; position: relative; text-align: left; z-index: 100; } #headmenu ul#nav { background: url("../images/bg_m.png") repeat-x scroll 0 0 transparent; float: left; margin: 0; padding: 0; width: 960px; } #headmenu ul#nav li { display: inline; } #headmenu ul#nav li a { background: url("../images/bg_m.png") repeat-x scroll 0 0 transparent; color: #000000; float: left; font: bold 1.1em/40px arial, verdana, tahoma, sans-serif; margin: 0; padding: 0 20px; text-decoration: none; border-style: solid; border-color : #cccccc; border-width: 0 0 0 1px; } #headmenu ul#nav .current a, #headmenu ul#nav li:hover > a { background: none repeat scroll 0 0 #ffffff; border-top: 1px solid #cccccc; color: #ff6600; text-decoration: none; } #headmenu ul#nav ul { display: none; } #headmenu ul#nav li:hover > ul { background-color: #ffffff; display: block; height: 40px; margin: 40px 0 0; position: absolute; width: 960px; } #headmenu ul#nav li:hover > ul li a { background-color: #ffffff; color: #000000; float: left; font: bold 1.1em/40px arial, verdana, tahoma, sans-serif; margin: 0; padding: 0 20px 0 14px; text-decoration: none; border-style: none; background-image: url("../images/sqorange.gif"); background-repeat: no-repeat; background-position: center left; font-size: 11px; margin: 0 5px 0 5px; } #headmenu ul#nav li:hover > ul li a:hover { color: #120000; text-decoration: none; text-shadow: none; background-image: url("../images/sqorange.gif"); background-repeat: no-repeat; }

Et tes 2 images pour le dossier de ton theme/images
http://www.pragmamx.ca/test_menu/bg_m.png
http://www.pragmamx.ca/test_menu/sqorange.gif

@++

Super sympa

Merci Zoltatem

Je peux supprimer le répertoire sur mon hébergeur ?


@++

Bonjour Zoltatem

J'ai récupéré les images vous pouvez faire de la place.

Bien amicalement
Alex