如何让bootstrap导航栏在移动菜单上下推整个页面？

Although there is a related question, his problem seems like my solution but I have no Idea to make progress.

虽然有一个相关的问题,但他的问题似乎是我的解决方案,但我没有想法取得进展。

I'm using bootstrap navbar that is fixed to the top to make.. navigation menu. on mobile pages(where screen size is small), I have to bring them by pressing some menu button on top-rightmost corner.

我正在使用固定在顶部的bootstrap导航栏来制作..导航菜单。在移动页面上(屏幕尺寸很小),我必须按下最右上角的一些菜单按钮来显示它们。

however when the menu pops up, I'd like it to push the page down, instead of overlaying it.

然而,当菜单弹出时,我希望它将页面向下推,而不是覆盖它。

here's my code.. what edit should I make to get rid of overlaying?

这是我的代码..我应该做什么编辑来摆脱覆盖?

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#!/">Brand</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#!/notice">notice</a></li>
                <li><a href="#!/board">board</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li>
                <a id="a-logout" href="#!/logout">sign out</a>
                </li>
                <li>
                <a href="#!/user">Your page</a>
                </li>
            </ul>
        </div>
    </div>
</div>

6 个解决方案

#1

It seems that you have defined the height of .navbar which is forcing collapsed menu to overlay. Just change height in .navbar to min-height

您似乎已经定义了.navbar的高度,它强制折叠菜单覆盖。只需将.navbar中的高度更改为min-height

.navbar
{
 min-height:65px; // or value of ur desire
}

If not solved kindly post ur CSS too

如果没有解决,请发布你的CSS

#2

You'll need to animate the body down. I'd need to see more code to get this exact, and you'd need jQuery, but try this...

你需要为身*作动画。我需要看到更多的代码来完成这个,你需要jQuery,但试试这个......

$('.navbar').on('click', function() {
    var height = ($('.navbar-collapse.in').length == 0) ? $(this).height() : 0;
    $('body').css({
        marginTop: height
    })
});

UPDATE: include code to account for if the nav is in or out. This really isn't going to work well since you'll need to fire most of this code after the nav has animated in. You can however remove $(this).height() and replace with a hard-coded pixel amount equal to the height of your nav.

更新:包括代码以说明导航是否进入。这实际上不会很好用,因为你需要在导航动画后启动大部分代码。然而你可以删除$(this).height()并替换为等于的硬编码像素数量导航的高度。

#3

add

$('.navbar-toggle').on('click', function() {
  $('.after-navbar').css('margin-top','230px');
});

Please Find working example here http://jsfiddle.net/LptkL/

请在这里找到工作示例http://jsfiddle.net/LptkL/

#4

#5

Change navbar-fixed-top to navbar-static-top.

将navbar-fixed-top更改为navbar-static-top。

#6

1st version. Setting `padding-top` by two constants

Body padding is required when you use a navbar with the .navbar-fixed-top class:

当您使用带有.navbar-fixed-top类的导航栏时,需要使用正文填充:

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>.

固定导航栏将覆盖您的其他内容,除非您在的顶部添加填充。

By default, the navbar is 50px high.

默认情况下,导航栏高50像素。

Make sure to include this after the core Bootstrap CSS.

确保在核心Bootstrap CSS之后包含它。
Collapse events help to change the value of the padding-top property:

折叠事件有助于更改padding-top属性的值:

show.bs.collapse fires immediately when the show instance method is called.

show.bs.collapse在调用show实例方法时立即触发。

hide.bs.collapse is fired immediately when the hide method has been called.

调用hide方法时会立即触发hide.bs.collapse。
You can copy transition properties from the .collapsing class.

您可以从.collapsing类复制过渡属性。
User can increase the width of the window while the menu stays expanded. In this case it is necessary to reduce the padding-top property for the body. For example by media-query and !important.

当菜单保持扩展时,用户可以增加窗口的宽度。在这种情况下,有必要减少身体的填充顶部属性。例如通过media-query和!important。

So let's define padding-top value using two constants - 50px and 235px.

因此,让我们使用两个常量定义padding-top值--50px和235px。

var selectBody = $('body');

/* 2. */
$('.navbar-collapse').on('show.bs.collapse', function () {
  selectBody.css('padding-top', '235px');
})
$('.navbar-collapse').on('hide.bs.collapse', function () {
  selectBody.css('padding-top', '50px');
})

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

