3

Semantic-UI 在其侧边栏页面上预先警告“当侧边栏出现时，固定位置的内容可能无法更改其位置。” 然后，它为该问题提供了两种可能的解决方案。

令人惊讶的是，在同一个页面和整个网站上，Semantic-UI 的网站使用了一个固定的顶部菜单，当左侧边栏被触发时，它可以很好地调整。

我想简单地创建一个固定的顶部菜单，就像 Semantic-UI 网站使用的那样，当侧边栏打开时会正确调整。然而，事实证明这非常困难，因为两种提议的解决方案都不起作用。我检查了标记、css 和 javascript，但无法弄清楚他是如何从 Semantic-UI 提供的代码到打开侧边栏时正确调整的工作固定顶部菜单的。

有什么想法或方向吗？使用 Semantic-UI 如何创建一个固定的顶部菜单，在打开侧边栏时可以正确调整？

4

3 回答 3

3

从文档：

使用固定内容 当您的侧边栏可见时，任何应与页面内容一起移动的固定位置内容应接收固定的类名称并作为侧边栏的兄弟元素存在。

当显示侧边栏时，未包含在您的推送器附近的固定内容将失去其定位。

<div class="ui left vertical inverted labeled icon sidebar menu">
</div>
<div class="ui fixed inverted main menu">
</div>
于 2015-06-29T01:55:48.667 回答
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 回答