"Menu"
Bootstrap 3.3.0 Snippet by apolyse

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--By Leon Li--> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-3 col-md-3 hidden-xs"> <div class="type-table"> <ul> <h1>Sort By Type</h1> <hr> <li>All</li> <li>Asian</li> <li>BBQ</li> <li>Burgers</li> <li>Healthy</li> <li>Pasta</li> <li>Pizza</li> <li>Sandwiches</li> <li>Wraps</li> </ul> </div> </div> <div class="col-sm-8 col-md-8 col-xs-12 no-padding" id="menu"> <div class="features-table"> <ul> <h1>Open Restaurants</h1> <li name="restaurant"> <div class="row"> <div class="col-sm-3 col-md-2 col-xs-3"><img src='http://www.logospike.com/wp-content/uploads/2015/11/Logo_7_Eleven_03.jpg' class = "logo" /></div> <div class="col-sm-6 col-md-6 col-xs-6 "> 7-Eleven<br> 6546 Trigo Road<br> Isla Vista, CA 93117 </div> </div> </li> <li name="restaurant"> <div class="row"> <div class="col-sm-3 col-md-2 col-xs-3"><img src='https://www.deliveryup.com/editable/images/logos/front/22.jpg' class = "logo" /></div> <div class="col-sm-6 col-md-6 col-xs-6 "> 805 Kabob<br> 6578 Trigo Road<br> Isla Vista, CA 93117 </div> </div> </li> <li name="restaurant"> <div class="row"> <div class="col-sm-3 col-md-2 col-xs-3"><img src='https://www.deliveryup.com/editable/images/logos/front/14.jpg' class = "logo" /></div> <div class="col-sm-6 col-md-6 col-xs-6 "> Pho Bistro<br> 6578 Trigo Road<br> Isla Vista, CA 93117 </div> </div> </li> <li name="restaurant"> <div class="row"> <div class="col-sm-3 col-md-2 col-xs-3"><img src='https://www.deliveryup.com/editable/images/logos/front/5.png' class = "logo" /></div> <div class="col-sm-6 col-md-6 col-xs-6 "> Super Cuca's IV<br> 6527 Madrid Road<br> Isla Vista, CA 93117 </div> </div> </li> <li name="restaurant"> <div class="row"> <div class="col-sm-3 col-md-2 col-xs-3"><img src='http://www.habitburger.com/wp-content/themes/habitburger/images/logo-habit.jpg' class = "logo" /></div> <div class="col-sm-6 col-md-6 col-xs-6 "> The Habit Burger Grill<br> 888 Embarcadero del Norte #C<br> Isla Vista, CA 93117 </div> </div> </li> </ul> </div> </div> </div> </div> </body> </html>
li{ list-style:none; } h1{ font-size:21px !important; } .container{ padding: 15px 15px; } .type-table li { color: #ff7200; font-size: 14px; padding: 4px 4px; } .type-table li:hover{ background: #f7eedc; border-radius: 8px; cursor:pointer; -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } .features-table li { background: #fcf0de none repeat scroll 0 0; border-left: 2px solid #fca037; border-right: 2px solid #fca037; border-bottom: 2px solid #fca037; color: #4c493f; font-size: 16px; padding: 15px 24px; } .features-table li:hover{ background: #ffd089; cursor:pointer; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 0 30px 0 rgba(0, 0, 0, 0.19); -webkit-transition: all .35s; -moz-transition: all .35s; transition: all .35s; } .features-table h1{ background: #ffeac9 none repeat scroll 0 0; color: #8fc647; border-left: 2px solid #fca037; border-top: 2px solid #fca037; border-right: 2px solid #fca037; border-bottom: 2px solid #fca037; font-weight: 600; margin: 0; padding: 19px 21px; text-transform: uppercase; } .features-table h1 { border-top-left-radius: 10px; border-top-right-radius: 10px; text-align:left; } img.logo{ border-style:double; border-width: 1px; border-color: gray; width: 100%; } .fa.fa-check { color: #2cc14f; } .fa.fa-times { color: #BA5340; } .fa{ font-size:30px; } .no-padding{ padding:0; } ul{ padding:0; } body { background: #fffcf2; }
$(document).ready(function(){ $("[name=restaurant]").click(function(){ $("#menu").animate({ left: '1000px', opacity: '0', height: '250px', width: '250px' }); }); });

Questions / Comments: