No Description Available
Semantic Ui Sidebar Demo
1253 06 October 2019
Abhishek Singh
~ onex0
Semantic Ui Sidebar Demo with Semantic Ui Calender.
No Description Available
0
Semantic Ui Sidebar Demo with Semantic Ui Calender.
$('#cart').on('click', () => {
$('.ui.sidebar')
.sidebar('toggle')
// .sidebar('setting', 'transition', 'overlay');
});
$('select.dropdown')
.dropdown();
$('#example1').calendar();
$('#example2').calendar();
$('.ui.sidebar').sidebar('toggle')
<button class="ui labeled icon button pull-right" id="cart">
<i class="bars icon"></i>
Menu
</button>
<div class="ui right demo vertical inverted sidebar labeled icon menu wide">
<!--first Label-->
<div class="label">
<h3 class="label-head">
<span class="numb">
1
</span>
Pick Your Items
</h3>
<div class="label-content">
<table class="table table-hover">
<tbody id="sideData">
<tr>
<td>1</td>
<td style="white-space:normal">Vegetable Biryani</td>
<td class="text-success"><i class="fa fa-inr"></i> 140 x 1</td>
<td><a href="process-del-cart.php?cid=49"> <span class="label label-danger"><i class="fa fa-times" style="color:#fff"></i></span></a></td>
</tr><tr>
<td>2</td>
<td style="white-space:normal">Plain Roti</td>
<td class="text-success"><i class="fa fa-inr"></i> 140 x 1</td>
<td><a href="process-del-cart.php?cid=50"> <span class="label label-danger"><i class="fa fa-times" style="color:#fff"></i></span></a></td>
</tr><tr>
<td>3</td>
<td style="white-space:normal">Kadi Chawal</td>
<td class="text-success"><i class="fa fa-inr"></i> 140 x 1</td>
<td><a href="process-del-cart.php?cid=51"> <span class="label label-danger"><i class="fa fa-times" style="color:#fff"></i></span></a></td>
</tr><tr>
<td>4</td>
<td style="white-space:normal">Shahi Punjabi Thali(Dal Makhani,Shahi Paneer,02 Roti,or 01 Naan or 01 Prantha,Plain Rice,Raita,Papad)</td>
<td class="text-success"><i class="fa fa-inr"></i> 140 x 1</td>
<td><a href="process-del-cart.php?cid=52"> <span class="label label-danger"><i class="fa fa-times" style="color:#fff"></i></span></a></td>
</tr><tr>
<td>5</td>
<td style="white-space:normal">Chole Chawal</td>
<td class="text-success"><i class="fa fa-inr"></i> 140 x 1</td>
<td><a href="process-del-cart.php?cid=53"> <span class="label label-danger"><i class="fa fa-times" style="color:#fff"></i></span></a></td>
</tbody>
</table>
</div>
</div>
<!--Second Label-->
<div class="label">
<h3 class="label-head">
<span class="numb">
2
</span>
Pick Order Type
</h3>
<div class="label-content">
<button class="large ui button" disabled="disable">
<span class="tiny"><i class="taxi icon"></i> Delevery <br>not Available</span>
</button>
<button class="large ui button">
<span class="tiny"><i class="fa fa-cutlery"></i> Carryout<br>
<div class="ui radio checkbox" style="margin:0">
<input type="radio" name="radio" checked="checked">
<label></label>
</div>
</span>
</button>
</div>
</div>
<div class="label">
<h3 class="label-head">
<span class="numb">
3
</span>
Pick Order Time
</h3>
<!--<div class="label-content">-->
<div class="ui calendar" id="example1">
<div class="ui input left icon fluid">
<i class="calendar icon"></i>
<input class="fluid" type="text" placeholder="Date/Time">
</div>
</div>
<!--</div>-->
</div>
<div class="check-out" style="margin:2rem 0">
<button class="positive ui button big fluid">Checkout as Guest</button>
</div>
<div class="foot-img">
<img src="https://jumbotron-production-f.squarecdn.com/assets/685263d798c6319d408a.png">
</div>
</div>
<div class="ui container">
<h1>Semantic Ui Calender</h1>
<h3>Input</h3>
<div class="ui calendar" id="example2">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input id="datepicker" class="fluid" type="text" placeholder="Date/Time">
</div>
</div>
<br/>
</div>