2

我试图在我的网站上同时拥有顶部固定菜单和左侧垂直菜单。我真的希望两者都被修复，但是如果我开始滚动，那么左侧垂直菜单将在顶部菜单下方向上滑动，如下面的代码和 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/

我希望我正在尝试做的事情是有意义的。有谁知道我如何才能拥有这两个固定菜单而不会重叠我的项目？

4

3 回答 3

2

一个快速的 CSS 条目？

#side-menu {
  height: 100vh;
  padding-top:2.0em;  
}
于 2016-11-03T14:57:14.827 回答
2

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

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

在正文顶部添加填充会向下推包含我的侧边菜单的 ui 网格。

于 2016-11-05T14:45:29.117 回答
1

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

#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">
.
.
.

核实

于 2016-11-03T14:57:46.393 回答