"Togglable side menu"
Bootstrap 4.1.1 Snippet by MMLTech

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap sidebar timelapse</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"/> </head> <body> <div class="d-flex wrapper"> <div id="Sidebar" class="sidebar"> <div class="header p-3"> <div class="d-flex align-items-center justify-content-start"> <div class="avatar"> <div class="no-image d-flex align-items-center justify-content-center">MM</div> </div> <div class="info d-flex flex-column"> <strong class="name">M. Maxim</strong> <span class="title">Web Developer</span> </div> </div> </div> <ul class="menu"> <li><a href="#" title=""><i class="fas fa-home"></i> Home</a></li> <li><a href="#" title=""><i class="fas fa-tachometer"></i> Dashboard</a></li> <li><a href="#" title=""><i class="fas fa-globe"></i> Global</a></li> <li> <span class="toggle-submenu d-flex justify-content-between align-items-center"> <label><i class="fas fa-file"></i> Files</label> </span> <ul class="submenu"> <li><a href="#" title=""><i class="fas fa-file"></i> Submenu item 1</a></li> <li><a href="#" title=""><i class="fas fa-file"></i> Submenu item 2</a></li> <li><a href="#" title=""><i class="fas fa-file"></i> Submenu item 3</a></li> <li><a href="#" title=""><i class="fas fa-file"></i> Submenu item 4</a></li> </ul> </li> <li> <span class="toggle-submenu d-flex justify-content-between align-items-center"> <label><i class="fas fa-user"></i> Users</label> </span> <ul class="submenu"> <li><a href="#" title=""><i class="fas fa-file"></i> Submenu item 1</a></li> <li><a href="#" title=""><i class="fas fa-file"></i> Submenu item 2</a></li> <li><a href="#" title=""><i class="fas fa-file"></i> Submenu item 3</a></li> <li><a href="#" title=""><i class="fas fa-file"></i> Submenu item 4</a></li> </ul> </li> </ul> </div> <div id="Content" class="content"> <button class="btn btn-success">Toggle Menu</button> <h3>Colors</h3> <div class="d-flex"> <div style="width: 120px; height: 80px; background:#221168; margin-bottom: 15px;"></div> <div style="width: 120px; height: 80px; background:#473d72; margin-bottom: 15px;"></div> <div style="width: 120px; height: 80px; background:#f8f9fa; margin-bottom: 15px;"></div> <div style="width: 120px; height: 80px; background:#1f1156; margin-bottom: 15px;"></div> </div> </div> </div> <div style="position: fixed;bottom: 5%;right: 5%;"> <h5 style="margin-bottom: 1rem;padding-bottom: 1rem;border-bottom: 1px solid #000;text-align: center;">Support my work @ MMLTech</h5> <div style="display: flex;align-items: center;"> <a style="margin-right:1rem;background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://ko-fi.com/mmltech" target="_blank"><img src="https://storage.ko-fi.com/cdn/Kofi_Logo_Blue.svg" width="60px"/> Buy me a coffee</a> <a style="background: #d1e6fd;display: block;padding: 1rem;border-radius: 0.25rem;border: 1px solid #e9ecef;color: #000;font-weight: bold;" href="https://obscountdown.com" target="_blank"><img src="https://streamcd.net/Assets/images/logo-white.png" width="60px" height="19px" /> My projects</a> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>
html, body, .wrapper{ width: 100%; height: 100%; margin: 0; padding: 0; } ul.submenu, ul.menu{ padding: 0; margin: 0; list-style-type: none; } ul.menu > li{ position: relative; } ul.menu li > span, ul.menu li > a { text-decoration: none!important; color: #f8f9fa; display: block; padding: .35rem .95rem; cursor: pointer; -webkit-transition: .3s all; -moz-transition: .3s all; -ms-transition: .3s all; -o-transition: .3s all; transition: .3s all; } ul.menu li > span i, ul.menu li > a i{ width: 25px; } ul.menu li > span:hover, ul.menu li > a:hover{ color: #473d72 } ul.menu li > span:after, ul.menu li > span.toggled:after{ font-family: "Font Awesome 6 Free"; font-weight: 900; } ul.menu li > span:after{ content:"\f0d7" } ul.menu li > span.toggled:after{ content:"\f0d8" } ul.submenu { position: absolute; left: 313px; width: fit-content; background: #1f1156; padding: .35rem; border-radius: .35rem; top: -15px; display: none; } ul.submenu:before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f0d9"; color: #1f1156; font-size: 46px; position: absolute; left: -12px; } .sidebar { background: #221168; width: 300px; height: 100%; color: #f8f9fa; position: absolute; left: -300px; } .header .avatar{ margin-right: 1rem; } .header .avatar .no-image{ width: 80px; height: 80px; background: #473d72; font-size: 2rem; font-weight: bold; border-radius: 100%; border: 1px solid #1f1156; } .header .info .name{ font-size: 1.3rem; } .content{ padding:15px; }
$(document).on("click", ".toggle-submenu", function () { $(".submenu").hide(); $(".toggle-submenu").removeClass(".toggled"); let parent = $(this).closest("li"), submenu = parent.find(".submenu"); submenu.fadeIn("slow"); $(this).toggleClass("toggled"); }).mouseup(function (e) { let container = $(".submenu"); if(!container.is(e.target) && container.has(e.target).length === 0){ container.hide(); } }); $(document).on("click", "button", function () { let sidebar = $("#Sidebar"), content = $("#Content"); if(parseInt(sidebar.css("left")) !== 0) { sidebar.animate({ left: "0px" }); content.animate({ paddingLeft: "315px" }); } else { sidebar.animate({ left: "-300px" }); content.animate({ paddingLeft: "15px" }); } })

Questions / Comments: