{Theme} theme has book table component. If you would like to see it, click on the menu About us -> Book Table or just click on the button Book a Table on the main slider in home page.
Book Table
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
<div class="ct-bookTable ct-u-paddingBoth80 is-open" style="display: block;"><a href="#"></a> <div class="ct-bookTable-border"> <header class="text-uppercase ct-u-fontTypeBold ct-u-colorWhite text-center">GIVE US SOME INFORMATIONS ABOUT YOUR BOOKING</header> <div class="container ct-u-paddingTop60"> <div class="row"> <div class="col-md-12 text-center"> <p class="text-uppercase ct-u-fontSize16 ct-u-colorWhite ct-u-fontTypeBold">when you wanna book a table?</p> <ul class="ct-dropdown-button list-unstyled list-inline ct-u-paddingBottom50 ct-u-paddingTop15"> <li> <div class="dropdown"> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn-dropdown dropdown-toggle">sep</button> <ul class="dropdown-menu ct-dropdown-menu"> <li><a href="#">Jan</a></li> <li><a href="#">feb</a></li> <li><a href="#">mar</a></li> <li><a href="#">apr</a></li> <li><a href="#">may</a></li> <li><a href="#">jun</a></li> <li><a href="#">jul</a></li> <li><a href="#">aug</a></li> <li><a href="#">sep</a></li> <li><a href="#">oct</a></li> <li><a href="#">nov</a></li> <li><a href="#">dec</a></li> </ul> </div> </li> <li> <div class="dropdown"> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn-dropdown dropdown-toggle">21</button> <ul class="dropdown-menu ct-dropdown-menu"> <li><a href="#">01</a></li> <li><a href="#">02</a></li> <li><a href="#">03</a></li> <li><a href="#">04</a></li> <li><a href="#">05</a></li> <li><a href="#">06</a></li> <li><a href="#">07</a></li> <li><a href="#">08</a></li> <li><a href="#">09</a></li> <li><a href="#">10</a></li> <li><a href="#">11</a></li> <li><a href="#">12</a></li> <li><a href="#">13</a></li> <li><a href="#">14</a></li> <li><a href="#">15</a></li> <li><a href="#">16</a></li> <li><a href="#">17</a></li> <li><a href="#">18</a></li> <li><a href="#">19</a></li> <li><a href="#">20</a></li> <li><a href="#">21</a></li> <li><a href="#">22</a></li> <li><a href="#">23</a></li> <li><a href="#">24</a></li> <li><a href="#">25</a></li> <li><a href="#">26</a></li> <li><a href="#">27</a></li> <li><a href="#">28</a></li> <li><a href="#">29</a></li> <li><a href="#">30</a></li> <li><a href="#">31</a></li> </ul> </div> </li> <li> <div class="dropdown"> <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn-dropdowns dropdown-toggle">9pm</button> <ul class="dropdown-menu ct-dropdown-menu"> <li><a href="#">9am</a></li> <li><a href="#">10am</a></li> <li><a href="#">11am</a></li> <li><a href="#">12am</a></li> <li><a href="#">1pm</a></li> <li><a href="#">2pm</a></li> <li><a href="#">3pm</a></li> <li><a href="#">4pm</a></li> <li><a href="#">5pm</a></li> <li><a href="#">6pm</a></li> <li><a href="#">7pm</a></li> <li><a href="#">8pm</a></li> <li><a href="#">9pm</a></li> </ul> </div> </li> </ul> </div> </div> <form action="assets/form/send.php" method="post" data-email-subject="Contact Form" data-show-errors="true" class="contactForm validateIt"> <div class="row ct-u-paddingBottom15"> <div class="col-md-12"> <div class="col-lg-6 col-md-6 col-sm-6"> <div class="form-group"> <label class="control-label ct-u-fontSize16 ct-u-fontTypeBold ct-u-colorWhite text-uppercase ct-u-paddingBottom10">first name</label> <input type="text" placeholder="put in your first name" required="" class="form-control input-lg input-typeSecond"> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6"> <div class="form-group"> <label class="control-label ct-u-fontSize16 ct-u-fontTypeBold ct-u-colorWhite text-uppercase ct-u-paddingBottom10">last name</label> <input type="text" placeholder="put in your last name" required="" class="form-control input-lg input-typeSecond"> </div> </div> </div> </div> <div class="row ct-u-paddingBottom15"> <div class="col-md-12"> <div class="col-lg-6 col-md-6 col-sm-6"> <div class="form-group"> <label class="control-label ct-u-fontSize16 ct-u-fontTypeBold ct-u-colorWhite text-uppercase ct-u-paddingBottom10">email</label> <input type="email" placeholder="put in your email address" required="" class="form-control input-lg input-typeSecond"> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6"> <div class="form-group"> <label class="control-label ct-u-fontSize16 ct-u-fontTypeBold ct-u-colorWhite text-uppercase ct-u-paddingBottom10">phone</label> <input type="text" placeholder="put in your phone number" required="" class="form-control input-lg input-typeSecond"> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="col-lg-4 col-md-4 col-sm-6"> <div class="form-group ct-u-paddingBottom20"> <label class="control-label ct-u-fontSize16 ct-u-fontTypeBold ct-u-colorWhite text-uppercase ct-u-paddingBottom10">how many guests</label> <input type="email" placeholder="put in your email address" required="" class="form-control input-lg input-typeSecond"> </div> <div class="form-group"> <button type="submit" class="btn btn-link btn-xs btn-block">place a booking</button> </div> </div> <div class="col-lg-8 col-md-8 col-sm-6"> <div class="form-group"> <label class="control-label ct-u-fontSize16 ct-u-fontTypeBold ct-u-colorWhite text-uppercase ct-u-paddingBottom10">special requests</label> <textarea rows="5" placeholder="put in your requests" class="form-control input-typeSecond"></textarea> </div> </div> </div> </div> </form> <div style="display:none" class="successMessage alert alert-success ct-u-marginTop15"> <button type="button" data-dismiss="alert" aria-hidden="true" class="close">×</button> <p>Thank You!</p> </div> <div style="display:none" class="errorMessage alert alert-danger ct-u-marginTop15"> <button type="button" data-dismiss="alert" aria-hidden="true" class="close">×</button> <p>Ups! An error occured. Please try again later.</p> </div> </div> </div> </div> |
JavaScript
This code can be find in the {Theme} main.js file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
// Book table //------------------------------------------------------------------------------------- if ($(".ct-bookTable").length > 0) { $(".ct-js-bookTable, .ct-bookTable a").on("click",function (e) { var y = $(".ct-bookTable").innerHeight(); $(".ct-bookTable").slideToggle(400); setTimeout(function () { $('html, body').animate({ scrollTop: $("body").offset().top }, 1000); }, 500); if ($(".ct-bookTable").hasClass('is-open')) { $(".ct-bookTable").removeClass('is-open'); $("body").find("nav.navbar").animate({ top: 0 }, 400); if ($("body").find("nav.navbar").hasClass('navbar-fixed-top')) { $("body").find("nav.navbar").removeClass('navbar-absolute'); } } else { $(".ct-bookTable").addClass('is-open'); $("body").find("nav.navbar").animate({ top: y }, 400) if ($("body").find("nav.navbar").hasClass('navbar-fixed-top')) { $("body").find("nav.navbar").addClass('navbar-absolute'); } } e.preventDefault(); }); } |