在语义UI侧边栏中苦苦挣扎

Question

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

我正在尝试创建一个单页应用程序,它有两个侧边栏菜单,一个在左边,一个在右边.我希望默认情况下隐藏正确的一个,并在单击按钮时可见.我希望它出现在内容的顶部而不是向左推.我希望默认情况下右手菜单出来,但按下按钮可以折叠.以下是我已经得到的,这是关闭但右侧菜单仍然推出右侧菜单的内容.还有一个叠加层,称为暗淡.我猜我必须拼命编写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>