Bootstrap Snippet bootstrap 4 side navbar using HTML CSS Bootstrap 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
25
26
27
28
29
30
31
32
33
34
35
36
<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 ---------->
<div class="container-fluid">
  <div class="row">
    <div class="categories col-lg-auto col-12 bg-dark p-0"> 
      <h2>CATEGORIES</h2>
      <nav class="navbar navbar-expand-lg navbar-dark p-0">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
          <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#">Clothing</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Electronics</a></li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shoes</a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <li><a class="dropdown-item" href="#">Reebok</a></li>
                <li><a class="dropdown-item" href="#">Puma</a></li>
                <li><a class="dropdown-item" href="#">NIke</a></li>
              </ul>
            </li>
            <li class="nav-item"><a class="nav-link" href="#">Watches</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Jewellery</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Health and Beauty</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Kids and Babies</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Home and Garden</a></li>
            <li class="nav-item"><a class="nav-link" href="products.html">+View More</a></li>
          </ul>
        </div>
      </nav> <!--navbar end-->
    </div> <!--categories end-->  
  </div>
</div>
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
.categories {min-width:370px; max-width:370px; height:100vh; }
.categories h2{font-size:18px; color:#FFFFFF; font-weight:700; letter-spacing:0.3px; margin:0; padding:34px 15px 24px 30px; border-bottom:solid 1px #999999; }
.navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .dropdown-item{
    border-bottom:solid 1px rgba(191, 189, 189, 0.25);
    color: rgba(255, 255, 255, 0.76);
    padding:12px 30px;
    position:relative;
    font-size: 15px;
    font-weight: 500;
}
.navbar-dark .navbar-nav .nav-link:before{
    content: "\f105";
    font-family: 'FontAwesome';
    position:absolute;
    color:#707070;
    font-size:16px;
    right:15px;
}
.navbar-dark .navbar-nav .nav-item:hover .nav-link:before{color:#FFF;}
.navbar-dark .navbar-nav .nav-item:hover .nav-link{background:#0c95e5; color:#FFF;}
.navbar-dark .navbar-nav .nav-link:after, .navbar-dark .navbar-nav .nav-item:last-child .nav-link:before{display:none;}
.navbar-dark .navbar-nav .nav-item:last-child .nav-link, .navbar-dark .navbar-nav li:last-child .dropdown-item{border-bottom:none;}
.navbar-dark .navbar-toggler{position:absolute; right:30px; top:-60px; }
.navbar-dark .navbar-nav .dropdown {position: relative;}
.navbar-dark .navbar-nav  .dropdown-menu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}
.navbar-dark .navbar-nav .dropdown-menu {
  top: -1px;
  left: 100%;
  margin:0;
  padding:0;
  background:#0c95e5;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//Categories menu
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
  }
  var $subMenu = $(this).next(".dropdown-menu");
  $subMenu.toggleClass('show');
  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass("show");
  });
  
  return false;
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"bootstrap 4 side navbar"
Bootstrap 4.0.0 Snippet by mukeshsingh

Related: See More

Questions / Comments:

"bootstrap 4 side navbar" Bootstrap 4.0.0 Snippet by mukeshsingh

Related: See More

Questions / Comments:

"bootstrap 4 side navbar"
Bootstrap 4.0.0 Snippet by mukeshsingh