Semantic Basic Template

by batrasoe

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="ui segment">
Header Segment
</div>
<div class="my app">
<div class="ui thin sidebar inverted vertical menu" id="sidebar">
  <a class="item">
    1
  </a>
  <a className="item">
    2
  </a>
  <a class="item">
    3
  </a>
</div>
<div class="pusher">
  <div class="ui center aligned container">
    This is the main content.
  </div>
  </div>
  </div>

JavaScript

$('.ui.sidebar').sidebar({
  context: $(".my.app")
});

document.setTimeout(function() {
$('.ui.sidebar')
  .sidebar('toggle')
;
},2000);