"Animated hamburger sidebar 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> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> </head> <body> <div class="container"> <div class="py-3"> <div data-trigger="mobile-menu-toggle"> <span>MENU</span> <button class="btn"> <span></span> <span></span> <span></span> </button> </div> </div> </div> <aside class="menu"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </aside> </body> <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://streamcd.net" target="_blank"><img src="https://streamcd.net/Assets/images/logo-white.png" width="60px" height="19px" /> My projects</a> </div> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </html>
aside.menu{ width: 300px; position: fixed; top:0; left: -200%; bottom: 0; background: #3c1874; -webkit-transition: .5s all; -moz-transition: .5s all; -ms-transition: .5s all; -o-transition: .5s all; transition: .5s all; z-index: 99; } .toggled aside.menu{ left:0; } [data-trigger=mobile-menu-toggle] { /*display: none;*/ display: flex; margin-bottom: 1rem; border-radius: 0.25rem; background: #3c1874; justify-content: space-between; align-items: center; padding: 1rem; position: sticky; top: 0; z-index: 9; } [data-trigger=mobile-menu-toggle] > span { font-weight: bold; font-size: 24px; color:#fff; } /*@media only screen and (max-width: 991px) { [data-trigger=mobile-menu-toggle] { display: flex; } }*/ [data-trigger=mobile-menu-toggle] button { position: relative; display: flex; width: 50px; height: 40px; padding: 10px 0; flex-direction: column; justify-content: space-between; align-items: center; background: none; border:1px solid #fff; } [data-trigger=mobile-menu-toggle] button span { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; width: 20px; height: 2px; background: #fff; } [data-trigger=mobile-menu-toggle] button.toggled span { width: 20px; height: 2px; } [data-trigger=mobile-menu-toggle] button.toggled span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 30px; position: absolute; top: 50%; } [data-trigger=mobile-menu-toggle] button.toggled span:nth-child(2) { opacity: 0; position: absolute; } [data-trigger=mobile-menu-toggle] button.toggled span:nth-child(3) { width: 30px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; top: 50%; } .menu ul{ list-style-type: none; margin:0; padding: 1rem 0; } .menu ul li a{ display: flex; align-items: center; padding: .55rem; font-weight: bold; color: #fff; font-size: 14px; text-transform: uppercase; text-decoration: none!important; } .menu ul li a:before{ content: '\>'; font-weight: bold; margin-right: .55rem; -webkit-transition: .3s all; -moz-transition: .3s all; -ms-transition: .3s all; -o-transition: .3s all; transition: .3s all; } .menu ul li a:hover:before{ margin-right: 1rem; }
$(function () { $(document).on('click', '[data-trigger="mobile-menu-toggle"] button', function () { $('body').toggleClass('toggled'); $(this).toggleClass('toggled'); }) });

Related: See More

Paper Kit 2
Hamburger Icon Animations
Animated Radio tab
Animated 3d social icon in css3

Questions / Comments: