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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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