Created
March 31, 2022 03:16
-
-
Save Renancp01/e294c3eadb6340b0b7070b022eaa0063 to your computer and use it in GitHub Desktop.
Collapsable Sidebar Bootstrap 4 & Jquery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html><body id="top"> | |
| <!-- Bootstrap NavBar --> | |
| <nav class="navbar navbar-expand-md navbar-dark bg-primary"> | |
| <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <a class="navbar-brand" href="#"> | |
| <img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> | |
| <span class="menu-collapsed">Brand</span> | |
| </a> | |
| <div class="collapse navbar-collapse" id="navbarNavDropdown"> | |
| <ul class="navbar-nav ml-auto"> | |
| <li class="nav-item active"> | |
| <a class="nav-link" href="#top">Home <span class="sr-only">(current)</span></a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#top">Features</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#top">Pricing</a> | |
| </li> | |
| <!-- This menu is hidden in bigger devices with d-sm-none. | |
| The sidebar isn't proper for smaller screens imo, so this dropdown menu can keep all the useful sidebar itens exclusively for smaller screens --> | |
| <li class="nav-item dropdown d-sm-block d-md-none"> | |
| <a class="nav-link dropdown-toggle" href="#" id="smallerscreenmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Menu </a> | |
| <div class="dropdown-menu" aria-labelledby="smallerscreenmenu"> | |
| <a class="dropdown-item" href="#top">hjsahgjsa</a> | |
| <a class="dropdown-item" href="#top">Profile</a> | |
| <a class="dropdown-item" href="#top">Tasks</a> | |
| <a class="dropdown-item" href="#top">Etc ...</a> | |
| </div> | |
| </li><!-- Smaller devices menu END --> | |
| </ul> | |
| </div> | |
| </nav><!-- NavBar END --> | |
| <!-- Bootstrap row --> | |
| <div class="row" id="body-row"> | |
| <!-- Sidebar --> | |
| <div id="sidebar-container" class="sidebar-expanded d-none d-md-block"> | |
| <!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' --> | |
| <!-- Bootstrap List Group --> | |
| <ul class="list-group"> | |
| <!-- Separator with title --> | |
| <li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed"> | |
| <small>MAIN MENU</small> | |
| </li> | |
| <!-- /END Separator --> | |
| <!-- Menu with submenu --> | |
| <a href="#submenu1" data-toggle="collapse" aria-expanded="false" class="bg-dark list-group-item list-group-item-action flex-column align-items-start"> | |
| <div class="d-flex w-100 justify-content-start align-items-center"> | |
| <span class="fa fa-dashboard fa-fw mr-3"></span> | |
| <span class="menu-collapsed">Dashboard</span> | |
| <span class="submenu-icon ml-auto"></span> | |
| </div> | |
| </a> | |
| <!-- Submenu content --> | |
| <div id='submenu1' class="collapse sidebar-submenu"> | |
| <a href="#" class="list-group-item list-group-item-action bg-dark text-white"> | |
| <span class="menu-collapsed">Chahgag</span> | |
| </a> | |
| <a href="#" class="list-group-item list-group-item-action bg-dark text-white"> | |
| <span class="menu-collapsed">Reports</span> | |
| </a> | |
| <a href="#" class="list-group-item list-group-item-action bg-dark text-white"> | |
| <span class="menu-collapsed">Tables</span> | |
| </a> | |
| </div> | |
| <a href="#submenu2" data-toggle="collapse" aria-expanded="false" class="bg-dark list-group-item list-group-item-action flex-column align-items-start"> | |
| <div class="d-flex w-100 justify-content-start align-items-center"> | |
| <span class="fa fa-user fa-fw mr-3"></span> | |
| <span class="menu-collapsed">Profile</span> | |
| <span class="submenu-icon ml-auto"></span> | |
| </div> | |
| </a> | |
| <!-- Submenu content --> | |
| <div id='submenu2' class="collapse sidebar-submenu"> | |
| <a href="#" class="list-group-item list-group-item-action bg-dark text-white"> | |
| <span class="menu-collapsed">Settings</span> | |
| </a> | |
| <a href="#" class="list-group-item list-group-item-action bg-dark text-white"> | |
| <span class="menu-collapsed">Password</span> | |
| </a> | |
| </div> | |
| <a href="#" class="bg-dark list-group-item list-group-item-action"> | |
| <div class="d-flex w-100 justify-content-start align-items-center"> | |
| <span class="fa fa-tasks fa-fw mr-3"></span> | |
| <span class="menu-collapsed">Tasks</span> | |
| </div> | |
| </a> | |
| <!-- Separator with title --> | |
| <li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed"> | |
| <small>OPTIONS</small> | |
| </li> | |
| <!-- /END Separator --> | |
| <a href="#" class="bg-dark list-group-item list-group-item-action"> | |
| <div class="d-flex w-100 justify-content-start align-items-center"> | |
| <span class="fa fa-calendar fa-fw mr-3"></span> | |
| <span class="menu-collapsed">Calendar</span> | |
| </div> | |
| </a> | |
| <a href="#" class="bg-dark list-group-item list-group-item-action"> | |
| <div class="d-flex w-100 justify-content-start align-items-center"> | |
| <span class="fa fa-envelope-o fa-fw mr-3"></span> | |
| <span class="menu-collapsed">Messages <span class="badge badge-pill badge-primary ml-2">5</span></span> | |
| </div> | |
| </a> | |
| <!-- Separator without title --> | |
| <li class="list-group-item sidebar-separator menu-collapsed"></li> | |
| <!-- /END Separator --> | |
| <a href="#" class="bg-dark list-group-item list-group-item-action"> | |
| <div class="d-flex w-100 justify-content-start align-items-center"> | |
| <span class="fa fa-question fa-fw mr-3"></span> | |
| <span class="menu-collapsed">Help</span> | |
| </div> | |
| </a> | |
| <a href="#top" data-toggle="sidebar-colapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center"> | |
| <div class="d-flex w-100 justify-content-start align-items-center"> | |
| <span id="collapse-icon" class="fa fa-2x mr-3"></span> | |
| <span id="collapse-text" class="menu-collapsed">Collapse</span> | |
| </div> | |
| </a> | |
| </ul><!-- List Group END--> | |
| </div><!-- sidebar-container END --> | |
| <!-- MAIN --> | |
| <div class="col p-4"> | |
| <h1 class="display-4">Collapsing Sidebar Menu</h1> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id leo in dui dapibus scelerisque et fringilla nunc. Nunc tincidunt risus et urna porttitor gravida. Cras posuere tempus ante, id pulvinar purus laoreet quis. Vivamus eget luctus sem. Nunc porttitor justo a diam porta, at congue nulla tincidunt. Donec sem nunc, posuere vel augue ac, semper condimentum orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet, nisi eget venenatis pulvinar, augue turpis pretium est, eu posuere libero nisi quis eros. Ut a ex tristique, faucibus quam ac, venenatis ipsum. Nullam quis ligula mauris. Integer dignissim est tortor, vel auctor magna hendrerit id. Integer bibendum tortor nec mollis luctus. | |
| </div><!-- Main Col END --> | |
| </div><!-- body-row END --> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Hide submenus | |
| $('#body-row .collapse').collapse('hide'); | |
| // Collapse/Expand icon | |
| $('#collapse-icon').addClass('fa-angle-double-left'); | |
| // Collapse click | |
| $('[data-toggle=sidebar-colapse]').click(function() { | |
| SidebarCollapse(); | |
| }); | |
| function SidebarCollapse () { | |
| $('.menu-collapsed').toggleClass('d-none'); | |
| $('.sidebar-submenu').toggleClass('d-none'); | |
| $('.submenu-icon').toggleClass('d-none'); | |
| $('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed'); | |
| // Treating d-flex/d-none on separators with title | |
| var SeparatorTitle = $('.sidebar-separator-title'); | |
| if ( SeparatorTitle.hasClass('d-flex') ) { | |
| SeparatorTitle.removeClass('d-flex'); | |
| } else { | |
| SeparatorTitle.addClass('d-flex'); | |
| } | |
| // Collapse/Expand icon | |
| $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right'); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #body-row { | |
| margin-left:0; | |
| margin-right:0; | |
| } | |
| #sidebar-container { | |
| min-height: 100vh; | |
| background-color: #333; | |
| padding: 0; | |
| } | |
| /* Sidebar sizes when expanded and expanded */ | |
| .sidebar-expanded { | |
| width: 230px; | |
| } | |
| .sidebar-collapsed { | |
| width: 60px; | |
| } | |
| /* Menu item*/ | |
| #sidebar-container .list-group a { | |
| height: 50px; | |
| color: white; | |
| } | |
| /* Submenu item*/ | |
| #sidebar-container .list-group .sidebar-submenu a { | |
| height: 45px; | |
| padding-left: 30px; | |
| } | |
| .sidebar-submenu { | |
| font-size: 0.9rem; | |
| } | |
| /* Separators */ | |
| .sidebar-separator-title { | |
| background-color: #333; | |
| height: 35px; | |
| } | |
| .sidebar-separator { | |
| background-color: #333; | |
| height: 25px; | |
| } | |
| .logo-separator { | |
| background-color: #333; | |
| height: 60px; | |
| } | |
| /* Closed submenu icon */ | |
| #sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after { | |
| content: " \f0d7"; | |
| font-family: FontAwesome; | |
| display: inline; | |
| text-align: right; | |
| padding-left: 10px; | |
| } | |
| /* Opened submenu icon */ | |
| #sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after { | |
| content: " \f0da"; | |
| font-family: FontAwesome; | |
| display: inline; | |
| text-align: right; | |
| padding-left: 10px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment