Struggling with Semantic UI sidebars

Question

I am very new to HTML/CSS/JS and I have started implementing Semantic UI. I'm struggling with the documentation as it seem more geared towards a more experienced user.

I'm trying to create a single page application that has two sidebar menus, one on the left and one on the right. I'd like the right one to be hidden by default and visible when a button is clicked. I'd like it appear over top of the content and not push it to the left. I'd like the right hand menu to be out by default, but be collapsible with a button press. The following is as far as I've gotten, which is close but the right menu still pushes the content left with the right menu out. There is also a overlay, which is called a Dim. I'm guessing that I have to write the JS desperately and call it using the onClick, which would then allow me to further define the setting for the menu, but I'm not sure how best to do this. Any help would be greatly appreciated as I've been at this for many hours now.

This a good example of what I am attempting to achieve: 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

I solved this myself after finally finding an answer to another question. Here is what I determined in case it helps a fellow beginner out.

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