Menu
I am trying to create a vertical left menu using semantic-ui. Something like admin menu. To make it aligned into left, I tried to use rail element provided by semantic-ui. But my content is not visible.
I tried with example code provided in the site. But 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 saw semantic-ui documentation site also using similar approach for showing their right menu. If this is not a best approach to create admin menu, please suggest any other better way using semantic ui.
953
You need to specify size and position of an central element. 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 grid container, then add a four wide column before main segment.
You should also set the main segment eight wide column to make it at the center (p.s. 16 = 4 + 8 + 4).
Run the code snippet in full page please.
<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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
