28172 sujets

CSS et mise en forme, CSS3

Transformer un menu non déroulant en menu déroulant

Bonjour tout le monde,

J'ai un menu que j'ai créé en CSS :

http://164.15.112.38/Cocquereaux/menu/menu.html">Aperçu du menu

Je me demandais si pour certaines parties de ce menu, il y avait moyen de créer un menu déroulant ?

Voici le code CSS de mon menu :

body { width:100%; background:none scroll 0 0 #5A79BD; margin:0; padding:0; min-width:750px; font-family:Arial; }
	
#menu{ border-bottom:5px solid; border-top:5px solid; height:52px; background:url(images/menu_bg.jpg) repeat-x; }

.btn { width:91px; height:23px; float:left; text-transform:uppercase; font-size:10px; padding-top:10px; text-align:center; }

a.btn { text-decoration:none; color:black; }

a.btn:hover { text-decoration:none; color:white; background:url(images/btn_h.jpg) no-repeat; }


et voici le code HTML :


<div id="menu"> 
				<div class="btn"><a href="#" class="btn">Accueil</a></div> 
                <div class="btn"><a href="#" class="btn">Mon cabinet</a></div> 
                <div class="btn"><a href="#" class="btn">Chiens</a></div>
                <div class="btn"><a href="#" class="btn">Chats</a></div>
				<div class="btn"><a href="#" class="btn">NAC</a></div> 
                <div class="btn"><a href="#" class="btn">Alimentation</a></div> 
                <div class="btn"><a href="#" class="btn">Vos photos</a></div> 
                <div class="btn"><a href="#" class="btn">Liens utiles</a></div> 
		</div>

Je vous remercie d'avance pour votre aide.

beegees
Salut,

Déja tu devrais remplacer tes <div> par des <li>, et le conteneur de ces <div> par un <ul>.
Il s'agit d'une liste de liens, donc il est logique d'utiliser la balise idoine pour les coder.

Pour rajouter un niveau secondaire au menu, il te suffit d'ajouter une nouvelle liste imbriquée dans un ou plusieurs <li> de ta liste principale.

En masquant cette liste avec CSS, et avec quelques fonctions javascript pour la montrer au survol du lien générique et la faire disparaitre lorsque la souris s'en éloigne, tu devrais arriver à ce que tu veux.

Attention, pour garder un minimum d'accessibilité, le lien générique actif au début du <li> contenant la liste de liens secondaires, de manière à accéder à une page contenant ce sous menu lorsque javascript est désactivé.

Edit : Si mon explication n'est pas claire j'ai retrouvé cette explication de Florent V. dans un autre sujet.
Modifié par Mikachu (17 Apr 2010 - 11:38)
Salut,

Merci pour tes précieux conseils.

a écrit :
Déja tu devrais remplacer tes <div> par des <li>, et le conteneur de ces <div> par un <ul>.
Il s'agit d'une liste de liens, donc il est logique d'utiliser la balise idoine pour les coder.


Entièrement d'accord avec toi.

a écrit :
Pour rajouter un niveau secondaire au menu, il te suffit d'ajouter une nouvelle liste imbriquée dans un ou plusieurs <li> de ta liste principale.


Donc j'ajoute dans un li un ul ?

a écrit :
En masquant cette liste avec CSS, et avec quelques fonctions javascript pour la montrer au survol du lien générique et la faire disparaitre lorsque la souris s'en éloigne, tu devrais arriver à ce que tu veux.


Bien noté, merci.


a écrit :
Attention, pour garder un minimum d'accessibilité, le lien générique actif au début du <li> contenant la liste de liens secondaires, de manière à accéder à une page contenant ce sous menu lorsque javascript est désactivé.


C'est assez rare que quelqu'un désactive le javascript ? de toute façon, j'affiche un message au cas où javascript est désactivé.

a écrit :
Edit : Si mon explication n'est pas claire j'ai retrouvé cette explication de Florent V. dans un autre sujet.


Merci pour le complément d'information.

Ce que je vais faire, c'est essayer de transformer le menu (sans doute demain) et je reviens pour te dire si ça fonctionne.

Encore merci pour ton aide.

beegees
Sujet clos
Aller à