Javascript 与语义UI边栏抗争

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

我正在尝试创建一个单页应用程序，它有两个侧栏菜单，一个在左侧，一个在右侧。我希望右键在默认情况下隐藏，并在单击按钮时可见。我希望它出现在内容上方，而不是向左推。我希望右侧菜单在默认情况下处于关闭状态，但只需按下按钮即可折叠。下面是我所看到的内容，虽然很接近，但右菜单仍然会将内容向左推，而右菜单则会将内容向外推。还有一个叠加，称为Dim。我猜我必须拼命编写JS并使用onClick调用它，这将允许我进一步定义菜单的设置，但我不确定如何最好地做到这一点。任何帮助都将不胜感激，因为我已经做了很多年了 几个小时了

这是我试图实现的一个很好的例子：

1.
2.
3.
1.
2.
3.
显示边栏
显示边栏

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

<!-- 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>

1.
2.
3.
1.
2.
3.
显示边栏
显示边栏
$（'.ui.left.sidebar'）。侧边栏({
迪姆佩奇：错，
过渡：'推'，
独家:假,，
可关闭：错误
});
$（'.ui.left.sidebar'）
.sidebar（“附加事件”，“左侧边栏切换”）；
$（'.ui.right.sidebar'）。侧边栏({
迪姆佩奇：错，
过渡：“覆盖”，
独家:假,，
可关闭：错误
});
$（'.ui.right.sidebar'）
.sidebar（“附加事件”，“右侧边栏切换”）；

<!-- 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>