No Description Available
0
Semantic Ui Sidebar Demo with Semantic Ui Calender.
This sidebar contact form is used to get user query form the same page.
onex
Materializecss sidenav is a clean and attractive sidenav, which can be customized according to device viewport.
$('#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>