Discussion :

[Wilhem31]

Bonjour,

Tout d'abord je tiens à préciser que je suis débutant!

Actuellement en plein projet de fin d'année j'ai un problème avec mon navbar que je n'arrive pas à resoudre. Cela va surement parait simple pour la plupart d'entre vous mais j'ai pas mal à le réaliser.
J'ai une navbar responsive pris de W3school qui me va parfaitement. https://www.w3schools.com/howto/howto_js_topnav.asp

J'ai voulu rajouter sur un onglet une liste déroulante quand on clique dessus mais j'ai du mal à gerer ce clique et l'apparation/disparition sur les différentes tailles d'écran.
J'ai cacher cette liste en utilisant la propriété position : absolute et left : -999em.
Du coup sur écran large et medium un simple left : auto serait bon et sur mobile il faudrait juste que je gere la position absolute/relative pour voir le reste de la liste.

Je ne vois pas bien comment faire et si je prend le probleme par le bon bout surtout!

Si quelqu'un pourrait m'éclairer ce serait vraiment sympa!

[Invité]

Bonjour,

tant qu'à débuter, il faut le faire bien.

Le code de ta navbar n'est pas bon (sémantiquement parlant) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 <div class="topnav" id="myTopnav">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

On préfèrera un codage utilisant les balises HTML5 (ici <nav> pour "navigation"), et une liste à puce <ul><li> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 <nav class="topnav" id="myTopnav">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

En voici un qui pourrait te convenir mieux :

• Un menu déroulant en CSS3

Ou encore celui-ci (utilisant jQuery) :

• MENU multi-niveaux CSS jQuery