Bootstrap Snippet Blue n white 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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<div class="container">
    <div class="row">
        <div class="wrapper">
            <div class="side-bar">
                <ul>
                    <li class="menu-head">
                        CLASH OF CLANS <a href="#" class="push_menu"><span class="glyphicon glyphicon-align-justify pull-right"></span></a>
                    </li>
                    <div class="menu">
                        <li>
                            <a href="#">Dashboard <span class="glyphicon glyphicon-dashboard pull-right"></span></a>
                        </li>
                        <li>
                            <a href="#">Love snippet<span class="glyphicon glyphicon-heart pull-right"></span></a>
                        </li>
                        <li>
                            <a href="#">Like it? <span class="glyphicon glyphicon-star pull-right"></span></a>
                            <ul class="parent">
                                <li><a href="#">Read</a></li>
                                <li><a href="#">Write</a></li>
                                <li><a href="#">Execute</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Settings <span class="glyphicon glyphicon-cog pull-right"></span></a>
                        </li>
                    </div>
                    
                </ul>
            </div>   
            <div class="content">
                <div class="col-md-12">
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
@import url(http://fonts.googleapis.com/css?family=Lato);
.container
{
    width:800px;
    overflow:hidden;
    display:inline-block;
}
.side-bar
{
    background:#6590A5;
    position:absolute;
    height:100%;
    width:200px;
    color:#fff;
    transition: margin-left 0.5s;
}
.side-bar ul
{
    list-style:none;
    padding:0px;
    
}
.side-bar ul li.menu-head
{
    font-family: 'Lato', sans-serif;
    padding:20px;
}
.side-bar ul li.menu-head a
{
    color:#fff;
    text-decoration:none;
    height:50px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
    $(".push_menu").click(function(){
         $(".wrapper").toggleClass("active");
    });
    
});
$(document).ready(function(){
    $(".menu li a").click(function(){
        //$(this).parent('li:has(ul)').find('ul').show();
        //$(this).parent('li:has(ul)').children('ul').toggle(300);
        
        $(this).parent().children('ul.parent').toggle(300);
    });
});    
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Blue n white"
Bootstrap 3.2.0 Snippet by keshavkatwe

Related: See More

Questions / Comments:

"Blue n white" Bootstrap 3.2.0 Snippet by keshavkatwe

Related: See More

Questions / Comments:

"Blue n white"
Bootstrap 3.2.0 Snippet by keshavkatwe