body {
  /* 1. */
  padding-top: 50px;

  /* 3. */
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .35s;
       -o-transition-duration: .35s;
          transition-duration: .35s;
  -webkit-transition-property: padding-top;
       -o-transition-property: padding-top;
          transition-property: padding-top;
}

/* 4. */
@media (min-width: 768px) {
  body {
    padding-top: 50px !important;
  }
}

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Left 1</a></li>
                <li><a href="#">Left 2</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Right 1</a></li>
                <li><a href="#">Right 2</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="container">
  <h1>Header 1</h1><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <h2>Header 2</h2><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <h3>Header 3</h3><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2nd version. Using `outerHeight()`

Let's set the padding-top value by the outerHeight() function.

让我们通过outerHeight()函数设置padding-top值。

And let's collapse navbar when user increase the screen width to 768px or more.

当用户将屏幕宽度增加到768px或更高时,让我们折叠导航栏。

http://codepen.io/glebkema/pen/PGbZPG

var selectBody = $('body');
var selectNavbarCollapse = $('.navbar-collapse');

var heightNavbarCollapsed = $('.navbar').outerHeight(true);
var heightNavbarExpanded = 0;

paddingSmall();

selectNavbarCollapse.on('show.bs.collapse', function() {
  if (heightNavbarExpanded == 0) heightNavbarExpanded = heightNavbarCollapsed + $(this).outerHeight(true);
  paddingGreat();
})
selectNavbarCollapse.on('hide.bs.collapse', function() {
  paddingSmall();
})

$(window).resize(function() {
  if ((document.documentElement.clientWidth > 767) && selectNavbarCollapse.hasClass('in')) {
    selectNavbarCollapse.removeClass('in').attr('aria-expanded', 'false');
    paddingSmall();
  }
});

function paddingSmall() {
  selectBody.css('padding-top', heightNavbarCollapsed + 'px');
}

function paddingGreat() {
  selectBody.css('padding-top', heightNavbarExpanded + 'px');
}

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

body {
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .35s;
       -o-transition-duration: .35s;
          transition-duration: .35s;
  -webkit-transition-property: padding-top;
       -o-transition-property: padding-top;
          transition-property: padding-top;
}

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Left 1</a></li>
                <li><a href="#">Left 2</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Right 1</a></li>
                <li><a href="#">Right 2</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="container">
  <h1>Header 1</h1><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <h2>Header 2</h2><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <h3>Header 3</h3><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

#1

It seems that you have defined the height of .navbar which is forcing collapsed menu to overlay. Just change height in .navbar to min-height

您似乎已经定义了.navbar的高度,它强制折叠菜单覆盖。只需将.navbar中的高度更改为min-height

.navbar
{
 min-height:65px; // or value of ur desire
}

If not solved kindly post ur CSS too

如果没有解决,请发布你的CSS

#2

You'll need to animate the body down. I'd need to see more code to get this exact, and you'd need jQuery, but try this...

你需要为身*作动画。我需要看到更多的代码来完成这个,你需要jQuery,但试试这个......

$('.navbar').on('click', function() {
    var height = ($('.navbar-collapse.in').length == 0) ? $(this).height() : 0;
    $('body').css({
        marginTop: height
    })
});

#3

add

$('.navbar-toggle').on('click', function() {
  $('.after-navbar').css('margin-top','230px');
});

Please Find working example here http://jsfiddle.net/LptkL/

请在这里找到工作示例http://jsfiddle.net/LptkL/

#4

#5

Change navbar-fixed-top to navbar-static-top.

将navbar-fixed-top更改为navbar-static-top。

#6

1st version. Setting `padding-top` by two constants

Body padding is required when you use a navbar with the .navbar-fixed-top class:

当您使用带有.navbar-fixed-top类的导航栏时,需要使用正文填充:

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>.

固定导航栏将覆盖您的其他内容,除非您在的顶部添加填充。

By default, the navbar is 50px high.

默认情况下,导航栏高50像素。

Make sure to include this after the core Bootstrap CSS.

确保在核心Bootstrap CSS之后包含它。
Collapse events help to change the value of the padding-top property:

折叠事件有助于更改padding-top属性的值:

show.bs.collapse fires immediately when the show instance method is called.

