Bootstrap 4 Tabs inside drop-down menu - javascript

I am using boostrap 4 drop down menu with tabs inside. Here is the codepin
I found this link useful to stop click event propagation so that the drop down menu does not close on click inside itAvoid dropdown menu close on click inside
But clicking on tabs does not work.
code pin:boostrap 4 tabs inside drop down menu
is there any solution or another approach so that tabs work inside drop down menu
HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
</button>
<div id="navbarNavDropdown" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">
Home
<span class="sr-only">
(current)
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdownMenuLink" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<div class="container">
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="tab-A" class="nav-link active" role="tab" href="#pane-A" data-toggle="tab">
–A–
</a>
</li>
<li class="nav-item">
<a id="tab-B" class="nav-link" role="tab" href="#pane-B" data-toggle="tab">
–B–
</a>
</li>
<li class="nav-item">
<a id="tab-C" class="nav-link" role="tab" href="#pane-C" data-toggle="tab">
–C–
</a>
</li>
</ul>
<div id="content" class="tab-content" role="tablist">
<div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
<div id="heading-A" class="card-header" role="tab">
<h5 class="mb-0">
<a href="#collapse-A" data-toggle="collapse" data-parent="#content" aria-expanded="true" aria-controls="collapse-A">
Collapsible Group Item A
</a>
</h5>
</div>
<div id="collapse-A" class="collapse show" role="tabpanel" aria-labelledby="heading-A">
<div class="card-body">
[Tab content A]
</div>
</div>
</div>
<div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
<div id="heading-B" class="card-header" role="tab">
<h5 class="mb-0">
<a class="collapsed" href="#collapse-B" data-toggle="collapse" data-parent="#content" aria-expanded="false" aria-controls="collapse-B">
Collapsible Group Item B
</a>
</h5>
</div>
<div id="collapse-B" class="collapse" role="tabpanel" aria-labelledby="heading-B">
<div class="card-body">
[Tab content B]
</div>
</div>
</div>
<div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
<div id="heading-C" class="card-header" role="tab">
<h5 class="mb-0">
<a class="collapsed" href="#collapse-C" data-toggle="collapse" data-parent="#content" aria-expanded="false" aria-controls="collapse-C">
Collapsible Group Item C
</a>
</h5>
</div>
<div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C">
<div class="card-body">
[Tab content C]
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
JS
$('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });
Is there possible solution ?

The simplest way is to wrap it inside a form since the form will prevent the Dropdown from closing on click...
<nav>
...
<li class="nav-item dropdown">
<form>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
....
</div>
</form>
</li>
...
</nav>
https://www.codeply.com/go/GzekeuWnSg
The other method is using jQuery to like this:
$('.dropdown-menu .nav-tabs .nav-link').on("click.bs.dropdown", function (e) {
$(this).tab('show');
e.stopPropagation();
});
https://www.codeply.com/go/iEDxVGTzAZ

Related

Collapsed navbar push elements outside of parent container when shown (Bootstrap 5)

Intro
I'm using Bootstrap 5 (bundled with webpack 5), with his grid system and the collapse function to create the home page to this site, that has 2 sidebars that collapse into a topbar.
When we get to a mobile format the navs collapse and the columns containing them stack up leaving the 3rd col with the logo at the bottom without overflowing the parent.
Look at my 100% accurate ms paint graphics to understand better
Issue
When we show the collapsed navs, the columns containing them push the 3rd col with the logo out of the row and the container-fluid containing it.
Question
How can i make the navs expanding without pushing the logo? (to clarify the logo needs to stay below the navs
ms paint 100% accurate graphics
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 order-0 my-auto">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand brand d-lg-none" href="#"
><b>ENV</b>Productions</a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul
class="navbar-nav flex-column justify-content-between text-center text-lg-start"
>
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">SEVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-lg-10 order-lg-1 order-last my-auto text-center">
<a class="navbar-brand brand d-none d-lg-block" href="#"
><b>ENV</b>Productions</a
>
<img
src="assets/img/BG_ENV_MONO-800px.png"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-1 order-lg-2 my-auto">
<nav class="navbar navbar-expand-lg">
<div
class="collapse navbar-collapse justify-content-end"
id="navbarResponsive"
>
<ul
class="navbar-nav flex-row flex-lg-column justify-content-around justify-content-lg-between"
>
<li class="nav-item text-center">
<a
href="https://www.instagram.com/env.productions/?hl=it"
target="”_blank”"
><i class="fa fa-instagram fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.youtube.com/channel/UCIloBELeZR4x8jmrhIQXQCw/featured"
target="”_blank”"
><i class="fa fa-youtube-play fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.facebook.com/env.productions/"
target="”_blank”"
><i class="fa fa-facebook-f fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.linkedin.com/company/env-productions/"
target="”_blank”"
><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i
></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
I solved this by making the logo a background-image and merging the collapsible elements under the same parent with js.
There's probably a better solution though and maybe one that let you have the image at a block/inline level.

How can I create a reusable navbar across multiple HTML pages with Bootstrap 5?

I would prefer a strictly JavaScript way of doing this if possible. Not really wanting to introduce a JavaScript framework into my project.
Layout:
./index.html
./about.html
./crew.html
./flights.html
./events.html
I want every page to have the same navbar such that I don't have to repeat myself and fix every page every time the order of the links change.
Here's my example navbar:
<nav class="navbar navbar-expand-xl navbar-light">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="true" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse show" id="toggleMobileMenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="crew.html">Crew</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="flights.html">Flights</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
</nav>
Depending on what kind of browser support you need you could use a template literal (back ticks) to define your navigation. Then use insertAdjacentHTML to place it where you need it on all your html pages. If your page is fairly simple you could just insert the nav after begin on the body tag.
const navigation = `
<nav class="navbar navbar-expand-xl navbar-light">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#toggleMobileMenu"
aria-controls="toggleMobileMenu"
aria-expanded="true"
aria-label="Toggle Navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse show" id="toggleMobileMenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="crew.html">Crew</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="flights.html">Flights</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
</nav>
`
document.getElementById("nav-container").insertAdjacentHTML('afterbegin', navigation);
<div id="nav-container"></div>

Bootstrap 5 Dropdown & Navs: Cannot read property 'children' of null

I get this Dev Console error message "Cannot read property 'children of null" while I'm trying to use a dropdown button with Nav Tabs in Navbar Component.
when I click on the dropdown item to display nav-link in navbar I get this Dev Console error message "Cannot read property 'children of null"
Live Example: https://codepen.io/themes4all/pen/bGWjMzZ
HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col">
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu" aria-labelledby="dropdownEx">
<li>
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active" data-bs-toggle="tab" data-bs-target="#nav-example-1" aria-controls="nav-example-1" aria-selected="true">
Example 01
</button>
</li>
<li>
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item" data-bs-toggle="tab" data-bs-target="#nav-example-2" aria-controls="nav-example-2" aria-selected="false">
Example 02
</button>
</li>
</ul>
</div>
</div>
<div class="col">
<div class="tab-content">
<div role="tabpanel" id="nav-example-1" class="tab-pane fade show active" aria-labelledby="nav-example-1-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 01
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"></ul>
</li>
</ul>
</div>
<div role="tabpanel" id="nav-example-2" class="tab-pane fade" aria-labelledby="nav-example-2-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 02
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2"></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Tabs (data-bs-toggle="tab") should be contained inside a nav nav-tabs...
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col">
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu nav nav-tabs" aria-labelledby="dropdownEx">
<li class="dropdown-item p-0">
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active" data-bs-toggle="tab" data-bs-target="#nav-example-1" aria-controls="nav-example-1" aria-selected="true"> Example 01 </button>
</li>
<li class="dropdown-item p-0">
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item" data-bs-toggle="tab" data-bs-target="#nav-example-2" aria-controls="nav-example-2" aria-selected="false"> Example 02 </button>
</li>
</ul>
</div>
</div>
<div class="col">
<div class="tab-content">
<div role="tabpanel" id="nav-example-1" class="tab-pane fade show active" aria-labelledby="nav-example-1-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 01
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"></ul>
</li>
</ul>
</div>
<div role="tabpanel" id="nav-example-2" class="tab-pane fade" aria-labelledby="nav-example-2-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 02
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2"></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Demo
Caveat: This is not the intended use of Bootstrap Tabs and Dropdowns. Dropdowns aren't designed used to toggle Tabs, and Tabs aren't meant to be used in the Navbar.
This doesn't describe why it's happening, but if you would like a solution.
Remove some of the attributes associated with the dropdown list item buttons (see below for example). Depending on what you want to do, you can either set up JavaScript event listeners for those buttons. Or you can change the buttons to anchor tags and navigate to a different page.
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu" aria-labelledby="dropdownEx">
<li>
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active">
Example 01
</button>
</li>
<li>
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item">
Example 02
</button>
</li>
</ul>
</div>
"Leaf" menu items like Example 1 and Example 2 should not contain data-bs-toggle="dropdown"

How to find multiple div ID in JavaScript code

I'm creating a dropdown accordion style in bootstrap 4 and found this useful solution using JavaScript in stack overflow (Twitter Bootstrap: How to create a dropdown button with an accordion inside it?). I modified the script to suit my website navigation style but I got stuck on how to make the JavaScript find not only ID: accordion but also ID: accordion1 and so on. Thus, when I navigate out of the menu, the accordion that open will automatically hide. Currently, the script can only hide the first panel which is ID: accordion. For this project, I can't use form tag as described in Bootstrap 4: How to create a dropdown menu with an accordion inside it?. Sample in Bootply
Also, how do I make the accordion panels open in multiples.
<div class="collapse navbar-collapse " id="navbarContent">
<ul class="navbar-nav">
<li class="nav-item dropdown dropdown-accordion " data-accordion="#accordion">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ONBOARDING
</a>
<div class="dropdown-menu ">
<div class="accordion" id="accordion">
<div>
<a class="nav-link" href="#" target="_blank">
Item 01
</a>
</div>
<div>
<a class="nav-link" data-toggle="collapse" role="button" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Item 02
</a>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
<div> <a class="nav-link" href="#" target="_blank">
Item 02A</a>
</div>
<div> <a class="nav-link" href="#" target="_blank">
Item 02B
</a></div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown dropdown-accordion " data-accordion="#accordion">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
OFFBOARDING
</a>
<div class="dropdown-menu ">
<div class="accordion" id="accordion1">
<div>
<a class="nav-link" href="#" target="_blank">
Item 01
</a>
</div>
<div>
<a class="nav-link" data-toggle="collapse" role="button" data-parent="#accordion1" href="#collapsetwo" aria-expanded="true" aria-controls="collapsetwo">
Item 02
</a>
<div id="collapsetwo" class="collapse px-3" aria-labelledby="headingOne">
<div> <a class="nav-link" href="#" target="_blank">
Item 02A
</a></div>
<div> <a class="nav-link" href="#" target="_blank">
Item 02B
</a></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<script>
$('.dropdown-accordion').on('show.bs.dropdown', function(event) {
var accordion = $(this).find($(this).data('accordion'));
accordion.find('.show').collapse('hide');
});
$('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function(event) {
event.preventDefault();
event.stopPropagation();
$($(this).data('parent')).find('.collapse.show').collapse('hide');
$($(this).attr('href')).collapse('show');
})
</script>
According to your script, you really are just hiding the div with id='accordion'. If you want to hide them all, you have to know the nr of accordions you have, and iterate through all of them.
<script>
$('.dropdown-accordion').on('show.bs.dropdown', function(event) {
for(var i = 0; i < nrAccordions; i++)
{
var accordion = $(this).find($(this).data('accordion'+i));
accordion.find('.show').collapse('hide');
}
});
</script>

Onscroll navbar not working properly. In mobile device when clicked on hamburger menu it will goes upward

<nav id="mynav" class="navbar navbar-expand-lg navbar-light sticky-top">
<div id="mainnav" class="container-fluid" >
<a class="navbar-brand pt-0 pb-0" href="index.html">
<img src="./assets/pranav logo1 (1).png" class="img-fluid d-inline-block align-top logo" alt="" loading="lazy">
</a>
<button class="navbar-toggler mr-5" id="mynavbtn" 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>
<div class="collapse navbar-collapse mob" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link js-scroll-trigger" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="services.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item js-scroll-trigger" href="services.html">Web Designing</a>
<a class="dropdown-item js-scroll-trigger" href="services.html">Software Development</a>
<a class="dropdown-item js-scroll-trigger" href="services.html">Digital Marketing</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact-us.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
$(document).ready(function(){
var backScroll =window.pageYOffset;
window.onscroll = function (){
var currentScroll = window.pageYOffset;
if(backScroll >currentScroll) {
document.getElementById("mynav").style.top="0";
}else{
document.getElementById("mynav").style.top="-100px";
}
backScroll = currentScroll;
}
});
(Wrong Output)The navbar is hidden (top:-100px)
Expected Output
On desktop code works properly when downward scroll is detected navbar is hidden (top:100px) and when upward scroll is detected navbar will be display but In mobile device When I clicked on hamburger menu it collapse but also hiding logo and hamberger section.
I uploaded please you will get it.

Categories