Как сделать сворачивающееся меню

Алексей

24.11.2020, 11:31

2.1K

Здравствуйте, есть навбар не понимаю как можно сделать чтобы он сворачивался при уменьшении экрана в гамбургер, так как без этого он залезает на другие блоки...


<div class="navbar navbar-inverse fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <h4 class="navbar-brand"><strong><font size="4" color="black" face="arial black">B&R EXPAND LOGISTICS</font></strong></h4>
        </div>
        <nav class="my-2 my-md-0 mr-md-3">
          <a class="p-2 text-dark" href="/">Главная</a>
          <a class="p-2 text-dark" href="/trading">Биржа</a>
          <a class="p-2 text-dark" href="/data">Ваши данные</a>
          <a class="p-2 text-dark" href="/ourdata">Наши данные</a>
          {% if username %}
          <a class="p-2 text-dark" href="/personalroom">Комната</a>
          <a class="btn btn-outline-primary" id = "register_button" href="/auth/logout">Выход</a>
          {%else%}
          <a class="btn btn-outline-primary" id = "register_button" href="/auth/login">Вход</a>
          {%endif%}
        </nav>
      </div>
    </div>


.navbar {
  z-index: 2;
  background: #fff;
  border-bottom: 2px solid #000;
}

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

Александр

14.12.2020, 16:10

Во всех примерах меню которые я предложил раннее, допущена критическая ошибка в данном блоке:

<ul class="btn-group">
               <li><a class="btn btn-default" id = "register_button" href="/auth/logout">Выход</a></li>
               <li><a class="btn btn-default" id = "register_button" href="/auth/login">Вход</a></li>
            </ul>

два раза используется одинаковый «id»

id="register_button"

нужно обязательно удалить его, или заменить на класс!

Александр

12.12.2020, 06:17

Убрать меню при изменение ширины экрана, можно при помощи не большого скрипта, данный способ подойдёт если не используйте Bootstrap в своём проекте, в данном случае при разрешении экрана менее 850px, меню будет скрываться.

<nav class="nav">
   <a class="font-weight-bold big-text">b&r expand logistics</a>
   <div class="mynav-icon">
      Ⅲ
   </div>
   <ul class="mynav">
      <li><a class="p-2 text-dark" href="/">Главная</a></li>
      <li><a class="p-2 text-dark" href="/trading">Биржа</a></li>
      <li><a class="p-2 text-dark" href="/data">Ваши данные</a></li>
      <li><a class="p-2 text-dark" href="/ourdata">Наши данные</a></li>
      <li> <a class="p-2 text-dark" href="/personalroom">Комната</a></li>
      <ul class="btn-group">
         <li><a class="btn-group" id = "register_button" href="/auth/logout">Выход</a>
            <a class="btn-group" id = "register_button" href="/auth/login">Вход</a>
         </li>
      </ul>
   </ul>
</nav>

Стили CSS:

<style>
.nav {
    background-color: #d7d4f0;
    padding: 10px;
    height: 40px;
    position: fixed;
    width: 99%;
    background: #fff;
    border-bottom: 2px solid #000;
}

.mynav {
 padding: 0;
    margin: 0;
    font-family: Arial;
    float: right;
}
.mynav li {
  display: block;
  float: left;
}
.mynav li a {
  padding: 5px;
  display: block;
  color: #000;
  text-decoration: none;
  margin: 1px;
}
.mynav li a:hover {
  background: #ccc;
}
.mynav-icon {
  text-align: right;
  display: none;
}
.mynav-icon svg g {
  fill: #444;
}

.font-weight-bold {
    font-weight:bold;
    }
    
.big-text {
   text-transform: uppercase;
   }
   
nav > a {
  display: inline-block;
  float: left;
  padding: 5px;
}
   
 .btn-group {
    float: right;
    margin-right: 20px;
}
 
.btn-group > li > a {
    padding: 8px;
    background-color: #d5d7de;
    border-radius: 5px;
}  