show.bs.collapse在调用show实例方法时立即触发。

hide.bs.collapse is fired immediately when the hide method has been called.

调用hide方法时会立即触发hide.bs.collapse。
You can copy transition properties from the .collapsing class.

您可以从.collapsing类复制过渡属性。
User can increase the width of the window while the menu stays expanded. In this case it is necessary to reduce the padding-top property for the body. For example by media-query and !important.

当菜单保持扩展时,用户可以增加窗口的宽度。在这种情况下,有必要减少身体的填充顶部属性。例如通过media-query和!important。

So let's define padding-top value using two constants - 50px and 235px.

因此,让我们使用两个常量定义padding-top值--50px和235px。

var selectBody = $('body');

/* 2. */
$('.navbar-collapse').on('show.bs.collapse', function () {
  selectBody.css('padding-top', '235px');
})
$('.navbar-collapse').on('hide.bs.collapse', function () {
  selectBody.css('padding-top', '50px');
})

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

body {
  /* 1. */
  padding-top: 50px;

  /* 3. */
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .35s;
       -o-transition-duration: .35s;
          transition-duration: .35s;
  -webkit-transition-property: padding-top;
       -o-transition-property: padding-top;
          transition-property: padding-top;
}

/* 4. */
@media (min-width: 768px) {
  body {
    padding-top: 50px !important;
  }
}

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Left 1</a></li>
                <li><a href="#">Left 2</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Right 1</a></li>
                <li><a href="#">Right 2</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="container">
  <h1>Header 1</h1><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <h2>Header 2</h2><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <h3>Header 3</h3><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2nd version. Using `outerHeight()`

Let's set the padding-top value by the outerHeight() function.

让我们通过outerHeight()函数设置padding-top值。

And let's collapse navbar when user increase the screen width to 768px or more.

当用户将屏幕宽度增加到768px或更高时,让我们折叠导航栏。

http://codepen.io/glebkema/pen/PGbZPG

var selectBody = $('body');
var selectNavbarCollapse = $('.navbar-collapse');

var heightNavbarCollapsed = $('.navbar').outerHeight(true);
var heightNavbarExpanded = 0;

paddingSmall();

selectNavbarCollapse.on('show.bs.collapse', function() {
  if (heightNavbarExpanded == 0) heightNavbarExpanded = heightNavbarCollapsed + $(this).outerHeight(true);
  paddingGreat();
})
selectNavbarCollapse.on('hide.bs.collapse', function() {
  paddingSmall();
})

$(window).resize(function() {
  if ((document.documentElement.clientWidth > 767) && selectNavbarCollapse.hasClass('in')) {
    selectNavbarCollapse.removeClass('in').attr('aria-expanded', 'false');
    paddingSmall();
  }
});

function paddingSmall() {
  selectBody.css('padding-top', heightNavbarCollapsed + 'px');
}

function paddingGreat() {
  selectBody.css('padding-top', heightNavbarExpanded + 'px');
}

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

body {
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .35s;
       -o-transition-duration: .35s;
          transition-duration: .35s;
  -webkit-transition-property: padding-top;
       -o-transition-property: padding-top;
          transition-property: padding-top;
}

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Left 1</a></li>
                <li><a href="#">Left 2</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Right 1</a></li>
                <li><a href="#">Right 2</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="container">
  <h1>Header 1</h1><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <h2>Header 2</h2><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <h3>Header 3</h3><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

秒客网

如何让bootstrap导航栏在移动菜单上下推整个页面？

6 个解决方案

#1

#2

#3

#4

#5

#6

1st version. Setting `padding-top` by two constants

2nd version. Using `outerHeight()`

#1

#2

#3

#4

#5

#6

1st version. Setting `padding-top` by two constants

2nd version. Using `outerHeight()`

相关文章

如何让bootstrap导航栏在移动菜单上下推整个页面？

6 个解决方案

#1

#2

#3

#4

#5

#6

1st version. Setting padding-top by two constants

2nd version. Using outerHeight()

#1

#2

#3

#4

#5

#6

1st version. Setting padding-top by two constants

2nd version. Using outerHeight()

相关文章

1st version. Setting `padding-top` by two constants

2nd version. Using `outerHeight()`

1st version. Setting `padding-top` by two constants

2nd version. Using `outerHeight()`