Bootstrap Snippet Side Navigation Menu with Jquery using HTML CSS 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/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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="menu" >
      <i class="fa fa-times" aria-hidden="true"></i>
      <ul class="listg">
          <li class="list-item">Ayran</li>
          <li class="list-item">Çay</li>
          <li class="list-item">Kahve</li>
      </ul>
  </div>
  <div class="mainClose">
      <i class="fa fa-bars" aria-hidden="true"></i>
      <div class="container-fluid" style="margin-top: 30px">
       <div class="jumbotron">
           <div class="container">
               <h1>Hello, Çay!</h1>
               <p>Contents ...</p>
               <p>
                   <a class="btn btn-primary btn-lg">Learn more</a>
               </p>
           </div>
       </div>
       <div class="jumbotron">
           <div class="container">
               <h1>Hello, kahve!</h1>
               <p>Contents ...</p>
               <p>
                   <a class="btn btn-primary btn-lg">Learn more</a>
               </p>
           </div>
       </div>
       <div class="jumbotron">
           <div class="container">
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
.menu{
    width: 0px;
    transition:all 0.3s;
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: 0.5s;
    background-color: #673AB7;
    padding-top: 30px;
    color:white;
}
.menu i{
    margin:5px 0px;
    top: 0px;
    right: 10px;
    position: absolute;
    font-size: 30px;
}
.fa.fa-bars{
    margin:5px 0px;
    right: 10px;
    font-size: 30px;
    color:#673AB7;  
    z-index: 1;
}
.menu li{
    list-style: none;
    font-size: 20px;
    padding: 5px 0px;
    font-weight: 600;
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
$(document).ready(function(){
$(".fa-bars").click(function() {
    $(".menu").removeClass('menuClose');
    $(".menu").addClass('menuOpen');
    $(".mainClose").addClass('mainOpen');
    $(".mainOpen").removeClass('mainClose');
    $(".fa-bars").hide(500);
    $(".fa-times").show(500);
});
$(".fa-times").click(function() {
    $(".menu").addClass('menuClose');
    $(".menu").removeClass('menuOpen');
    $(".mainOpen").addClass('mainClose');
    $(".mainClose").removeClass('mainOpen');
    $(".fa-times").hide(500);
    $(".fa-bars").show(500);
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Side Navigation Menu with Jquery"
Bootstrap 4.0.0 Snippet by by06

Related: See More

Questions / Comments:

"Side Navigation Menu with Jquery" Bootstrap 4.0.0 Snippet by by06

Related: See More

Questions / Comments:

"Side Navigation Menu with Jquery"
Bootstrap 4.0.0 Snippet by by06