3

Semantic-UI は、サイドバー ページで、「サイドバーが表示されたときに位置が固定されているコンテンツは、その位置を変更する際に問題が発生する可能性がある」と警告しています。次に、問題に対する 2 つの可能な解決策を示します。

驚くべきことに、同じページとサイト全体で、Semantic-UI の Web サイトは固定のトップ メニューを使用しており、左側のサイドバーがトリガーされるとうまく調整されます。

Semantic-UI のサイトで使用されているような、サイドバーが開いたときに適切に調整される固定トップ メニューを単純に作成したいと考えています。ただし、提案された 2 つの解決策はどちらも機能しないため、これはイライラするほど難しいことがわかっています。マークアップ、css、および javascript を調べましたが、Semantic-UI が提供するコードから、サイドバーが開いたときに適切に調整される動作する固定トップ メニューにどのように移行したのかわかりません。

考えや方向性はありますか？Semantic-UI を使用して、サイドバーが開いたときに適切に調整される固定トップ メニューをどのように作成しますか?

4

3 に答える 3

1 
<!-- Left Sidebar -->
<div class="ui visible inverted left vertical sidebar menu">
    <a class="item">Home    </a>
    <a class="item">Page 1</a>
    <a class="item">Page 2</a>
</div>

<!-- Top Fixed Menu -->
<div class="ui top fixed menu">
    <a class="item menu-trigger">Menu</a>
    <a class="item">Page 1</a>
    <a class="item">Page 2</a>
</div>

<div class="pusher">
    <!-- Page Content Here-->
    <div class="ui basic segment">
        <h3 class="ui header">Hello there</h3>  
    </div>
</div>

上記のコードを「body」タグ内に配置し、css および js ファイルを含めることを忘れないでください。

于 2016-02-07T18:45:02.490 に答える
0

「排他的」設定を使用して、互いにうまく連携する複数のサイドバーを表示します。

$('.your-shared-sidebar-class').sidebar('setting','exclusive',false).sidebar('show');

于 2014-06-20T19:33:04.733 に答える