Борьба с боковыми панелями с семантическим UI

Question

Я очень новичок в HTML/CSS/JS, и я начал внедрять Semantic 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>