@DigitalEmotions

Как сделать выезжающее мобильное меню в Bootstrap?

Есть плагин для реализации выдвижного меню в Bootstrap. Как сделать то же самое, но чтобы сдвиг контента шел не слева/справа, а сверху?
  • Вопрос задан
  • 10447 просмотров
Пригласить эксперта
Ответы на вопрос 2
@chirskiy_mixail
Очень давно занимаюсь версткой, имею огромный опыт
В чем собственно проблема?
Если вы знаете CSS и транзишны, то для вас поменять вместо справа/слева на сверху, не должно составить проблем.
в примере что вы кинули выше, просто сдвигается position left и translate у левого блока, сделайте тоже самое ну сверху, в чем проблема, или вы хотите, чтобы за вас сделали?
Ответ написан
atomheart
@atomheart
Пишу на Python за карму и за деньги
Для этого плагин не нужен, есть стандартное решение от Bootstrap:
<nav class="navbar navbar-default navbar-static-top navbar-fixed-top" role="navigation">
		<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-navbar-collapse-1">
					<span class="sr-only">Показать меню</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="/">testAPP</a>
			</div>
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="#"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Menu Left 1</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Menu Right 1</a></li>
				</ul>
			</div>
		</div>
	</nav>


UPD: Единственное что, оно работает под мобильный браузер (или если сузить окно браузера до 768px). Там есть класс navbar-collapse на который наложены условия, которые производят модификацию навигации при маленькой ширине экрана. Можно по аналогии написать свой класс без ограничений или снять (переписать) ограничения, чтобы это работало на любой ширине.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы