시맨틱 UI 사이드 바에 어려움이 있음

Question

저는 HTML/CSS/JS에 익숙하지 않아 시맨틱 UI를 구현하기 시작했습니다. 좀 더 숙련 된 사용자를 대상으로하는 것처럼 문서화에 어려움을 겪고 있습니다.

왼쪽에 하나, 오른쪽에 하나씩 두 개의 사이드 바 메뉴가있는 단일 페이지 응용 프로그램을 만들려고합니다. 오른쪽 버튼이 기본적으로 숨겨져 있고 버튼을 클릭하면 표시되도록하고 싶습니다. 내용 상단에 나타나고 왼쪽으로 밀기를 원하지 않습니다. 오른손 메뉴를 기본적으로 꺼내고 싶지만 버튼 누름으로 접을 수 있어야합니다. 다음은 내가봤을 때와 비슷하지만 가까운 메뉴이지만 여전히 올바른 메뉴가있는 콘텐츠를 푸시합니다. Dim이라는 오버레이도 있습니다. 필자는 JS를 필사적으로 작성하고 onClick을 사용하여 호출해야한다고 추측합니다. 그러면 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>