javascript - 与语义 UI 侧边栏作斗争

Question

我是 HTML/CSS/JS 的新手，我已经开始实现语义 UI。我正在努力处理文档，因为它似乎更适合更有经验的用户。

我正在尝试创建一个具有两个侧边栏菜单的单页应用程序，一个在左侧，一个在右侧。我希望默认情况下隐藏正确的，​​并在单击按钮时显示。我希望它出现在内容之上而不是将其推到左侧。我希望右侧菜单默认不显示，但可以通过按下按钮折叠。以下是据我所知，这很接近，但右侧菜单仍然将内容推向左侧，右侧菜单推出。还有一个覆盖层，称为 Dim。我猜我必须拼命编写 JS 并使用 onClick 调用它，这样我就可以进一步定义菜单的设置，但我不确定如何最好地做到这一点。任何帮助将不胜感激，因为我已经为很多人提供了帮助现在几个小时。

这是我试图实现的一个很好的例子:http://egemem.com/theme/kode/v1.1/blank.html

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="semantic/out/semantic.min.js"></script>

<!-- RIGHT MENU -->
<div class="ui left sidebar menu inverted vertical">
    <a class="item">1</a>
    <a class="item">2</a>
    <a class="item">3</a>
</div>

<!-- RIGHT MENU -->
<div class="ui right sidebar menu inverted vertical dimm">
    <a class="item">1</a>
    <a class="item">2</a>
    <a class="item">3</a>
</div>

<div class="pusher">

<!-- BODY -->
<button id="sidebar_left_toggle" onclick="$('.ui.left.sidebar').sidebar('toggle');">
  show sidebar
</button>

<button id="sidebar_right_toggle" onclick="$('.ui.right.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle');">
  show sidebar
</button>

</div>

Answer 1

在终于找到另一个问题的答案后，我自己解决了这个问题。这是我确定的，以防它帮助初学者。

<!-- LEFT MENU -->
<div class="ui left vertical inverted sidebar menu visible">
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
</div>

<!-- RIGHT MENU -->
<div class="ui right vertical inverted sidebar menu">
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
</div>

<div class="pusher">

<div class="ui container">
  <!-- BODY -->
     <button id="left-sidebar-toggle">
        show sidebar
     </button>

     <button id="right-sidebar-toggle">
        show sidebar
     </button>
 </div>

 </div>

 <script>

 $('.ui.left.sidebar').sidebar({
 dimPage: false,
 transition: 'push',
 exclusive: false,
 closable: false
 });

 $('.ui.left.sidebar')
 .sidebar('attach events', '#left-sidebar-toggle');

 $('.ui.right.sidebar').sidebar({
 dimPage: false,
 transition: 'overlay',
 exclusive: false,
 closable: false
 });

 $('.ui.right.sidebar')
.sidebar('attach events', '#right-sidebar-toggle');

</script>