Bonjour à tous, petit soucis avec la propriété :active
J'ai créer un menu avec un bouton, l'objectif étant losque je clic sur ce bouton
mon menu s'ouvre et reste ouvert en revanche avec :active je clic il s'ouvre puis se referme aussitôt,
je doit rester appuyer pour avoir le menu en permanence.
Un petit coup de pouce ne serait pas de refus merci d'avance.
Partie Html
<!Doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8 "/>
<LINK HREF="style.css" REL="stylesheet" type="text/css"/>
<title>Mon site </title>
</head>
<body>
<header>
<ul id="menu">
<li>
<a href="#"><img src="btn.jpg" width="200" height="140"></a>
<ul>
<li>
<a href="#">Tutoriels</a>
<ul>
<li>
<a href="#">Windows 8</a>
</li>
<li>
<a href="#">Windows XP</a>
</li>
</ul>
</li>
<li>
<a href="#">Video</a>
<ul>
<li>
<a href="#">Se Connecter</a>
</li>
<li>
<a href="#">Mon Compte</a>
</li>
</ul>
</li>
<li>
<a href="#">images</a>
<ul>
<li>
<a href="#">Se Connecter</a>
</li>
<li>
<a href="#">Mon Compte</a>
</li>
</ul>
</li>
<li>
<a href="#">Connexion</a>
<ul>
<li>
<a href="#">Se Connecter</a>
</li>
<li>
<a href="#">Mon Compte</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</header>
</body>
</html>Partie CSS
#menu, #menu ul
{
padding: 0;
margin: 0;
list-style: none;
line-height: 21px;
text-align: :center;
}
#menu img{
border-radius: 50% 50% 50% 50%;
border: 2px solid black;
}
#menu
{
position: absolute;
font-weight: bold;
font-family: arial;
font-size: 12px;
}
#menu a{
margin-top: 3px;
text-align: center;
border-radius: 5px;
display:block;
padding: 0;
background: #000;
color: #fff;
text-decoration: none;
width: 144px;
}
#menu li{
float: left;
border-right: 1px solid #fff;
}
html>body #menu li{
border-right: 1px solid transparent;
}
#menu li ul{
position: absolute;
width: 144px;
left: -999em;
}
#menu li ul li{
border-top: 1px solid #fff;
}
html>body #menu li ul li{
border-top: 1px solid transparent;
}
#menu li ul ul{
margin: -22px 0 0 144px;
border-left: 1px solid #fff;
}
html>body #menu li ul ul{
border-left: 1px solid transparent;
}
#menu a:focus{
color: #000;
background: #bbb;
}
#menu li:active ul ul, #menu li.sfhover ul ul {
left: -999em;
}
#menu li:active ul, #menu li li:active ul,#menu li.sfhover ul, #menu li li.sfhover ul{
left: auto;
min-height: 0;
}
p{
float: left;
padding: 0px;
}
4 réponses
Coucou !
Je ne pense pas que tu puisse faire ça avec uniquement du CSS. La propriété active ne sert qu'à modifier le comportement de quelque chose au clic, donc en général c'est utilisé pour les liens.
Ici, je pense qu'il va te falloir une couche de jquery, pour jouer avec les classes (ajout, suppression de classes css) sur ton élément afin de faire des animations à chaque clic.
Salut, par définition :active n'est déclenché que lorsque l'utilisateur appuie sur sa souris. L’événement est supprimé au relâchement de la souris. Le comportement que tu obtiens est donc normal et comme le dit @Pewel , il faut que tu passes par du JS.
Ok je comprend me voila partit en quete de jquery.
Merci de vos réponse rapide et présices au moins je c'est à quoi m'en tenir avec la propriété :active!!!
Sujet résolue!
Merci !!!