CSS如何设置样式以便我可以切换引导导航栏固定顶部上方的另一个菜单？答案

【问题标题】：CSS how to style so that I can toggle another menu ABOVE the bootstrap navbar-fixed-top?CSS如何设置样式以便我可以切换引导导航栏固定顶部上方的另一个菜单？
【发布时间】：2016-09-20 19:26:20
【问题描述】：

我的应用程序使用引导导航栏固定顶部。但是，我们现在需要显示另一个菜单，该菜单将在 navbar-fixed-top 上方切换打开/关闭。

我的问题在于 CSS。

为了打开这个菜单（它看起来类似于一个 100% 宽度的导航栏，它的高度大约为 40 像素），我应该将主体向下推吗？如果我这样做，navbar-fixed-top 仍然固定在顶部。

或者，是否有其他方法可以实现这一点，因为我需要在其余内容之上打开此菜单。

【问题讨论】：

请分享您的代码
我的代码字面意思是onToggleOffersMenu() { this.showOffersMenu = !this.showOffersMenu }，基于showOffersMenu的状态，我使用ngClass来申请.showOffersMenu { margin-top: 40px }。我正在使用角度 2。
我的问题更多是关于如何解决这一新要求。由于组件设计，我认为我不应该从组件中操纵身体样式。但是，如果我要在navbar-fixed-top 上方打开一个菜单，是否将主体向下推？我只是不明白说实话的要求，这有点傻，但就是这样：/

标签： html css

【解决方案1】：

一种可能的方法是让固定导航栏覆盖您要显示的内容。并使其在触发事件时移动固定数量的像素。

您可以简单地创建一个包含所需像素数量的类，以便导航栏移动并显示其上方的内容。并且，例如，当您单击一个按钮时，您会将此类类添加到您的引导导航栏。

像这样：https://jsfiddle.net/ozvk5rrh/1/

CSS：

// styles the content above the navbar
.above {
  display: block;
  position: fixed;
  width: 100%;
  height: 40px;
  background-color: steelblue;
  color: #fff;
}

.margin-top {
  top: 25px !important;
}

jQuery：

$("#showContent").click(function(){
    $("#myNavbar").toggleClass("margin-top")
;})

【讨论】：

【解决方案2】：

我认为应用它是一项简单的任务，只是你必须具备一些引导知识来实现它。

Bootstrap 将此代码用于汉堡按钮：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

Bootstrap 将此代码用于显示/隐藏元素和菜单：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

如果您想要多个导航，您只需将button 的data-target 和data-target 更改为要显示/隐藏的div 的id。您还可以通过为折叠内容提供一些填充或高度来调整折叠区域。

谢谢你..

【讨论】：