Bootstrap: сохранение отзывчивости контента при использовании боковой панели offcanvas
Вот текущий рабочий пример того, что у меня происходит:
Вот что я хотел бы сделать:
Содержимое (то есть три круга или что-либо внутри <section>
) отзывчиво и изменяется в соответствии с текущим размером браузера. Попробуйте сделать окно визуализации скрипки маленьким и обратите внимание, как складываются круги.
Вот мой код:
<div id="wrapper">
<header>
<div class="navmenu navmenu-default navmenu-fixed-right">
<ul class="nav navmenu-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="active"><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</header>
<div class="canvas">
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<!-- content here -->
</div>
</div>
</div>
2 ответа:
Из вопроса не ясно, что вы ищете. Я создал возможное решение для вашего вопроса
.canvas-slid.canvas{ width: 30%; }
Рабочая демонстрация меню off canvas, как я описал в своих комментариях: http://jsfiddle.net/b6nopc8e/
HTML:
<div id="site-wrapper" class="container-fluid"> <div id="menuToggle"> <btn id="menuButton" class="main-menu btn btn-transparent pull-right" data-transition="boring"> <i class="fa fa-ellipsis-v fa-3x"></i><br /> <div>menu</div><div style="display:none;">close</div></btn> </div> <nav id="site-menu"> <ul class="nav"> <li><a href="/">Link</a></li> <li><a href="/">Link</a></li> <li><a href="/">Link</a></li> </ul> </nav> <div id="site-canvas"> <div id="mainbody" class="container-fluid"> <div class="col-md-12"> <h1>Hello World</h1> </div> </div> </div> </div>
CSS:
#menuButton { width: 45px; height: 45px; } /******************************** /* OFF CANVAS MENU /*******************************/ .show-nav #site-canvas { transform: translateX(-330px); transform: translate3d(-330px, 0, 0); -webkit-transform: translateX(-330px); -webkit-transform: translate3d(-330px, 0, 0); -ms-transform: translateX(-330px); -ms-transform: translate3d(-330px, 0, 0); } .boring #site-menu { transform: translateX(0); transform: translate3d(0, 0, 0); -webkit-transform: translateX(0); -webkit-transform: translate3d(0, 0, 0); -ms-transform: translateX(0); -ms-transform: translate3d(0, 0, 0); } .boring .show-nav #site-menu { transition: 900ms ease all; transform: translateX(-330px); transform: translate3d(-330px, 0, 0); -webkit-transform: translateX(-330px); -webkit-transform: translate3d(-330px, 0, 0); -ms-transform: translateX(-330px); -ms-transform: translate3d(-330px, 0, 0); } .boring .show-nav #site-canvas { transform: translateX(0); transform: translate3d(0, 0, 0); -webkit-transform: translateX(0); -webkit-transform: translate3d(0, 0, 0); -ms-transform: translateX(0); -ms-transform: translate3d(0, 0, 0); } /******************************** /* WIREFRAME ELEMENTS /*******************************/ #site-wrapper { box-sizing: border-box; height: 100%; width: 100%; } #menuToggle { margin-right: 10px; position: fixed; top: 0; right: 0; z-index: 888; } #site-menu { background-color: #999; height: 100%; position: fixed; top: 0; right: -330px; width: 300px; z-index: 777; } #site-menu:after { z-index: 999; } #site-canvas { backface-visibility: hidden; height: 100%; transform: translateX(0); transform: translate3d(0, 0, 0); width: 100%; }
JQUERY
/******************************** /* OFF CANVAS MENU /*******************************/ (function($){ jQuery(document).ready(function(){ var special = ['reveal', 'top', 'boring', 'perspective', 'extra-pop']; // Toggle Nav on Click $('.main-menu').click(function() { var transitionClass = jQuery(this).data('transition'); if ($.inArray(transitionClass, special) > -1) { $('body').removeClass(); $('body').addClass(transitionClass); } else { $('body').removeClass(); $('#site-canvas').removeClass(); $('#site-canvas').addClass(transitionClass); } $('#site-wrapper').toggleClass('show-nav'); $('.main-menu i').toggleClass('fa-ellipsis-v fa-ellipsis-h'); $(".main-menu div").html("menu"); $('.main-menu div').toggle(); return false; }); }); })(jQuery); /******************************** /* OFF CANVAS MENU HEIGHT /*******************************/ (function($){ jQuery(document).ready(function(){ $('#site-canvas').css({'min-height':($(window).height())+'px'}); $(window).resize(function(){ $('#site-canvas').css({'min-height':($(window).height())+'px'}); }); }); })(jQuery);
Некоторые примечания: это меню находится справа. но, изменив номера перевода, вы можете переместить его вправо. Это очень быстрая грубая полоса вниз, поэтому код может быть немного беспорядочным.