Barre de navigation (liste) en JS
Bonjour à tous !
J'espère que quelqu'un pourra m'aider, ça fait 4 jours que je suis dessus...
Je viens tout juste de commencer un projet en Responsive et je suis débutante sur TOUT les langages en plus :x
J'essaie de faire une barre de navigation avec une liste ul> li>/Li> ul> & l'activer avec du JS pour dérouler le sous-menu, mais ça ne marche pas comme je voudrais.
J'ai essayé avec "addeventlistener" avec un "click", ça marche mais est-ce que le click marche également sur tablette & mobile ? 0.o....
Mon but était pouvoir ouvrir la catégorie "atelier & formation" & si l'utilisateur sort du menu + sous-menu, le sous-menu finit par disparaitre.
DSL d'avance si c'est mal expliquer ! :/ (Je ne suis pas très douée)
Voici mes codes:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| <nav>
<ul>
<li><a href="index.html"><i class="fas fa-home"></i>Accueil</a></li>
<li><a href="#"><i class="fas fa-newspaper"></i>Actualité</a></li>
<!-- <li id="ateliers"><a href="#"><i class="fas fa-graduation-cap"></i>Ateliers & Formations</a> -->
<li id="ateliers"><a href="#"><i class="fas fa-graduation-cap"></i>Ateliers & Formations</a>
<div class="menu hidden" id="affiche">
<div class="sousmenu">
<h2>Ateliers</h2>
<ul>
<li><a href="http://www.alis44.org/spip.php?article61">Catch the Bullet</a></li>
<li><a href="#">Snoopy</a></li>
<li><a href="#">Fallen</a></li>
<li><a href="#">Sui</a></li>
<li><a href="#">Wave</a></li>
<li><a href="#">Golf</a></li>
</ul>
</div>
<div class="sousmenu">
<h2>Formations</h2>
<ul>
<li><a href="#">Gadget</a></li>
<li><a href="#">Green</a></li>
<li><a href="#">Green Tree</a></li>
<li><a href="#">Green Tree</a></li>
<li><a href="#">Wobbler</a></li>
</ul>
</div>
</div>
</li>
<li><a href="https://www.asso-linux.org/forum/" target="_blank"><i class="fas fa-users"></i>Forum Asso-Linux</a></li>
<li><a href="tarifs.html"><i class="fas fa-address-card"></i>Nos tarifs</a></li>
<li><a href="contact.html"><i class="fas fa-envelope"></i>Contactez nous!</a></li>
</ul>
</nav> |
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
|
.menu {
position: absolute;
left: 0;
right: 0;
text-align: center;
color: white;
}
.menu ul {
padding: 0;
}
.menu a {
color: white;
}
.hidden {
display: none;
}
.sousmenu {
display: inline-block;
vertical-align: top;
margin: 0 100px;
}
#affiche{
background-color: rgba(0, 154, 43, 0.8);
border: 1px solid black;
} |
Code:
1 2 3 4 5 6 7 8 9 10 11
|
document.querySelector("#ateliers").addEventListener("click", onClickAteliers);
//document.querySelector("#ateliers").addEventListener("mouseout", onOutAteliers);
function onClickAteliers(evt)
{
console.log('ok');
var affiche = document.querySelector("#affiche");
affiche.classList.toggle("hidden");
evt.preventDefault();
} |