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

Алексей
Алексей
1K
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;
}

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

  1. Александр
    Александр
    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"
    нужно обязательно удалить его, или заменить на класс!
    1. Александр
      Александр
      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>
      
      1. Александр
        Александр
        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 и адаптировать его под разные устройства.
        1. Александр
          Александр
          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>
          
          Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.