以下是我目前正在进行的工作示例:
这就是我想要做的事情:
内容(即三个圈子或<section>
内的任何内容)都是响应式的,并调整自身大小以适应当前的浏览器大小。尝试将小提琴渲染窗口缩小,注意圆圈是如何堆叠的。
现在,当我点击汉堡包菜单时,我希望同样的事情发生。出现的侧边栏使用“offcanvas reveal”将自身推入视图,但不会触发响应行为;它只是将所有内容推到页面边缘。我该如何解决这个问题?
这是我的代码:
<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>
答案 0 :(得分:1)
从问题来看,目前尚不清楚你在寻找什么。我为您的问题创建了一个可能的解决方案
.canvas-slid.canvas{
width: 30%;
}
答案 1 :(得分:1)
我在评论中描述的非画布菜单的工作演示: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);
一些注意事项:此菜单位于右侧。但是通过更改翻译号码,您可以将其移动到右侧。这是一个非常快速的粗略删除,因此代码可能有点混乱。