8768 sujets

Développement web côté serveur, CMS

[Résolu] Navigateur latéral mobil responsive HTML CSS JS

Bonsoir.

Dans le cadre de mon projet, j'essaie de réaliser un navigateur latéral affiché/caché selon l'état d'une checkbox pour une utilisation sur mobile.

J'ai commencer à coder quelque chose en HTML CSS et JavaScript mais ca ne fonctionne pas, si quelqu'un peut m'aider merci !

Mon navigateur en HTML placé juste après le <body> :

<nav id="menuMobile">
  <ul>
    <li> <a href="#" title="Accueil"> ACCUEIL </a></li>
    <li> <a href="#musiques" title="Musiques"> MUSIQUES </a></li>
    <li> <a href="#films" title="Films"> FILMS </a></li>
    <li> <a href="#bio" title="Bio"> BIO </a></li>
    <li> <a href="#contact" title="Contact"> CONTACT </a></li>
  </ul>
</nav>


Le code CSS associé :

#menuMobile
{
  position: fixed;
  left: 0;
  width: 40%;
  height: 100%;
}


La checkbox placée dans le header :

<input type="checkbox" id="burgerCheckbox">
  <div id="burgerBtn"></div>
</input>


Et enfin le code JavaScript :

$('#burgerCheckbox').click(function()
{
  if($('#burgerCheckbox').is(':checked'))
  {
    $('#menuMobile').css('left', '0');
  }
 
  else
  {
    $('#menuMobile').css('left', '-40%');
  }
});
Hello

Quelques remarques:

1/ La balise <input/> est auto-fermante.

2/ Effectivement, il est possible d'animer un menu avec du CSS (en utilisant un checkbox) ou en JS (en manipulant le DOM). Sauf que là que tu mélanges les 2. Choisie une méthode.
Merci pour ces réponses allan mais je pense que ta méthode fonctionne seulement dans le cas ou la checkbox est placée avant le menu or chez moi c'est l'inverse !

De toute façon ce n'est plus un problème j'ai fait un menu différent mais qui rencontre également un problème Smiley sweatdrop

Enfaite j'ai un menu en colonne sur le bord droit de l'écran avec les logos de chaque sections. Lorsque je survole l'un de ces logos, j'aimerais que le volet se déplie pour laisser apparaitre le titre de la section. Le problème c'est que avec mon code actuel, lorsque je survol un logo, tout le volet se dévoile au lieu de dévoiler seulement la ligne correspondante... Je ne sais pas si je suis clair mais voici mon code :

Le menu : 

<nav id="menuMobile">
  <ul>
    <li> <a href="#"> <img/> ACCUEIL </a></li>
    <li> <a href="#musiques"> <img/> MUSIQUES </a></li>
    <li> <a href="#films"> <img/> FILMS </a></li>
    <li> <a href="#bio"> <img/> BIO </a></li>
    <li> <a href="#contact"> <img/> CONTACT </a></li>
  </ul>
</nav>


Le CSS : 

#menuMobil
{
  position: fixed;
  right: 0%;
  top: 30%;
}

#menuMobil ul
{
  display: flex;
  flex-direction: column;
}

#menuMobil a
{
  margin-right: -135px;
  width: 170px;
  display: block;
}

#menuMobil li:hover + a
{
  margin-right: 0px;
}

Modifié par TooKi (30 Oct 2018 - 15:03)
Salut !

Merci beaucoup Allan j'ai réussis à obtenir ce que je cherchais en m'inspirant de ton exemple.
J'ai quand même du pas mal modifier ton code mais le résultat est là, et sans JavaScript en plus ! Smiley ravi

Si ca peux servir à quelqu'un :
http://jsfiddle.net/dgwzejs0/1/
Modifié par TooKi (31 Oct 2018 - 16:20)
Meilleure solution
Sujet clos
Aller à