Javascript 引导：在使用非画布侧边栏时保持内容的响应性

以下是我正在进行的工作的当前示例：

<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>

这就是我想做的：

<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>

内容（即三个圆圈或

中的任何内容）是响应性的，并调整自身大小以适应当前浏览器大小。尝试使“小提琴渲染”窗口变小，并注意圆圈是如何堆叠的

现在，当我点击汉堡包菜单时，我希望同样的事情发生。出现的边栏使用“”将自身推入视图，但不会触发响应行为；它只是将所有内容直接从页面边缘推掉。我该怎么补救呢

这是我的代码：

<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>

从问题中不清楚您在寻找什么。我已经为您的问题创建了一个可能的解决方案

---

如我在评论中所述，非画布菜单的工作演示：

HTML:

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);

---

注意：这个菜单在右边。但是，通过更改转换数字，您可以将其移到右侧。这是一个非常快速的粗略描述，因此代码可能有点凌乱。

您可以再添加一点细节吗。似乎不清楚你想做什么。有什么特别不清楚的？我可以澄清你可能有的任何具体问题。我理解你现在想做什么。您是否希望导航栏与圆圈和ABC一起浮动在DIV上？并且不要将内容推离屏幕，或者当单击“汉堡”菜单时，您希望DIV以垂直方式堆叠内容。后者。当点击汉堡并弹出侧边栏时，我希望内容能够调整大小（即继续响应）。目前，点击汉堡只会将整个页面向右移动。圆圈永远不会调整大小，因为它们被设置为静态宽度和高度。如果将它们设为PNG，则可以将它们设置为一个百分比，这样它们就不会堆叠。看起来您非常理解我的要求——即使在调用“汉堡”菜单和侧边栏时，内容仍保留在视口中。我不想把主要内容推到一边；我希望它重新组织当前视口，就像响应站点一样。尽管如此，这确实可能是一个可行的解决办法。我要玩一下。JASNY非画布菜单解决方案不是这样工作的，请参见我上面的评论。可能最好使用不同的解决方案，而不是将菜单推到内容上。您对不同的解决方案有什么建议吗？基金会，也许？或者有没有一种更优雅的方式来使用纯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);