Bootstrap Snippet multi-level-push-menu using HTML CSS

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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="sumit kumar">
    <title>Trial</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/font-awesome.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="https://use.fontawesome.com/07b0ce5d10.js"></script>
</head>
<body>
    <section class="showHalfMenu" id="haff-menu">
        <div class="container-fluid">
            <!--=======SLID-NAV 1============-->
            <section id="nav-1">
                <nav id="main-nav">
                    <h2 class="title">All Categoris <a href="javascript:;">
               <span class="menu-icon pull-right" id="menu-btn"><i class="fa fa-bars" aria-hidden="true" id="chang-menu-icon"></i></span></a></h2>
                    <ul class="ul" id="main-menu">
                        <li id="home">
                            <a href="javascript:;">
                                <i class="fa fa-laptop" aria-hidden="true"></i> Divice
                                <i class="fa fa fa-chevron-left pull-right arow"></i>
                            </a>
                        </li>
                        <li id="link">
                            <a href="javascript:;">
                                <i class="fa fa-link"></i> Social link <i class="fa fa fa-chevron-left pull-right arow"></i>
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
.showHalfMenu{position:absolute;top:0px;left:-250px;width:300px;height:100%;overflow: hidden;transition: 0.9s;}
#showFullMenu{position: absolute;top:0px;left:0px;width:300px;height:100%;overflow: hidden;transition: 0.9s;}
#nav-1 #main-nav {
    position:absolute;
    top:0px;left:0px;
    width: 300px;
    background-color: #00BCD4;
    height: 100%;overflow: hidden;
    min-height: 720px;   
}
#main-menu{display: none;}
.title {
    font-size: 24px;
    font-weight: bold;
    color: #FFEB3B;
    padding: 15px 15px;
    border-bottom: solid 1px #000;
    margin-top: 0px;
    margin-bottom: 0px;
}
.title > a .fa{color:#fff;}
.ul{margin:0px;padding:0px;}
.ul li{list-style-type:none;width:100%;border-bottom: solid 1px #000;}
.ul li a{text-align:left;text-decoration:none;font-size:16px;text-transform: capitalize;color:#fff;padding:10px 15px;display:block;}
.ul li a .fa{margin-right:10px;}
.ul li a:hover{background-color:#00acc1;}
/*NAV BAR-2**************************/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"multi-level-push-menu"
Bootstrap 3.3.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"multi-level-push-menu" Bootstrap 3.3.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"multi-level-push-menu"
Bootstrap 3.3.0 Snippet by sumi9xm