Bootstrap Collapsing Sidebar Menu

We can make a collapsing sidebar menu using bootstrap and jQuery .Learn how to create a collapsible sidepanel menu.Bootstrap 4 Collapsible Toggle Sidebar with navbar snippet example is best for all kind .Filter elements, sidebar filter panel bootstrap 4. .side-nav-light for light .

Bootstrap 4 is easy to learn . We can make a responsive menu or Sidebar panel using bootstrap 3 or bootstrap 4 .I used Jquery for toggling the Sidebar menu or sidebar panel. You can use JavaScript or Jquery for your convivence.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

  <style>
      li a{
        font-size:15px;
      }
      .content li a
      {
         margin-top:10px;
      }
  </style>    
</head> 
<body>

  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #36344d;">
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link text-white" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Features</a>
        </li>
      </ul>
    
      <span class="navbar-text mr-5 text-white" id="user_id" style="cursor: pointer">
        <h3><i class="fas fa-user-plus"></i></h3>
      </span>
   </div>
</nav>
<div class="container">
  <div class="row">

      <div class="col-sm-8">  
        <h3 class="mt-5">Basic Navbar Example</h3>
        <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
        <p>The navbar-expand-xl|lg|md|sm class determines when the navbar should stack vertically (on extra large, large, medium or small screens).</p>
      </div>   

      <div class="col-sm-4"> 
       <div class="position-absolute" id="user_detail" style="display:none;box-shadow: 0px 2px 4px 1px rgb(0 0 0 / 20%);margin-left:150px;width:75%">
         <div class="header p-4" style="background-color: #673de6">  
           <h5 class="w3-bar-item text-white">Antony Dishar</h5>
           <h6 class="w3-bar-item text-white">antony1221@gmail.com</h6>
        </div>
        <div class="content p-4 bg-light">  
         <ul class="navbar-nav">
            <li class="nav-item active mb-3">
                <i class="fas fa-user"></i><span class="ml-2"><a href="#">Account Information</a></span>
            </li>
            <li class="nav-item mb-3">
                <i class="fas fa-lock"></i><span class="ml-2"><a href="#">Feature</a></span>
            </li>
            <li class="nav-item active mb-3">
                <i class="fas fa-bell"></i><span class="ml-2"><a href="#">Notification</a></span>
            </li>
            <li class="nav-item mb-3">
                <i class="fas fa-cog"></i></i><span class="ml-2"><a href="#">Setting</a></span>
            </li>
            <li class="nav-item mb-3">
                <i class="fas fa-exchange-alt"></i></i><span class="ml-2"><a href="#">Migrate</a></span>
            </li>
            <li class="nav-item mb-3">
                <i class="fas fa-money-bill-alt"></i><span class="ml-2"><a href="#">Earn with us</a></span>
            </li>
            <li class="nav-item mb-3">
                <i class="fas fa-exchange-alt"></i></i><span class="ml-2"><a href="#">Transfer</a></span>
            </li>
            <li class="nav-item mb-3">
                <i class="fas fa-question"></i><span class="ml-2"><a href="#">Help</a></span>
            </li>
         </ul>
       </div>    
      </div>   

    </div>     
</div>
</body>
</html>

<script>
  $(document).ready(function(){
    $('#user_id').click(function(){
      //alert('ddd')
      $('#user_detail').toggle('');
    });
  });
</script>  

Now Click on right side user icon you will get the result.

Bootstrap Example

Basic Navbar Example

A navigation bar is a navigation header that is placed at the top of the page.

The navbar-expand-xl|lg|md|sm class determines when the navbar should stack vertically (on extra large, large, medium or small screens).

You can visit more tutorials .

Leave a Reply

Your email address will not be published. Required fields are marked *