Bootstrap Snippet Menu using HTML CSS Bootstrap jQuery

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
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
    $("[name=restaurant]").click(function(){
        $("#menu").animate({
            left: '1000px',
            opacity: '0',
            height: '250px',
            width: '250px'
        });
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Menu"
Bootstrap 3.3.0 Snippet by apolyse

Related: See More

Questions / Comments:

"Menu" Bootstrap 3.3.0 Snippet by apolyse

Related: See More

Questions / Comments:

"Menu"
Bootstrap 3.3.0 Snippet by apolyse