Есть обычный, стандартный Bootstrap Navbar
взятый из документации Bootstrap
. Принцип его работы, я думаю, знаком всем. При достижении ширины в 768px появляется "мобильное
" меню, и сразу все элементы скрываются в под "гамбургер
" меню. Как переделать механизм так, чтобы только не умещающиеся элементы скрывались в меню?
-
Не помещающиеся справа вы имеете ввиду?– Vladimir Gamalyan9 июн 2016 в 8:48
-
@VladimirGamalian ну да. Элемент, который не помещается справа должен скрываться в "гамбургерном" меню. Остальные остаются в навбаре до тех пор, пока они помещаются в него.– David Arutiunian9 июн 2016 в 8:51
-
Если в лоб, то можно в зависимости от ширины экрана добавлять класс, который будет оставлять пункт меню видимым (например .navbar-brand). Можно автоматизировать с помощью js.– Vladimir Gamalyan9 июн 2016 в 8:56
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
Скрипт убирает пункты меню под "гамбургер" и возвращает их обратно. Чтобы заполнять панель без переходов на вторую строку, надо знать ширину каждого пункта. Но когда пункт находится в свёрнутой части меню, его ширина равна нулю и непонятно, сколько места ему понадобится. Поэтому делаем так:
- Готовим два списка
ul
. Список в блокеnavbar-collapse
будет сворачиваться вместе с остальным меню, а список в блокеnavbar-header
будет виден постоянно. - Помещаем все пункты меню в видимую часть, чтобы при загрузке страницы измерить и запомнить их ширину.
- После этого и при каждом изменении размеров страницы перекидываем лишние пункты в сворачивающуюся часть меню или забираем недостающие пункты обратно.
$(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>
-
Нет, я не имел ввиду что какие то элементы должны остаться на узком экране. Всё должно быть динамически. В зависимомти от ширины, тот элемент, который не помещается, переносится в navbar-collapse. 9 июн 2016 в 10:21
-
@DavidArutiunian Вариант спланировать вручную через медиа-запросы подходит? Или нужен скрипт, который будет перекидывать элементы из открытой области в свёрнутую и обратно? 9 июн 2016 в 10:30
-
Я думаю, со скриптом будет проще. В данном случае быстродействие не так важно. 9 июн 2016 в 11:01
-
@DavidArutiunian Добавил в ответ решение со скриптом. Проверьте, пожалуйста. 10 июн 2016 в 23:24
-
Да, в принципе всё работает, хотя я уже сделал, но спасибо большое! 11 июн 2016 в 20:29