javascript - 使 Bootstrap 移动菜单全屏显示

Question

是否有一种相对简单的方法可以使 Bootstrap (v3) 移动菜单在屏幕上显示全高 (100%)？

看起来菜单只会覆盖其中的菜单内容(bootstrap.js 中的默认行为)。我只是想防止用户在查看移动菜单时滚动/查看底层页面。

Answer 1

你可以试试这个。我认为它看起来比使用一个占据整个页面并达到预期结果的菜单更好。

https://jsfiddle.net/rjx3460f/4/

var mywindow = $('#window');
$('#navbar').on('show.bs.collapse', function(x) {
        mywindow.css({visibility: 'hidden'});;
        $('body').attr("scroll","no").attr("style", "overflow: hidden");
});
$('#navbar').on('hide.bs.collapse', function(x) {
        mywindow.css({visibility: 'visible'});
        $('body').attr("scroll","yes").attr("style", "");
});

总体思路是禁用页面上的滚动，并在菜单打开时隐藏内容。尽管您可以轻松地禁用滚动。或者当菜单打开时将菜单的高度设置为 100%。

这是占据全部内容的菜单。非常相似的设置，但有一个跳跃的过渡...我认为您可能需要创建自己的开放过渡以使其不跳跃，这并非不可能，但不再真正 Bootstrap 。

https://jsfiddle.net/rjx3460f/7/