Menu déroulant horizontal

Wiksa

Bonjour à tous,

Je suis actuellement en train de concevoir un site (blog et pages statiques) avec Pluxml qui me plait beaucoup. J'ai modifié le thème sans trop de problème jusqu'ici en modifiant la feuille de style.

Mais maintenant je souhaite faire un menu déroulant horizontal (vers les pages statiques et externe) pour remplacer le menu de base de Pluxml qui ne me convient pas. Il serait au même endroit.

Mon cahier des charges est le suivant :

- Je voudrais pouvoir adapter la longueur des cellules principales à la longueur du texte qu'elles
contiennent.
- Je voudrais que le texte soit blanc sur fond noir
- Lorsqu'on passe la souris sur la cellule je voudrais que le texte soit noir sur fond blanc.
- Je voudrais pouvoir insérer deux petites images représentant un drapeau avec un lien vers les pages
non françaises du site (qui sot en fait d'autres Pluxml, c'est le seul moyen de faire du multilinguisme,
non?).

Voila mon menu:

<div id="test">
		<ul>
		<li><a href=#>Blog</a></li>
		<li><a href=#>Parcours initiatique</a></li>
        
		<li><a href=#>Multimédia</a>
			<ul>
				<li><a href=#>Entrevues</a></li>
				<li><a href=#>Conférences</a></li>
				<li><a href=#>Documentaires</a></li>
				<li><a href=#>Débats</a></li>
                <li><a href=#>Divers</a></li>
			</ul>
		</li>
        	
		<li><a href=#>Documents</a>
			<ul>
				<li><a href=#>Presse</a></li>
				<li><a href=#>Études</a></li>
				<li><a href=#>Autres</a></li>
			</ul>
		</li>
        	
		<li><a href=#>Livres</a></li>
        <li><a href=#>Liens</a></li>
	</ul>

Le problème vient du fait que je veuille définir une taille précise à chaque cellule principale. Je ne sais pas comment "traduire" ça en CSS. J'ai fait quelques recherches sur internet et je n'ai rien trouvé. Sinon je pensais faire un menu pour chaque cellule. Qu'en pensez-vous ? Pourriez-vous m'aiguiller, me donner des conseils.


Merci d'avance


PS: Je découvre le CSS et autres langages.

Skyline

Je n'ai pas fait l'essai, mais je pense que tu pourrais arriver à quelque chose en attribuant le comportement de blocs aux éléments <li> des cellules principales (display : block;)
Si tu es débutant en CSS tu peux t'inspirer de bibliothèques de menus facilement trouvable (jette un coup d'œil du coté d'Alsacreations par exemple).

Wiksa

Merci de ta réponse

J'ai oublié de publier le code CSS

#test {background:#000 url("img/menu.png") no-repeat left;margin: 0 0 25px 0;height:35px;width:900px;}
#test li a {display:block;padding:5px 10px 4px 26px;color: #fff;text-decoration:none;font-size:1.00em;letter-spacing:3px;}
#test ul {margin:0px;padding:0;}
#test ul li {float:left; display:inline;padding:0px;position:relative;margin:0 0px;background:black;width:150px;}
#test ul li li {float:none;display:block;margin:0; width:150px;}
#test ul ul {position:absolute;display:none;left:0;}
#test ul li:hover ul {display:block;}

et voila le résultat :



Donc ce que je voudrais c'est que "parcours initiatique" soit sur la même ligne et réduire la taille des cellules qui ont du texte court, que tout soit groupé plus à gauche pour pouvoir mettre mes petits drapeaux.

Je vais chercher dans les sites que tu m'as conseillé.

Merci

Skyline

Déjà tu as le :

#test ul li {float:left; display:inline;padding:0px;position:relative;margin:0 0px;background:black;width:150px;}

Qui contraint tout de suite les cellules à 150px.

Wiksa

Merci ! ça marche ! Les cellules s'adaptent à la longueur du texte.

Encore une petite question : comment puis-je mettre un fond transparent, pour que le motif en arrière plan apparaisse, et un texte noir au passage de la souris ?

