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

Алексей
Алексей
1,8K
4
Содержание:
  1. Комментарии
Здравствуйте, есть навбар не понимаю как можно сделать чтобы он сворачивался при уменьшении экрана в гамбургер, так как без этого он залезает на другие блоки…
<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

  1. Александр
    Александр
    2020-12-14 16:10:28
    Во всех примерах меню которые я предложил раннее, допущена критическая ошибка в данном блоке:
    <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"
    нужно обязательно удалить его, или заменить на класс!
  1. Александр
    Александр
    2020-12-12 06:17:42
    Убрать меню при изменение ширины экрана, можно при помощи не большого скрипта, данный способ подойдёт если не используйте 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>
    
    1. Александр
      Александр
      2020-12-12 05:43:25
      В 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 и адаптировать его под разные устройства.
      1. Александр
        Александр
        2020-12-11 21:20:14
        Добрый вечер! Как вариант, скрыть, свернуть меню при уменьшении окна браузера, в 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>