Блог

Главная - Вопросы по программированию - Как я могу остановить скачок значка загрузочного гамбургера и складного меню при нажатии?

Как я могу остановить скачок значка загрузочного гамбургера и складного меню при нажатии?

#html #css #bootstrap-4 #collapse #hamburger-menu

#HTML #css #bootstrap-4 #гамбургер-меню

Вопрос:

Я пытаюсь сделать так, чтобы меню гамбургера отображалось под значком в строке, как оно есть, но меню и значок прыгают при нажатии. Как я могу предотвратить это? Я пытался настроить избавление от фиксированных высот, и это не изменилось. Я хочу, чтобы все оставалось на месте, а свернутое меню просто появлялось под ним. Вот мой код:

     *, ::before, ::after {
  box-sizing: border-box;
}

:root {
  --blue: #3a2eb6;
  --white: #fff;
  --red: #cd3f33;
}
html{
  font-size: 1em;
}
nav{
  background: var(--white);
}
nav .logo{
  background: url("../images/logo-mobile.jpg") no-repeat 0 0/contain transparent;
  display: block;
  overflow: hidden;
  width: 13.6875rem;
  height: 2.875rem;

}

nav ul li a{
  color: var(--blue);
}

nav ul li{
  margin: 0 0.25rem;
}

nav div.sign-in{
  display: none;
  margin: 0 0.25rem;
}








button.navbar-toggler span i.menu-toggler{
  color: var(--red);

}





@media screen and (min-width: 768px)
{
  nav .logo{
    width: 17.125rem;
    height: 3.5625rem;
  }
  nav ul li.sign-in-mobile a{
    display: none;
  }

  nav div.sign-in{
    background-color: var(--blue);
    padding: 0 1.5rem;
    display: block;
    margin-left: 15rem;
  }

  nav div.sign-in a{
    color: var(--white);
  }

  #bootstrap-override .navbar-nav{
    flex-direction: row;
    justify-content: flex-end;
    border-bottom: .1rem solid var(--red);
  }
}

@media screen and (min-width: 992px)
{
  #bootstrap-override .navbar-expand-lg .navbar-toggler{
        display: none;
      }

      nav .logo{
        width: 24.625rem;
        height: 5.25rem;
      }
      #bootstrap-override .navbar-nav{
        border: none;
        margin-left: 2rem;
      }

      nav div.sign-in{
        order: 1;
        margin: 0 0.25rem;
        white-space: nowrap;
      }
}
*/  
   

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="description: goes here" name="description">
    <meta content="HTML, CSS, XML, JavaScript" name="keywords">
    <meta content="Twisted Yogurt" name="author">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Home</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body id="bootstrap-override">
    <header>
        <nav class="navbar navbar-expand-lg">
            <div class="container justify-content-space-between">
                <a class="navbar-brand" href="index.html">
                <div class="logo"></div></a>
                <div class="sign-in">
                    <a class="nav-link" href="#">Sign In</a>
                </div><button aria-controls="myTogglerNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler d-lg-none" data-target="#myTogglerNav" data-toggle="collapse" type="button"><span><i class="fa fa-bars menu-toggler"></i></span></button>
                <div class="collapse navbar-collapse" id="myTogglerNav">
                    <ul class="nav navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="index.html">Home</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Menu</a>
                            <ul aria-labelledby="nav-link" class="dropdown-menu">
                                <li>
                                    <a href="#">Froyo</a>
                                </li>
                                <li>
                                    <a href="#">Smoothies</a>
                                </li>
                                <li>
                                    <a href="#">Boba</a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Build</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Community Recipes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                        <li class="nav-item sign-in-mobile">
                            <a class="nav-link" href="#">Sign In</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
    </script> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js">
    </script>
</body>
</html>

Ответ №1:

У вас есть некоторые ошибки в вашем HTML-коде ( <div> непосредственно внутри <ul> ). Убедитесь, что код корректен и имеет хороший отступ, чтобы он был читабельным и структурированным.

В любом случае взгляните на документацию: https://getbootstrap.com/docs/4.5/components/navbar / Вы должны выйти за div#myTogglerNav пределы / вокруг ul.nav.navbar-nav , а затем переместиться button.navbar-toggler над ним.

Комментарии:

1. Спасибо. Я отредактировал его, и теперь он больше не прыгает. 🙂