Navigateur latéral mobile responsive HTML CSS JS par TooKi - page 1

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 ?

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%');
  }
});

-
Edité par TooKi 19 octobre 2018 à 23:27:18

Navigateur latéral mobile responsive HTML CSS JS

Supprimer

Modérer

Signaler le message aux modérateurs