Question

我的应用使用了bootstrap navbar-fixed-top。但是，我们现在需要显示另一个菜单，它将打开/关闭导航栏固定顶部。

我的问题在于CSS。

为了打开这个菜单（看起来类似于100％宽度的导航栏，它的高度约为40px），我应该将身体向下推吗？如果我这样做，导航栏固定顶部仍然固定在顶部。

或者，是否有其他方法可以实现此目的，因为我需要打开此菜单上面的其他内容。

Answer 1

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

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

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

CSS：

UPDATE XXXCustom
SET value='myval'
WHERE licID=(SELECT id FROM CustomProperties WHERE key='mykey');

jQuery：

// 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;
}

Answer 2

我认为应用这个简单的任务你必须有一些引导知识来实现它。

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

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

Bootstrap将此代码用于show / hide元素和菜单：

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

如果您想要多个导航，则必须更改data-target的{{1}}和button与要显示/隐藏的div的data-target相同。您还可以通过为折叠内容提供一些填充或高度来调整折叠区域。

您也可以参考此链接获取更多信息：

http://getbootstrap.com/components/#navbar

谢谢..

CSS如何设置样式以便我可以切换另一个菜单ABOVE bootstrap navbar-fixed-top？

2 个答案: