Адаптивный дизайн навигационной панели

Question

Я изучаю адаптивный веб-дизайн, и теперь моя веб-страница реагирует почти на 100%.Единственная проблема - это навигационная панель, когда она превращается в меню гамбургеров, она должна показывать раскрывающееся меню, когда вы нажимаете на нее, но она ничего не делает, я использовал какой-то javascript из-за учебника, который смотрел, но не знаю какиспользуйте его в данный момент.

Вот HTML-код навигационной панели:

<nav>
      <img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
      <button class="hb-button"><i class="fa fa-bars"></i>
        <ul class="mobilemenu">
          <li class="home">INICIO</li>
          <li class="contacto">CONTACTO</li>
          <li class="registro">REGISTRATE</li>
          <li class="iniciar-s">INICIAR SESION</li>
        </ul>
      </button>
      <ul class="menu">
          <li class="home">INICIO</li>
          <li class="with-arrow">CONTACTO
            <div class="contact-box">
              <h3>Contactanos</h3>
              <form>
               <input type="text" name="" placeholder="Tu nombre">
               <input type="text" name="" placeholder="Tu apellido">
               <input type="text" name="" placeholder="Tu e-mail">
               <textarea name="" id="" cols="30" rows="10" placeholder="Tu mensaje"></textarea>
               <input type="submit" name="" value="Listo" >
              </form>
            </div>
          </li>
          <li class="with-arrow">REGISTRATE
            <div class="register-box">
              <h1>Ingresa tus datos</h1>
              <form>
                <p>¿Cómo te llamas?</p>
                <input type="text" name="" placeholder="Tu nombre">
                <p>¿Cuál es tu apellido?</p>
                <input type="text" name="" placeholder="Tu apellido">
                <p>¿Cuándo naciste?</p>
                <input type="date">
                <p>¿Cómo es tu correo?</p>
                <input type="text" name="" placeholder="Tu e-mail">
                <p>Elige una buena contraseña</p>
                <input type="password" name="" placeholder="Elige una contraseña">
                <p>Confirmala (¡por si acaso!)</p>
                <input type="password" name="" placeholder="Confirmala">
                <input type="submit" name="" value="Listo" >
              </form>
            </div>
          </li>
          <li class="with-arrow">INGRESAR
            <div class="login-box">
              <h2 id="datos-ingreso">Datos</h2>
              <form>

                <input type="text" name="" placeholder="Escribir e-mail">

                <input type="password" name="" placeholder="Escribir Contraseña">
                <input type="submit" name="" value="Listo">
                <a href="">¿Contraseña olvidada?</a>
              </form>
            </div>
          </li>
          </ul>
    </nav>

Как видите, я сделал одну навигационную панель длякомпьютер и еще один для меню гамбургеров, теперь посмотрите, как я пытаюсь заставить его прийти в себя в css:

.hb-button{
                float: right;
                background: #222;
                color: #ffffff;
                border: none;
                font-size: 18px;
                padding: 5px 10px;
                border-radius: 3px;
                cursor: pointer;
                display: none;
            }
            nav{
                float: right;

                width: 100%;
                float: right;
            }
            nav ul{

                margin: 0;
                padding: 0;
                text-align: center;
                list-style: none;
                position: relative;
                z-index:1000;
                float: right;
            }
            nav li{
                float: right;
                display: inline-block;
                margin-left: 3.66%;
                padding: 1.46%;
                position: relative;
            }
            nav a{
                color: lightgrey;

            }
            nav a:hover {
                color: white;
                text-decoration: none;

            }
            body{
                margin: 0;
                background: #15151515;
                font-family: sans-serif;

            }
            @media screen and (max-width: 768px){
                .logo{
                    float: none;
                }
                .menu.show{
                    max-height: 20em;
                }
                .hb-button{
                    display: inline;
                }
                .superbanner{
                    display: none;
                }
                .values{
                    display: none;
                }
                nav ul li{
                    display: none;
                }
            }

Я думаю, этого достаточно для того, чтобы вы увидели css, остальное простонекоторые детали для шрифта и наведения нормального navbar.И это то, что учебник заставил меня сделать на javascript (который я не очень понимаю):

$(document).ready(function(){
                $('.hb-button').on('click', function(){
                    $('menu').toggleClass('show');
                });
            });

Надеюсь, я понял, если вам нужна дополнительная информация о моей программе, пожалуйста, дайте мне знать,спасибо.

Answer 1

Ваше мобильное меню имеет класс mobilemenu.Но в вашем коде вы добавляете класс переключения в menu.Должно быть;

$(document).ready(function(){
    $('.hb-button').on('click', function(){
        $('.mobilemenu').toggleClass('show');
    });
});

Answer 2

Кавиндра прав. Вы должны использовать .mobilemenu вместо.

$(document).ready(function(){
    $('.hb-button').on('click', function(){
        $('.mobilemenu').toggleClass('show');
    });
});

Я вижу, что li равен display: none, когда ширина <768px. Вы также можете добавить это в свой медиа-запрос </p>

.show li {
    display: inline-block;
}