Merci d'avance

Skyline

Pour supprimer le fond noir, supprime la propriété "background : black".

Wiksa

Bonsoir,

En fait je voudrais garder le fond noir, c'est pour ça que j'ai laissé "background:black". C'est au passage de la souris que je voudrais que le fond soit transparent et que le texte soit en noir. Faut-il ajouter du code ?


Merci d'avance

Stéphane

essaye en rajoutant ces lignes dans ton fichier css

#test ul li:hover {background-color:transparent;}
#test ul li:hover a { color:#000000;}

Wiksa

Merci Stéphane ! J'ai presque réussi à faire ce que je voulais.

Finalement j'ai mis un fond blanc. J'ai réussi à centrer le texte dans les cellules. Le problème maintenant c'est que le texte est noir sur fond noir "au repos", lorsqu'on ne passe pas le curseur sur les cellules.

J'ai pourtant essayé de mettre "color:#FFFFFF;" sur toutes les lignes mais rien n'y fait il reste noir.

Je voulais aussi mettre une bordure d'un pixel et je n'ai pas réussi avec "border:1px;".

#test {background:#000;margin: 0 0 25px 0;height:31px;width:900px;}
#test li a {display:block;padding:5px 15px 5px 15px;text-decoration:none;font-size:1.00em;letter-spacing:3px;color: #fff;}
#test ul {margin:0px;padding:0;}
#test ul li {float:left; display:inline;padding:0px;position:relative;margin:0 0;background:#000000;height:31px;}
#test ul li li {float:none;display:block;margin:0 0 0 0 0; width:160px;}
#test ul ul {position:absolute;display:none;left:0px;}
#test ul li:hover ul {display:block;}
#test ul li:hover {background-color:#FFFFFF;}
#test ul li:hover a {color:#000000;}

Frédéric

Bonjour Wiksa,

Dans ton css essaye ça:

.test { position:relative; font-family: arial, sans-serif; width:100%; height:33px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#000; }

/* Simple liste (Niveau de base) */
.test ul {padding:0; margin:0; list-style: none;}
.test ul li {float:left; position:relative;}
.test ul li a { border-right:1px solid #666666; padding:9px; display:block; text-decoration:none; color:#000; text-align:center; color:#fff;}
.test ul li a:hover {color:#ffffff; background:#232323;}

/* Second Niveau du Menu */
.test ul li ul {display: none;}
.test ul li:hover ul { border:1px solid #666666; font-size:13px; display:block; position:absolute; top:33px; min-width:150px; left:0;}
.test ul li:hover ul li a {display:block; background:#fff; color:#000; width:150px; }
.test ul li:hover ul li a:hover {background:#333; color:#ffffff;}

Le code html du menu:

<div class="test">
<ul>

  <li><a href="#">Simple Menu</a></li>
  
  <li><a href="#">Niveau 2</a>
   <ul>

     <li><a href="#">Lien Niveau 2 a</a></li>
     <li><a href="#">Lien Niveau 2 b</a></li>
     <li><a href="#">Lien Niveau 2 c</a></li>
     <li><a href="#">Lien Niveau 2 d</a></li>
     <li><a href="#">Lien Niveau 2 e</a></li>
  </ul>

 </li>
  <li><a href="#">Niveau 3</a>
   <ul>
    <li><a href="#">Lien Niveau 2 a ♦</a>
        <ul>
         <li><a href="#">Lien Niveau 3 #a</a></li>
         <li><a href="#">Lien Niveau 3 #b</a></li>
         <li><a href="#">Lien Niveau 3 #c</a></li>
        </ul>
      </li>
    <li><a href="#">Lien Niveau 2 b ♦</a>
        <ul>
         <li><a href="#">Lien Niveau 3 #a</a></li>
         <li><a href="#">Lien Niveau 3 #b</a></li>
         <li><a href="#">Lien Niveau 3 #c</a></li>
       </ul>
     </li>
    <li><a href="#">Lien Niveau 2 c ♦</a>
        <ul>
         <li><a href="#">Lien Niveau 3 #a</a></li>
         <li><a href="#">Lien Niveau 3 #b</a></li>
         <li><a href="#">Lien Niveau 3 #c</a></li>
       </ul>
     </li>
  </ul>
 </li>
  <li><a href="#">Liens</a></li>
</ul>
</div>

Note : le sélecteur CSS ">" ne marche pas sur IE 6.

Wiksa

Bonsoir,

Merci Skyline et Fred, je touche presque au but ! J'ai fait mon menu à partir du code que tu m'as fourni et il ne reste plus qu'un petit problème que je n'arrive pas à résoudre.

Mon menu est composé de cellules "déroulantes" et non déroulantes. Les cellules "déroulantes" fonctionnent correctement. En revanches, les cellules non déroulantes, lorsque je passe le curseur dessus ne réagissent pas comme je le voudrait : le fond devient blanc comme prévu mais le texte est blanc jusqu'au moment ou je pointe le curseur sur le texte qui, alors, devient noir. Ca fait qu'on ne voit le texte qui si, par hasard, on passe le curseur dessus.

J'ai essayé de changer les valeurs des couleurs sur toutes les lignes, de rajouter du code, d'enlever... rien n'y fait je bloque. Je me permets de vous demander une nouvelle fois de l'aide.

Voila le code :

<div id="test">
            <li><span>Blog</span>
            <li><span>Parcours initiatique</span>
            <li><span>Multimedia</span>
                <ul>
                    <li><a href="#">Sous Menu 1</a></li>
                    <li><a href="#">Sous Menu 2</a></li>
                    <li><a href="#">Sous Menu 3</a></li>
               </ul>
            </li>

            <li><span>Documents</span>
                <ul>
                    <li><a href="#">Sous Menu 1</a></li>
                    <li><a href="#">Sous Menu 2</a></li>
                    <li><a href="#">Sous Menu 3</a></li>
               </ul>
            </li>            
            
           <li><span><a href="#">Livres</a></a></span>
           <li><span><a href="#">Liens</a></span>
        </ul>

#test { background: transparent; color: #FFFFFF; margin: 0 0 0px 0; padding: 0 0 0 0; height:33px;width:900px; display:block;}
#test > li { list-style-type:none; float:left; display:block; margin:0px 0px; position:relative; text-align:center; vertical-align:middle; line-height: 31px; height:31px; border: 1px solid #000; background: #000000; }
#test > li:hover ul { display:block; }
#test > li:hover { background-color: #FFFFFF; color: #000000; border:1px solid #000; }
#test li ul { margin:0px 0px 0 0px; display:none; padding: 0px 0 0px 0; text-align:center; }
#test li ul li { list-style-type:none; margin:-1px 0px 0px 0px; background-color: #000000; font-weight:bold; }
#test li ul li a { display:block; padding:0px 15px 0 15px; color:#FFF; text-decoration:none; height:33px;}
#test li ul li:hover a { background-color:#FFF; color:#000; height:31px; border: 1px solid #000000;}
#test li span { cursor:pointer; margin:0px 28px 0px 28px; font-weight:bold; letter-spacing: 2px; font-size: 1.1em; }
#test li span a { color: #FFFFFF; }
#test li span:hover a { color:#000; }

Encore merci pour votre aide !

Frédéric

Je viens d'éditer mon post juste au dessus, cette fois ci tu pourras tout faire avec ce code

Wiksa

Merci Fred ! J'y suis presque !

Un tout petit problème est apparu : la taille de la police est plus grande dans le sous-menu que dans le menu. J'ai pu définir la police, sa taille, etc. pour le menu mais ça ne marche pas pour le sous-menu

/* Simple liste (Niveau de base) */
.test ul {padding:0 0 0 0; margin: 0 0 0 0; list-style: none;}
.test ul li {float:left; position:relative; }
.test ul li a { padding: 6px 26.75px 6px 26.75px; display:block; text-decoration:none; color:#ffffff; text-align:center; }
.test ul li a:hover {color:#000000; background:#ffffff;}

/* Second Niveau du Menu */
.test ul li ul { display: none; font-size: 1.1em; }
.test ul li:hover ul { border:1px solid #000; display:block; position:absolute; }
.test ul li:hover ul li a {display:block; background:#000; color:#fff; }
.test ul li:hover ul li a:hover { background:#ffffff; color:#000000; }

Ou faut-il mettre le code ?

EDIT: en fait elles sont de la même taille mais je voudrais pouvoir reduire la taille de la police.

Frédéric

Tu as oublié cette ligne tout en haut:

.test { position:relative; font-family: arial, sans-serif; width:100%; height:33px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#000; }

Tu pourras donc modifier font-size:14px; et font-size: 1.1em; pour le second niveau

Wiksa

Oups, j'ai oublié de la mettre dans le message mais pas dans ma page.

.test { position:relative; width:900px; height:31px; border: 1px solid #000; font-size: 1.2em; font-weight: bold; letter-spacing : 2px; color:#ffffff; background:#000; }

/* Simple liste (Niveau de base) */
.test ul {padding:0 0 0 0; margin: 0 0 0 0; list-style: none;}
.test ul li {float:left; position:relative;  }
.test ul li a { padding: 5px 26.75px 5px 26.75px; display:block; text-decoration:none; color:#ffffff; text-align:center; }
.test ul li a:hover {color:#000000; background:#ffffff;}

/* Second Niveau du Menu */
.test ul li ul { display: none; }
.test ul li:hover ul { border:1px solid #000; display:block; position:absolute; }
.test ul li:hover ul li a {display:block; background:#000; color:#fff; }
.test ul li:hover ul li a:hover { background:#ffffff; color:#000000; }

J'ai essayé de mettre font-size à toutes les lignes mais ça ne marche pas.

Wiksa

J'ai reussi !
Je ne pouvais pas entrer de valeurs en "em", il n'acceptait que les % ou les px.

Par contre je me rends compte que l'affichage n'est pas exactement le même en fonction des navigateurs (firefox, chrome, opéra, IE8). Le seul à afficher correctement le menu est firefox. Les autres n'affichent pas la bordure inférieure ou/et ils n'affichent pas le menu sur les 900px.

Comment puis-je remédier à cela ?

EDIT : finalement j'ai à peu près réussi à faire ce que je voulais. Mes sous-menus sont juste plus large de 2 pixels que le menu principal et selon les navigateurs le menu se déploie sur les 900 pixels. Je suppose que Chrome et Opéra ne gère pas les décimales pour le padding.

Je vous remercie tous pour votre aide qui m'a été indispensable pour réaliser ce menu. Et si vous avez un petit tuyaux pour les deux derniers détails je preneur.

Merci encore !

TekTak

Est-ce que l'on pourrais avoir le lien de ton site s'il est disponible ? je serais super intéressé à voir le résultat du menu déroulant !

Wiksa

Salut TekTak,

Va voir ici : http://kezakowasi.free.fr/pluxml/
Dis-moi ce que tu en penses après !

Bonne journée

TekTak

J'aime beaucoup !

Le seul inconvénient que j'ai rencontré, je ne sais pas si c'est à cause de la lenteur de ma connexion internet, mais lors du parcours des éléments déroulant, c'étais un peu lent, mais pour le design et la fonctionnalité, c'est super !

C'est long à faire ce genre de menu ? Je serai probablement intéressé afin d'alléger ma barre de menu(juste à aller voir la première page de mon blog.)

merci

p-s.: j'ai testé les menus sur un autre ordinateur puis aucun problème de vitesse ! alors oublie l'inconvénient que j'ai trouvé, cela est du aux ordinateur que l'on a notre école et leur lenteurs.

Wiksa

Le dernier code donné par Fred est celui que j'ai utilisé pour faire le menu. Une fois que tu as le bon code ce n'est pas très long.

Tout le monde ici se fera un plaisir de t'aider.

TekTak

Merci !!!

Cette fin de semaine je ferai ça !