畫布菜單的引導程序顯示小於992px

Question

我正在使用我見過的最好的插件進行畫布引導菜單 。 如果屏幕的寬度大於992px，我試圖公開（顯示）菜單。

我正在嘗試復制當前在網站上使用的導航。 嘗試調整瀏覽器的大小，導航菜單將以較小的分辨率折疊。 這是通過一些JavaScript完成的，如下所示：

$(document).ready(function () {
    var n, t;
    desktop ? (n = $(".sidebar .wrapper").height(), t = $(document).height(), $(".content").css("min-height", n), $(".sidebar").css("min-height", t + 200)) : (n = $(".sidebar .wrapper").height(), t = $(document).height(), $(".content").css("min-height", n), $(".sidebar").css("min-height", t + 200)), $(".toggle-sidebar").click(function () {
        $("body").toggleClass("show-sidebar")
    });
});

知道我如何用jasny的off canvas插件實現相同的效果嗎？

Answer 1

如本示例所示，Jasny Bootstrap支持此功能。

只需使用offcanvas-sm而不是offcanvas 。

<div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm">
   ...
</div>

---

作為記錄，offcanvas插件非常靈活。 它適用於display: none隱藏的任何元素display: none並忽略任何未隱藏的元素。 您可以使用@media在所需的任何視口寬度處隱藏元素。