@media (max-width: 850px) {
  .mynav-icon {
    display: block;
    margin-right: 30px;
    font-weight: 600;
    font-size: larger;
  }
  .mynav li {
    float: none;
  }
   .mynav {
    background-color: #f3f3f3;
    padding: 10px;
    margin-top: 30px;
}
}
</style>

Код JS:

<script>
$(window).resize(function() {
    var width = $(window).width();
    if (width > 850 && $('ul').is(':hidden')) {
        $('ul').removeAttr('style');
    } else if (width <= 850) {
        $('.mynav').hide();
    };
});
$('.mynav-icon').click(function() {
    $('.mynav').toggle("active");
});
</script>

Александр

12.12.2020, 05:43

В Bootstrap 3 спрятать меню при уменьшении экрана, так-же как и в Bootstrap 4 можно с помощью компонента «collapse», код в данном случае будет такой:

<nav class="navbar navbar-default" id="mynavbar" role="navigation">
   <div class="container-fluid">
      <a class="navbar-brand font-weight-bold big-text">b&r expand logistics</a>
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="/">Главная</a></li>
            <li><a  href="/trading">Биржа</a></li>
            <li><a  href="/data">Ваши данные</a></li>
            <li><a  href="/ourdata">Наши данные</a></li>
            <li><a  href="/personalroom">Комната</a></li>
            <ul class="btn-group">
               <li><a class="btn btn-default" id = "register_button" href="/auth/logout">Выход</a></li>
               <li><a class="btn btn-default" id = "register_button" href="/auth/login">Вход</a></li>
            </ul>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container-fluid -->
</nav>

Стили CSS:

<style>
#mynavbar  {
  z-index: 2;
  background: #fff;
  border-bottom: 2px solid #000; }

.btn-group > li {
display: inline-block; }

.font-weight-bold {
    font-weight:bold; }
.big-text {
   text-transform: uppercase; }

.btn-group {
  margin-top: 10px; 
  padding-inline-start: 0px; }
</style>

P.S Рекомендую так-же ознакомится, Как создать горизонтальное адаптивное меню на Bootstrap 3, полезная информация касаемо данной темы, В статье Александр подробно рассказывает с примерами, как использовать меню Navbar в Bootstrap 3 и адаптировать его под разные устройства.

Александр

11.12.2020, 21:20

Добрый вечер! Как вариант, скрыть, свернуть меню при уменьшении окна браузера, в Bootstrap 4, можно при помощи встроенного компонента «collapse», в данном случае код будет такой:

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
   <h4 class="navbar-brand font-weight-bold big-text ">b&r expand logistics</h4>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcollaps" aria-controls="navbarcollapst" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse " id="navbarcollaps">
      <ul class="navbar-nav ml-auto">
         <li class="nav-item">
            <a class="nav-link" href="/">Главная</a>
         </li>
         <li class="nav-item">
            <a class=" p-2 text-dark nav-link" href="/trading">Биржа</a>
         </li>
         <li class="nav-item">
            <a class="p-2 text-dark nav-link" href="/data">Ваши данные</a>
         </li>
         <li class="nav-item">
            <a class="p-2 text-dark nav-link" href="/ourdata">Наши данные</a>
         </li>
         <li class="nav-item">
            <a class="p-2 text-dark nav-link" href="/personalroom">Комната</a>
         </li>
      </ul>
      <ul class="navbar-nav">
         <li class="nav-item ">
            <a class="btn btn-outline-primary" id="register_button" href="/auth/login">Вход</a>
            <a class="btn btn-outline-primary" id="register_button" href="/auth/logout">Выход</a>
         </li>
      </ul>
   </div>
 </nav>

Стили css:

<style>
.navbar {
  z-index: 2;
  background: #fff;
  border-bottom: 2px solid #000;
}
.font-weight-bold {
    font-weight:bold
}
.big-text {
   text-transform: uppercase;
}
</style>