时间戳

首页 > 解决方案 > 响应式导航栏设计

javascript - 响应式导航栏设计

问题描述

我正在学习响应式网页设计，现在我的网页几乎 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，其余的只是字体和普通导航栏悬停的一些细节。这就是教程让我在 javascript 上做的事情（我不太明白）：

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

我希望我很清楚，如果您需要我的程序的更多信息，请告诉我，谢谢。

标签： javascripthtmlcssnavbarresponsive

解决方案

卡文德拉是对的。你应该.mobilemenu改用。

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

我看到 li 是display: none当宽度 < 768px 时。你也可以在你的媒体查询中添加这个

.show li {
    display: inline-block;
}

推荐阅读