Semantic Ui Sidebar Demo

1513 06 October 2019

No Description Available

Abhishek Singh

~ onex

Semantic Ui Sidebar Demo with Semantic Ui Calender.

Related Elements

4724
1
0

This sidebar contact form is used to get user query form the same page.

Sidebar contact form

onex

1341
1
0

Call to action button

onex

3348
1
0

Materializecss sidenav is a clean and attractive sidenav, which can be customized according to device viewport.

Materilize css Sidenav with ze

onex

<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>
            &nbsp; 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>
            &nbsp; 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>
            &nbsp; 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>

Get HTML

Get CSS

Get JS

Semantic Ui Sidebar Demo

Abhishek Singh

Related Elements

Sidebar contact form

Call to action button

Materilize css Sidenav with ze

Resourse

Log in