2

Web サイトに上部の固定メニューと左側の垂直メニューの両方を表示しようとしています。私は本当に両方を修正したいのですが、スクロールを開始すると、以下のコードと 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

答えてくれてありがとう。上部の固定メニューの高さが異なる可能性があるため、jQuery を使用してソリューションをもう少し動的にすることになりました。このコードを使用して、トップ メニューの高さに合わせて本文の上部パディングを変更しました。

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

本文の上部にパディングを追加すると、サイド メニューを含む UI グリッドが押し下げられます。

于 2016-11-05T14:45:29.117 に答える