Bootstrap Responsive Menu Drawer

Developer
Jesse Glacken
Size
3,777 Kb
Views
62,744
  1. Bootstrap Responsive Menu Drawer Previews
  2. Bootstrap Responsive Menu Drawer HTML Codes
  3. Bootstrap Responsive Menu Drawer CSS Codes
  4. Bootstrap Responsive Menu Drawer JS Codes

How do I make an bootstrap responsive menu drawer?

Responsive mega-menu implemented with Bootstrap 3 navbar and tabs. At resolutions below 768px, the nav drawer is appended to the active <li> in the menu, effectively creating an accordion nav on smaller screens.. What is a bootstrap responsive menu drawer? How do you make a bootstrap responsive menu drawer? This script and codes were developed by Jesse Glacken on 17 September 2022, Saturday.

Bootstrap Responsive Menu Drawer Previews
IQ Test

Bootstrap Responsive Menu Drawer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap Responsive Menu Drawer</title>
<meta name="viewport" content="initial-scale=1"> <link rel='stylesheet prefetch' href='https://getbootstrap.com/dist/css/bootstrap.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .navbar-nav .active a { background: rgba(0,0,0,.125) !important;
}
.tab-content { background: rgba(0,0,0,.125);
}
.rotate180 { transform: rotate(180deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Site Name</a> </div> <!-- /.navbar-header --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav" role="tablist"> <li><a href="#nav-home">Home <span class="caret"></span></a></li> <li><a href="#nav-another-page">Another Page <span class="caret"></span></a></li> <li><a href="#nav-third-page">Third Page <span class="caret"></span></a></li> </ul> </div> <!-- /.collapse .navbar-collapse --> </div> <!-- /.container-fluid --> <div class="nav-drawer"> <div class="tab-content"> <div class="tab-pane" id="nav-home"> <div class="container-fluid"> <div class="row"> <ul class="nav col-sm-2 col-xs-12"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> <ul class="nav col-sm-2 col-xs-12"> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> </ul> <ul class="nav col-sm-2 col-xs-12"> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> </ul> <ul class="nav col-sm-2 col-xs-12"> <li><a href="#">Link 10</a></li> <li><a href="#">Link 11</a></li> <li><a href="#">Link 12</a></li> </ul> <ul class="nav col-sm-2 col-xs-12"> <li><a href="#">Link 13</a></li> <li><a href="#">Link 14</a></li> <li><a href="#">Link 15</a></li> </ul> <ul class="nav col-sm-2 col-xs-12"> <li><a href="#">Link 16</a></li> <li><a href="#">Link 17</a></li> <li><a href="#">Link 18</a></li> </ul> </div> <!-- /.row --> </div> <!-- /.container-fluid --> </div> <div class="tab-pane" id="nav-another-page"> <ul class="nav"> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> </ul> </div> <div class="tab-pane" id="nav-third-page"> <ul class="nav"> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> </ul> </div> </div> <!-- /.tab-content --> </div> <!-- /.nav-drawer -->
</div> <!-- /.navbar -->
<div class="content"> <div class="container-fluid"> <h1>This content gets pushed down by the menu drawer</h1> <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p> <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p> <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p> <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p> <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://getbootstrap.com/dist/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bootstrap Responsive Menu Drawer - Script Codes CSS Codes

.navbar-nav .active a { background: rgba(0,0,0,.125) !important;
}
.tab-content { background: rgba(0,0,0,.125);
}
.rotate180 { transform: rotate(180deg);
}

Bootstrap Responsive Menu Drawer - Script Codes JS Codes

$('[role*="tablist"] a').click(function (e) { e.preventDefault(); e.stopPropagation(); if ($(this).hasClass('data-tab-open')) { $(this).removeClass('data-tab-open'); $(this).children('.caret').removeClass('rotate180'); $('.navbar-nav').find('.active').removeClass('active'); $('.nav-drawer').hide(); } else { // Remove classes from all nav elements. $('.navbar-nav').find('a').removeClass('data-tab-open'); $('.navbar-nav').find('.caret').removeClass('rotate180'); $('.navbar-nav').find('.active').removeClass('active'); // Show the drawer. if (window.matchMedia("(max-width: 767px)").matches) { $(this).parent().append($('.nav-drawer')); } else { $('.navbar').append($('.nav-drawer')); } $('.nav-drawer').show(); $(this).tab('show'); $(this).addClass('data-tab-open'); $(this).children('.caret').addClass('rotate180'); }
});
$('.nav-drawer a').click(function(e) { e.stopPropagation();
});
$('body').children().not('.navbar a').not('.nav-drawer a').not('.navbar-toggle').click(function (e){ $('.navbar-nav').find('a').removeClass('data-tab-open'); $('.navbar-nav').find('.caret').removeClass('rotate180'); $('.navbar-nav').find('.active').removeClass('active'); $('.nav-drawer').hide();
});
Bootstrap Responsive Menu Drawer - Script Codes
Bootstrap Responsive Menu Drawer - Script Codes
Home Page Home
Developer Jesse Glacken
Username jesseGlacken
Uploaded September 17, 2022
Rating 3
Size 3,777 Kb
Views 62,744
Do you need developer help for Bootstrap Responsive Menu Drawer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jesse Glacken (jesseGlacken) Script Codes
Name
Tolerance Levels for Bootstrap Progress Bar
Accessible Toggle Buttons
Flexbox fiddling with Foundation
Flexbox fiddling
Menu
Language Translation Menu
Flyout Navigation
Verbosity meter
Tags
Progressively disclosed table cells
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!