Как сделать на Bootstrap в мобильной версии так, чтобы, когда нажимаешь на меню и скролишь, меню исчезало?
Сейчас, если скролить, то меню не уходит.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуМеню не уходит, скорее всего, потому, что ему добавлен класс .navbar-fixed-top
. Если этот класс убрать, то при прокрутке меню уедет наверх вместе с началом страницы:
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header"><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><a href="" class="navbar-brand">Brand</a></div>
<div id="bs-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#header1">Header 1</a></li>
<li><a href="#header2">Header 2</a></li>
<li><a href="#header3">Header 3</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Main Header</h1>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<h2 id="header1">Header 1</h2>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<h2 id="header2">Header 2</h2>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<h2 id="header3">Header 3</h2>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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.7/js/bootstrap.min.js"></script>
Но можно сделать, чтобы при нажатии на любой из пунктов меню не уезжало, а просто сворачивалось. Для этого добавьте скрипт, который будет вызывать метод .collapse('hide')
:
$( '#bs-navbar a' ).click( function() {
$( '#bs-navbar' ).collapse('hide');
});
body {
padding-top: 60px;
}
h2 {
margin-top: -50px !important;
padding-top: 70px;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><a href="" class="navbar-brand">Brand</a></div>
<div id="bs-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#header1">Header 1</a></li>
<li><a href="#header2">Header 2</a></li>
<li><a href="#header3">Header 3</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Main Header</h1>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<h2 id="header1">Header 1</h2>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<h2 id="header2">Header 2</h2>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<h2 id="header3">Header 3</h2>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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.7/js/bootstrap.min.js"></script>
$(window).scroll(function() {
$('.navbar-collapse.in').collapse('hide');
});
Пример
$(window).scroll(function() {
$('.navbar-collapse.in').collapse('hide');
});
$('#bs-navbar a').click(function() {
$('#bs-navbar').collapse('hide');
});
body {
padding-top: 60px;
}
h2 {
margin-top: -50px !important;
padding-top: 70px;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><a href="" class="navbar-brand">Brand</a></div>
<div id="bs-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#header1">Header 1</a></li>
<li><a href="#header2">Header 2</a></li>
<li><a href="#header3">Header 3</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Main Header</h1>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<h2 id="header1">Header 1</h2>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<h2 id="header2">Header 2</h2>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<h2 id="header3">Header 3</h2>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
<p>Paragraph.</p>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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.7/js/bootstrap.min.js"></script>