Bonjour à tous,
j'ai un petit souci avec la conception d'un menu déroulant en accordéon en CSS, qui fonctionne correctement sur mobile et pas sur PC.
Lorsque je clique sur un sous-menu dans la version mobile, celui-ci se déroule correctement. Je peux ensuite cliquer sur un autre sous-menu.
Par contre, sur PC, l'effet déroulant est obtenu à l'aide d'un :hover. Du coup, quand je passe la souris d'un sous-menu à l'autre, le premier se ferme immédiatement, empêchant d'ouvrir le second. Je pourrais sans doute mettre une petite couche de javascript pour corriger tout ça, mais je préférerais l'éviter.
Voici une page de test pour visualiser tout ça plus clairement :
http://www.courspythagore.com/soutien-scolaire/mobile/menuderoulant.php
Et voici le code correspondant :
j'ai un petit souci avec la conception d'un menu déroulant en accordéon en CSS, qui fonctionne correctement sur mobile et pas sur PC.
Lorsque je clique sur un sous-menu dans la version mobile, celui-ci se déroule correctement. Je peux ensuite cliquer sur un autre sous-menu.
Par contre, sur PC, l'effet déroulant est obtenu à l'aide d'un :hover. Du coup, quand je passe la souris d'un sous-menu à l'autre, le premier se ferme immédiatement, empêchant d'ouvrir le second. Je pourrais sans doute mettre une petite couche de javascript pour corriger tout ça, mais je préférerais l'éviter.
Voici une page de test pour visualiser tout ça plus clairement :
http://www.courspythagore.com/soutien-scolaire/mobile/menuderoulant.php
Et voici le code correspondant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylemenuderoulant.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<nav id="navMenuLateral">
<ul>
<li class="degradeGris" id="liDomicile">
<header>Cours à domicile</header>
<ul>
<li>
<span class="flecheMenu"></span><header>Suivi hebdomadaire</header>
<article>
<p>Bla bla...</p>
<p>Bla bla...</p>
<p>Bla bla...</p>
<p>Bla bla...</p>
<p>Bla bla...</p>
</article>
</li>
<li>
<span class="flecheMenu"></span><header>Stages intensifs</header>
<article>
<p>Bla bla...</p>
<p>Bla bla...</p>
<p>Bla bla...</p>
</article>
</li>
<li><span class="flecheMenu"></span><header>Formule Duo</header></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
/*----------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------- BALISES GENERALES ---------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
html, body, div, h1, h2, p, header, footer, nav, section, ul {
margin: 0;
padding: 0;
border: 0;
}
header, nav, section, aside, footer {
display: block;
}
ol, ul {
list-style: none;
}
body
{
font-family: "Myriad Pro Bold","fontdefault","Lucida Grande",Tahoma, "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
color: #181818;
margin:0;
background-color:#F3F0F0;
}
article
{
display: inline-block;
vertical-align: top;
text-align: justify;
}
/*----------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------ MENU LATERAL ----------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
#navMenuLateral
{
width:20%;
min-height:200px;
background-color:white;
display:inline-block;
border-radius:8px;
box-shadow: 2px 1px 5px #8f8d8c;
padding:5px;
}
#navMenuLateral header
{
font-size: 1.5em;
color: #181818;
padding-bottom: 3px;
text-decoration: none;
font-weight:bold;
margin-top:13px;
display:inline-block;
}
#navMenuLateral header:hover
{
color: #222;
text-decoration:none;
}
#navMenuLateral ul
{
list-style-type: none;
margin-top:10px;
}
#navMenuLateral ul li
{
display: inline-block;
margin-bottom:10px;
font-size: 0.7em;
width: 100%;
height: 47px;
text-align: center;
border-radius: 8px;
color: #222;
text-shadow:-1px -1px 1px white;
box-shadow: 2px 1px 2px #8f8d8c;
overflow:hidden;
transition:min-height 0.5s ease;
}
#navMenuLateral ul li:hover
{
min-height:125px;
height:auto;
}
#navMenuLateral ul li:active
{
min-height:125px;
height:auto;
box-shadow: 1px 1px 5px black inset,
0 1px 0 rgba( 255, 255, 255, 0.2);
}
#navMenuLateral ul li ul
{
background-color:white;
box-shadow: 2px 1px 5px 1px #8f8d8c;
margin-top:11px;
}
#navMenuLateral ul li ul li
{
display: inline-block;
font-size: 1.3em;
width: 100%;
height: 25px;
text-align: left;
border-radius: 0px;
color: #222;
transition:none;
margin-bottom:-1px;
box-shadow:none;
border-bottom:1px solid #8f8d8c;
}
#navMenuLateral ul li ul li:hover
{
height:auto;
cursor:pointer;
}
#navMenuLateral ul li ul li:active
{
height:auto;
}
#navMenuLateral ul li ul li header
{
color: #ff00de;
margin-top:4px;
padding-bottom:4px;
height:17px;
display:inline-block;
font-size:1em;
font-weight:normal;
}
#navMenuLateral ul li ul li header:hover
{
color: #ff00de;
text-shadow:2px 2px 1px #cacaca;
}
#navMenuLateral ul li ul li span.flecheMenu
{
background:url("../img/flechemenu.png") no-repeat;
background-size: 100% 100%;
width:15px;
height:15px;
display:inline-block;
margin-bottom:-3px;
}
#navMenuLateral ul li ul li article:hover
{
height:auto;
}
article
{
width:100%;
}
@media (max-width: 767px){
#navMenuLateral
{
width:100%;
}
#navMenuLateral ul
{
margin-top:5px;
}
#navMenuLateral ul li
{
width:97.5%;
margin-bottom:8px;
}
}
@media (min-width: 481px) and (max-width: 767px){
#navMenuLateral ul li
{
margin-bottom:5px;
height:28px;
}
#navMenuLateral header
{
margin-top:5px;
}
}
.degradeGris
{
background: #cecdce;
background: -webkit-linear-gradient( #f5f4f5, #cecdce);
background: -moz-linear-gradient( #f5f4f5, #cecdce);
background: -ms-linear-gradient( #f5f4f5, #cecdce);
background: -o-linear-gradient( #f5f4f5, #cecdce);
background: linear-gradient( #f5f4f5, #cecdce);
}
.degradeGris:hover
{
background: #e504c8;
background: -webkit-linear-gradient( #dbabd5, #e504c8);
background: -moz-linear-gradient( #dbabd5, #e504c8);
background: -ms-linear-gradient( #dbabd5, #e504c8);
background: -o-linear-gradient( #dbabd5, #e504c8);
background: linear-gradient( #e8e7e8, #b7b6b7);
}