Bootstrap Snippet Menu with background pic 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 ---------->
<html>
<!--By Leon Li-->
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="main.css?v=31">
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <script   src="https://code.jquery.com/jquery-1.12.3.min.js"   integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"></script>
        <script src="all.js"></script>
  </head>
 <body>
        <div class="container" id="restarants">
            <div class="row">
                <div class="col-sm-3 col-md-3 hidden-xs">
                    <div class="type-table">
                        <ul>
                            <h1 class="type-table-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">
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;
    }    
.type-table-h1{
    color: #fff;
}
.container{
    padding: 15px 15px;
}
.type-table li {
    color: #fc5e0f;
    border-radius: 4px;
    font-size: 14px;
    padding: 4px 4px;
}
.type-table li:hover{
    background: #ffd089;
    opacity: 0.75;
    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; */
    background: #ffe0ba;
    border-left: 2px solid #fca037;
    border-right: 2px solid #fca037;
    border-bottom: 2px solid #fca037;
    border-top: 2px solid #fca037;
    color: #4c493f;
    font-size: 16px;
    padding: 15px 24px;
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 with background pic"
Bootstrap 3.3.0 Snippet by apolyse

Related: See More

Questions / Comments:

"Menu with background pic" Bootstrap 3.3.0 Snippet by apolyse

Related: See More

Questions / Comments:

"Menu with background pic"
Bootstrap 3.3.0 Snippet by apolyse