28182 sujets

CSS et mise en forme, CSS3

Menu deroulant

Salut, je souhaite faire un menu déroulant avec le css mais depuis ce matin je n'y arrive pas. J'ai suivi des explications mais je n'y arrive pas. Venez à mon secours en me donnant le css à qui conviendrai à partir du code suivant:

<ul class="menu clearfix">
<li><a href="." class="active">Home</a></li>
<li><a href="presentation.html">Qui nous sommes</a></li>

<li><a href="activites.php">Nos Valeurs</a>
<ul class="nav_sub_menu">
<li class="sub_item"><a href="#e" >A</a></li>
<li class="sub_item"><a href="#" >B</a></li>
</ul>
</li>

<li><a href="ressources.html">Ressources</a></li>
<li><a href="#">Certifications</a></li>
<li><a href="#">Partenaires</a></li>
<li><a href="#">Telephone</a></li>
</ul>
Modifié par Safouin (16 May 2019 - 18:26)
Bonsoir,
Tiens une petite aide.

Aller merci la grenouille.
La grenouille si tu nous lis on te salut Smiley cligne

http://www.frogweb.fr/menu-deroulant-horizontal/


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style type="text/css">

    nav{
    	width: 100vw;
    	background: grey;
    	display: flex;
    	justify-content: space-around;
    	align-items: center;
    }

	#menu-deroulant, #menu-deroulant ul {
	    padding: 0;
	    margin: 0;
	    list-style: none;
	}
	#menu-deroulant {
	/* on centre le menu dans la page */
	    text-align: center;
	}
	#menu-deroulant li {
	/* on place les liens du menu horizontalement */
	    display: inline-block;
	}
	#menu-deroulant ul li {
	/* on enlève ce comportement pour les liens du sous menu */
	    display: inherit;

	}
	#menu-deroulant a {
		margin-left: 30px;
	    text-decoration: none;
	    display: block;
		color:#000;
	}
	#menu-deroulant ul {
	    position: absolute;
	/* on cache les sous menus complètement sur la gauche */
	    left: -999em;
	    text-align: left;
	    z-index: 1000;
	}
	#menu-deroulant li:hover ul {
	/* Au survol des li du menu on replace les sous menus */
	    left: auto;
	}
    </style>

    <title></title>
  </head>
  <body>
	<nav>
		<ul id="menu-deroulant">
				<li><a class="active" href="#">Home</a></li>
					<li><a href="presentation.html">Qui nous sommes</a></li>
			<li><a href="#">Nos Valeurs</a>
				<ul>
					<li><a href="activites.php">Activites</a></li>
					<li><a href="#">A</a></li>
					<li><a href="#">B</a></li>
				</ul>
			</li>
		    <li><a href="ressources.html">Ressources</a>
				<ul>
					<li><a href="#">Nos Ressources</a></li>
					<li><a href="#">Certifications</a></li>
					<li><a href="#">Partenaires</a></li>
					<li><a href="#">Telephone</a></li>
				</ul>
			</li>
		</ul>
	</nav>
	
  </body>
</html>
Administrateur
uniuc a écrit :
Bonsoir,
Tiens une petite aide.

Aller merci la grenouille.
La grenouille si tu nous lis on te salut Smiley cligne

Hello,

Le principe et l'explication de ce menu sont très bons.
Il a cependant un problème de taille : il ne fonctionne qu'au survol de la souris. Aucun autre dispositif de pointage n'est prévu (clavier, doigts, etc.), il n'est donc pas Accessible.

Réaliser un menu déroulant accessible est un sacré challenge car de nombreux points sont à prendre en compte... et elles nécessite généralement JavaScript.

Quelques pistes ici :
- https://a11y.nicolas-hoffmann.net/subnav-dropdown/
- https://a11y-guidelines.orange.com/web/exemples/simple-menu/simple-menu.html
Modifié par Raphael (17 May 2019 - 09:58)
@Raphael

Bonjour, oui c'est pas faux, mais pour en comprendre les bases il n'est pas si mal, puis c'est une vielle habitude de le refiler sur OCR .
Je ne connais pas les deux liens que tu viens de poser je vais aller voir, rien qu'en regardant la 1ère page j'ai vu qu'il abordais A.R.I.A, très sympa.

"Réaliser un menu déroulant accessible est un sacré challenge car de nombreux points sont à prendre en compte... et elles nécessite généralement JavaScript."

Je me demande si le vrais challenge ce ne serrais pas d'arriver à le faire entièrement en HTML/CSS.
Sujet clos
Aller à