2

Есть обычный, стандартный Bootstrap Navbar взятый из документации Bootstrap. Принцип его работы, я думаю, знаком всем. При достижении ширины в 768px появляется "мобильное" меню, и сразу все элементы скрываются в под "гамбургер" меню. Как переделать механизм так, чтобы только не умещающиеся элементы скрывались в меню?

3
  • Не помещающиеся справа вы имеете ввиду? 9 июн 2016 в 8:48
  • @VladimirGamalian ну да. Элемент, который не помещается справа должен скрываться в "гамбургерном" меню. Остальные остаются в навбаре до тех пор, пока они помещаются в него. 9 июн 2016 в 8:51
  • Если в лоб, то можно в зависимости от ширины экрана добавлять класс, который будет оставлять пункт меню видимым (например .navbar-brand). Можно автоматизировать с помощью js. 9 июн 2016 в 8:56

1 ответ 1

1

Как сворачивать только те пункты меню, что не помещаются на экране

1. HTML

Вот базовый пример навигационной панели с сайта Бутстрапа.

Элементы, которые не свернутся на узком экране, должны находиться в блоке <div class="navbar-header">, чтобы не мешать переключателю <button ... class="navbar-toggle collapsed" ...> встать у правого края.

Поэтому нужно прикинуть, какие пункты меню останутся на узком экране, и переместить их из блока <div class="collapse navbar-collapse" ...> в блок <div class="navbar-header">.

И доработать для них персональный CSS-класс, чтобы они нормально выглядели на узком экране.

https://jsfiddle.net/glebkema/vju5mueq/

@media (max-width: 767px) {
  .navbar-dont-collapse {
    float: left;
    margin: 0 !important;
  }
  .navbar-dont-collapse > li {
    float: left;
  }
  .navbar-dont-collapse > li > a {
    padding-top: 15px !important;
      padding-bottom: 15px !important;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>

      <ul class="nav navbar-nav navbar-dont-collapse">
        <li><a href="#">Do</a></li>
        <li><a href="#">Not</a></li>
        <li><a href="#">Collapse</a></li>
        <li><a href="#">Us</a></li>
      </ul>
    </div>
    
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

2. jQuery

Скрипт убирает пункты меню под "гамбургер" и возвращает их обратно. Чтобы заполнять панель без переходов на вторую строку, надо знать ширину каждого пункта. Но когда пункт находится в свёрнутой части меню, его ширина равна нулю и непонятно, сколько места ему понадобится. Поэтому делаем так:

  1. Готовим два списка ul. Список в блоке navbar-collapse будет сворачиваться вместе с остальным меню, а список в блоке navbar-header будет виден постоянно.
  2. Помещаем все пункты меню в видимую часть, чтобы при загрузке страницы измерить и запомнить их ширину.
  3. После этого и при каждом изменении размеров страницы перекидываем лишние пункты в сворачивающуюся часть меню или забираем недостающие пункты обратно.

jsfiddle   bootply   codepen

$(document).ready(function() {
  var ID_HIDE = '#hide-items';
  var ID_SHOW = '#show-items';
  var selectHide = $( ID_HIDE );
  var selectShow = $( ID_SHOW );
  
  /* запоминаем размеры, пока все элементы на виду */
  /* 1) у элементов в свёрнутом списке ширина становится нулевой */
  /* 2) selectShow.outerWidth(true) подводит, когда элементы встают в 2 строки */
  var widthShow = 0;
  var widthItem = [];
  $( ID_SHOW + '>li' ).each(function( index ) {
    widthShow += widthItem[index] = $( this ).outerWidth(true);
  });
  var indexLastShown = widthItem.length - 1;
  
  /* посчитаем, когда будем уверены, что navbar-toggle тоже виден */
  var widthOccupied = 0;
  
  /* признак того, что обрабатываем загрузку страницы, а не изменение размеров */
  var widthCurrent = 0;
  
  checkNavbar();
  $(window).resize( checkNavbar );
  
  function checkNavbar() {
    var widthNew = document.documentElement.clientWidth;
    
    if ( widthNew != widthCurrent && widthNew < 768 ) {
      if ( widthOccupied == 0 ) {
        widthOccupied = $( '.navbar-brand'  ).outerWidth(true) + 
                        $( '.navbar-toggle' ).outerWidth(true);
      }
      
      var widthFree = widthNew - widthOccupied - widthShow;

      /* после загрузки или сужения страницы - прячем всё, что не помещается */
      if ( widthCurrent == 0 || widthNew < widthCurrent ) {
        while ( indexLastShown >= 0 && widthFree <= 0 ) {
          $( ID_SHOW + '>li:last-child' ).prependTo( selectHide );
          widthFree += widthItem[indexLastShown];
          widthShow -= widthItem[indexLastShown];
          indexLastShown--;
        };
      
      /* после расширения страницы - добавляем всё, что поместится */
      } else {
        while ( (indexLastShown + 1) < widthItem.length && 
                widthFree > widthItem[indexLastShown + 1] ) {
          $( ID_HIDE + '>li:first-child' ).appendTo( selectShow );
          widthFree -= widthItem[indexLastShown + 1];
          widthShow += widthItem[indexLastShown + 1];
          indexLastShown++;
        }
      }
      
      widthCurrent = widthNew;
    }
  }
});
@media (max-width: 767px) {
  #show-items {
    float: left;
    margin: 0 !important;
  }
  #show-items > li {
    float: left;
  }
  #show-items > li > a {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  
  #show-items .open .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
  }
  #show-items .open .dropdown-menu > li > a {
    color: #000;
    padding: 3px 20px;
    line-height: 1.42857143;
  }
  #show-items .open .dropdown-menu > li > a:hover,
  #show-items .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: #e7e7e7 !important;
    background-image: none;
  }  
  #show-items .open .dropdown-menu > .active > a,
  #show-items .open .dropdown-menu > .active > a:hover,
  #show-items .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7 !important;
  }
  #show-items .open .dropdown-menu > .disabled > a,
  #show-items .open .dropdown-menu > .disabled > a:hover,
  #show-items .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>

      <ul id="show-items" class="nav navbar-nav">
        <li><a href="#">First link</a></li>
        <li><a href="#">2nd</a></li>
        <li class="active"><a href="#">Active link</a></li>
        <li><a href="#">One more very long link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul id="hide-items" class="nav navbar-nav">
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Right 1</a></li>
        <li><a href="#">Right 2</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

5
  • Нет, я не имел ввиду что какие то элементы должны остаться на узком экране. Всё должно быть динамически. В зависимомти от ширины, тот элемент, который не помещается, переносится в navbar-collapse. 9 июн 2016 в 10:21
  • @DavidArutiunian Вариант спланировать вручную через медиа-запросы подходит? Или нужен скрипт, который будет перекидывать элементы из открытой области в свёрнутую и обратно? 9 июн 2016 в 10:30
  • Я думаю, со скриптом будет проще. В данном случае быстродействие не так важно. 9 июн 2016 в 11:01
  • @DavidArutiunian Добавил в ответ решение со скриптом. Проверьте, пожалуйста. 10 июн 2016 в 23:24
  • Да, в принципе всё работает, хотя я уже сделал, но спасибо большое! 11 июн 2016 в 20:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.