Question

我正在尝试在我的网站上同时拥有一个顶部固定菜单和一个左侧垂直菜单。我真的希望两者都被修复，但是如果我开始滚动，那么左侧垂直菜单将在顶部菜单下方向上滑动，如下面的代码和jsfiddle所示：

<div class="ui inverted top fixed menu">
  <div class="header item">
    Top Menu Header
  </div>
</div>
<div class="ui grid">
  <div class="four wide column">
    <div class="ui inverted left vertical fluid menu" id="side-menu">
      <div class="item">
        Item #1
      </div>
      <div class="item">
        Item #2
      </div>
    </div>
  </div>
  <div class="twelve wide column">
  <!-- Main content here -->
    <div class="row">
      Text here
    </div>
    <div class="row">
      Text here
    </div>
  </div>
</div>

https://jsfiddle.net/318ruL3j/2/

如果我使用固定的垂直菜单，则第一项隐藏在顶部菜单下方，如下面的代码和jsfiddle所示：

<div class="ui inverted left vertical fixed menu" id="side-menu">
  <div class="item">
    Item #1
  </div>
  <div class="item">
    Item #2
  </div>
</div>
<div class="ui inverted top fixed menu">
  <div class="header item">
    Top Menu Header
  </div>
</div>
<div class="ui grid">
  <!-- Main content here -->
  <div class="column">
    <div class="row">
      Text here
    </div>
    <div class="row">
      Text here
    </div>
  </div>
</div>

https://jsfiddle.net/z5vozbts/2/

我希望我想做的事情有道理。有没有人知道如何在没有我的项目重叠的情况下拥有这两个固定菜单？

Answer 1

快速CSS条目？

#side-menu {
  height: 100vh;
  padding-top:2.0em;  
}

Answer 2

感谢您的回答。我最终使用jQuery使我的解决方案更加动态，因为我的顶级固定菜单的高度可能不同。我使用以下代码更改了主体的顶部填充以匹配顶部菜单的高度：

$('body')
    .css('padding-top', $('#top-menu').height());

在主体顶部添加填充按下包含我的侧边菜单的ui网格。

Answer 3

在垂直菜单上方设置一个空白区域，意味着使用与固定元素具有相同高度的不可见元素放大菜单

#side-menu {
  height: 100%;
}
.fake_area {
  position:relative;
  display:block;
  width:100%;
  height:40px;
}

.
.
.
  <div class="header item">
    Top Menu Header
  </div>
</div>
<div class="fake_area"></div>
<div class="ui grid">
  <div class="four wide column">
.
.
.

check it

如何保持垂直菜单项不会出现在语义UI中的顶部固定菜单后面？

3 个答案: