How to use semantics-ui
I am trying to create a vertical menu on the left using semantic-ui. Something like an admin menu. To align it to the left, I tried to use the rail element provided by the semantics. But my content is not showing.
I tried with the sample code provided on the site. But the result is still the same. what am I missing here?
<body>
<div class="ui segment">
<div class="ui left dividing rail">
<div class="ui segment">
Left Rail Content
</div>
</div>
<div class="ui right dividing rail">
<div class="ui segment">
Right Rail Content
</div>
</div>
<p></p>
<p></p>
</div>
</body>
I've seen the semantic-ui documentation site using a similar approach to show their right menu. If this is not the best approach for creating admin menus, please suggest another better way using semantic ui.
You need to specify the size and position of the center piece. For example:
<body>
<div class="ui segment" style="left:400px;width:600px;">
<div class="ui left dividing rail">
<div class="ui segment">
Left Rail Content
</div>
</div>
<div class="ui right dividing rail">
<div class="ui segment">
Right Rail Content
</div>
</div>
<p></p>
<p></p>
</div>
</body>
You can put them in a container grid
and then add them four wide column
before the main one segment
. You must also set the main segment
eight wide column
one to make it centered (p. 16 = 4 + 8 + 4).
Run the code snippet on the full page.
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.css" rel="stylesheet" />
<div class="ui grid container">
<div class="ui four wide column">
</div>
<div class="ui segment eight wide column">
<div class="ui left rail">
<div class="ui segment">
Left Rail Content
</div>
</div>
<div class="ui right rail">
<div class="ui segment">
Right Rail Content
</div>
</div>
<p>main content here..................................................</p>
<p>main content here..................................................</p>
<p>main content here..................................................</p>
<p>main content here..................................................</p>
<p></p>
</div>
<div class="ui four wide column">
</div>
</div>