Bootstrap Snippet Responsive Side Menu for Bootstrap 4 using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-light navbar-static bg-faded" role="navigation">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <!-- insert more nav-items if you so choose -->
    <button class="navbar-toggler pull-xs-right" id="navbarSideButton" type="button">
      ☰
    </button>
  </ul>
    <!-- navbar-side will go here -->
     <ul class="navbar-side" id="navbarSide">
  <li class="navbar-side-item">
    <a href="#" class="side-link">Signup</a>
  </li>
  <!-- insert more side-items if you so choose -->
</ul>
</nav>
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
.navbar-side {
  height: 100%;
  width: 25%;
  position: fixed;
  top: 0;
  right: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid #ccc;
  background-color: #f7f7f9;
  overflow-y: scroll;
  z-index: 1000;
}
.navbar-side-item {
  padding: 1.5rem 0;
  margin: 0;
  border-bottom: 2px solid #ccc;
  height: 5rem;
}
.side-link {
  padding-left: 2rem;
}
.navbar-side {
    // other code omitted
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: 300ms ease;
  transition: 300ms ease;
}
.reveal {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-transition: 300ms ease;
  transition: 300ms ease;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$( document ).ready(function() {
  $('#navbarSideButton').on('click', function() {
    $('#navbarSide’).addClass('reveal');
  });
});
$( document ).ready(function() {
  // Open navbarSide when button is clicked
  $('#navbarSideButton').on('click', function() {
    $('#navbarSide').addClass('reveal');
    $('.overlay').show();
  });
  // Close navbarSide when the outside of menu is clicked
  $('.overlay').on('click', function(){
    $('#navbarSide').removeClass('reveal');
    $('.overlay').hide();
  });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Responsive Side Menu for Bootstrap 4"
Bootstrap 4.0.0 Snippet by dkstudio

Related: See More

Questions / Comments:

"Responsive Side Menu for Bootstrap 4" Bootstrap 4.0.0 Snippet by dkstudio

Related: See More

Questions / Comments:

"Responsive Side Menu for Bootstrap 4"
Bootstrap 4.0.0 Snippet by dkstudio