No Description Available
0
Semantic Ui Sidebar Demo with Semantic Ui Calender.
Awesome call to action registrations page with side nav.
This sidebar contact form is used to get user query form the same page.
$('#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>