I have a sidebar implemented using bootstrap collapsible,
The menus are all in tagged my issue is when i clicked on this tagged,
the page refreshed thus re-animating the collapsible panel and it doesnt look good
I have already stored the stage of this collapsible items in a cookie to know the previous state before reloading but now its the reanimation of it collapsing is what is happening.
How to solve this?
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Create</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Featured List</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Automated List</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Option 4</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Option 5</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Option 6</a></li>
</ul>
</div>
</li>
Your question is not easy to understand, so please rephrase it if this is not the answer you were looking for.
Looking at your code though, you are duplicating IDs and both .nav-linkss have the same data-bs-target target. So that won't work.
Make each toggle target and collapse ID unique:
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Create</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Featured List</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Automated List</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic-2" aria-expanded="true" aria-controls="ui-basic-2">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic-2">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Option 4</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Option 5</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Option 6</a></li>
</ul>
</div>
</li>
Related
I have created with navbar, I haven't done much web development.
<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> <span class="navbar-toggler-icon"></span> </button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item"><a class="nav-link" href="index.html"><strong style="text-transform:uppercase">home</strong></a></li>
<li class="nav-item"><a class="nav-link" href="about.html"><strong style="text-transform:uppercase">about</strong></a></li>
<li class="nav-item"><a class="nav-link" href="flights.html"><strong>FLIGHTS</strong></a></li>
<li class="nav-item"><a class="nav-link" href="hotels.html"><strong>HOTELS</strong></a></li>
<li class="nav-item"><a class="nav-link" href="holidays.html"><strong>HOLIDAYS</strong></a></li>
<li class="nav-item "><a class="nav-link" href="property.html"><strong>PROPERTY</strong></a></li>
<li class="nav-item active"><a class="nav-link" href="car_hire.html"><strong>CAR HIRE</strong></a></li>
</ul>
</div>
</nav>
This navbar is linked to at the top of all other pages to reduce repetition of code. Can someone help me with code so when menu item clicked "active" class is added to li element. This then triggers css.
CSS:
.nav-link.active {
color: white;
}
Thank you
Here is the exact complete code for your requirement in pure JavaScript. Hope it will help
const links = document.querySelectorAll('.nav-link');
if (links.length) {
links.forEach((link) => {
link.addEventListener('click', (e) => {
links.forEach((link) => {
link.classList.remove('active');
});
e.preventDefault();
link.classList.add('active');
});
});
}
.nav-link.active {
color: white;
}
<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
<button
class="navbar-toggler ml-1"
type="button"
data-toggle="collapse"
data-target="#collapsingNavbar2"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="navbar-collapse collapse justify-content-between align-items-center w-100"
id="collapsingNavbar2"
>
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="index.html">
<strong style="text-transform: uppercase">home</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">
<strong style="text-transform: uppercase">about</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flights.html">
<strong>FLIGHTS</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="hotels.html">
<strong>HOTELS</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="holidays.html">
<strong>HOLIDAYS</strong>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="property.html">
<strong>PROPERTY</strong>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="car_hire.html">
<strong>CAR HIRE</strong>
</a>
</li>
</ul>
</div>
</nav>
Use classList and toggle
document.querySelectorAll(".nav-item").forEach((ele) =>
ele.addEventListener("click", function (event) {
event.preventDefault();
document
.querySelectorAll(".nav-item")
.forEach((ele) => ele.classList.remove("active"));
this.classList.add("active")
})
);
.active {
color: green;
}
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">home</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">about</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong>FLIGHTS</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong>HOTELS</strong></a></li>
<li class="nav-item"><a class="nav-link" ><strong>HOLIDAYS</strong></a></li>
<li class="nav-item "><a class="nav-link" ><strong>PROPERTY</strong></a></li>
<li class="nav-item active"><a class="nav-link" ><strong>CAR HIRE</strong></a></li>
</ul>
All you have to do is loop through the links, check if the current clicked link is the same as the current page, then set the active class and aria-current to that item.
Add this code to your javascript
document.querySelectorAll(".nav-link").forEach((link) => {
if (link.href === window.location.href) {
link.classList.add("active");
link.setAttribute("aria-current", "page");
}
});
Add following code in your JS:
$(".nav-item").click(function() {
$(".nav-item").removeClass("active"); // This will remove active classes from all <li> tags
$(this).addClass("active"); // This will add active class in clicked <li>
});
I want to change active link color after click.
When I'm on START link I want have START writing in another color etc.
I have few links = "#" beacuse I haven't done it yet but my code works only in these cases, f.ex: when I click "O HODOWLI" then START is in another color as earlier, but "O HODOWLI" should be.
When I click "KOCIĘTA" then this writing is in another color as it should be. So when I have "#" it works but should in all cases.
js:
$(document).ready(function () {
$("ul.navbar-nav > li").click(function (e) {
$("ul.navbar-nav > li").removeClass("active");
$(this).addClass("active");}) });
html:
<nav class="navbar navbar-expand-xl navbar-light ">
<button class="navbar-toggler small-screen-navbar" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/start"> START </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/o_hodowli"> O HODOWLI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> KOCIĘTA </a>
</li>
<li class="nav-item">
<a class="nav-link " href="#"> NASZE KOTY </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/opieka"> OPIEKA NAD KOTAMI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OPINIE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kontakt"> KONTAKT </a>
</li>
</ul>
<ul class="navbar-nav sm-icons">
<li class="nav-item"><a class="nav-link" href="https://www.facebook.com/11891824050249/">
<i class="fab fa-facebook-square icon"></i></a>
</li>
</ul>
</div>
Maybe you can try with plain js:
const links = document.querySelectorAll('.nav-link')
links.forEach(link => {
link.addEventListener('click', (e) => {
links.forEach(link => link.classList.remove('active'))
e.target.classList.add('active')
})
})
.active {
color: red;
}
<nav class="navbar navbar-expand-xl navbar-light ">
<button class="navbar-toggler small-screen-navbar" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link active" href="/start"> START </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/o_hodowli"> O HODOWLI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> KOCIĘTA </a>
</li>
<li class="nav-item">
<a class="nav-link " href="#"> NASZE KOTY </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/opieka"> OPIEKA NAD KOTAMI </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OPINIE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kontakt"> KONTAKT </a>
</li>
</ul>
<ul class="navbar-nav sm-icons">
<li class="nav-item"><a class="nav-link" href="https://www.facebook.com/11891824050249/">
<i class="fab fa-facebook-square icon"></i></a>
</li>
</ul>
</div>
I have a JQuery code that adds a nav-link dynamicly to a nav-item. The problem is this nav-link doesn't change to active when clicked. I tried to dynamicly give it the active class but it doesn't take it. it seems after the page reloads everything is rest and it's always the first nav-link that takes the active class.
It's of course wrapped inside $(document).read(). I also tried to wrap it inside $(window).load() but same problem.
$('#A').append('<li class="nav-item">' + '<a class="nav-link" href="{{dynamic_link}}?id=1" >Dynamicly Added</a>' + '</li>');
$(document).on('click', '.collapse li', function(e) {
$(this).addClass('active').siblings().removeClass('active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse mt-5 h-100 justify-content-between" id="navbarsExampleDefault">
<ul class="navbar-nav accordion" id="SideBar">
<li class="nav-item">
<a class="nav-link" href="{{index}}">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{list}}">list</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href data-toggle="collapse" data-target="#A" aria-controls="collapseOne"> A </a>
</li>
<ul class="collapse" id="A" data-parent="#SideBar">
<li class="nav-item">
<a class="nav-link" href="{{B}}">B</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{C}}">C</a>
</li>
</ul>
</div>
If you can spot the problem I'd appreciate your guidance.
Because elements that you are appending not exist when you define the the click handler better to use the delegate() method from jQuery.
$('#A').append(
'<li class="nav-item">'
+'<a class="nav-link" href="{{dynamic_link}}?id=1" >Dynamicly Added</a>'
+'</li>') ;
$('.collapse ').delegate('li','click',function(e) {
e.preventDefault();
$( this ).addClass( 'active' ).siblings().removeClass( 'active' );
});
.collapse li.active a{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse mt-5 h-100 justify-content-between" id="navbarsExampleDefault" >
<ul class="navbar-nav accordion" id="SideBar">
<li class="nav-item">
<a class="nav-link" href="{{index}}">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{list}}" >list</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href data-toggle="collapse" data-target="#A" aria-controls="collapseOne" > A </a>
</li>
<ul class="collapse" id="A" data-parent="#SideBar" >
<li class="nav-item">
<a class="nav-link" href="{{B}}" >B</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{C}}" >C</a>
</li>
</ul>
Components of navbar including some links or items, one hamburger, one vertical line, two or three glyphicons.
from these components only some items will be hidden in hamburger and the items will reveal just after clicking the hamburger.
And all of these will collapse in one button while resizing to sm.
Please help me
<div class="container">
<a class="navbar-brand" href="#"><img src="img/Prothom-alo-logo.png" alt="logo" style="width:40px;"></a>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
বাংলাদেশ
</li>
<li class="nav-item">
আন্তর্জাতিক
<li class="nav-item">
অর্থনীতি
</li>
<li class="nav-item">
মতামত
</li>
<li class="nav-item">
খেলা
</li>
<li class="nav-item">
বিনোদন
</li>
<li class="nav-item">
ছবি
</li>
<li class="nav-item">
ইপেপার
</li>
<li class="nav-item">
উত্তর আমেরিকা
</li>
</ul>
</div>
<div>
<button class="btn" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
সব
</button>
</div>
<li class="nav-item">
ছবি
</li>
<li class="nav-item">
ইপেপার
</li>
<li class="nav-item">
উত্তর আমেরিকা
</li>
<li class="nav-item">
ছবি
</li>
<li class="nav-item">
ইপেপার
</li>
<li class="nav-item">
উত্তর আমেরিকা
</li>
<div class="vl"></div>
<a class ="english" href="#">English</a>
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-thumbs-up"></span>
</div>
</nav>
links which are written after button, will be hidden in that button.
the orders menu should expand on click buts its not expanding. I ve imported all the necessary javascript files too. But if there is any specific js file for dropdown then let me know.I have used grails as my backend language.
<ul class="page-sidebar-menu page-header-fixed" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 20px">
<li class="sidebar-toggler-wrapper hide">
<!-- BEGIN SIDEBAR TOGGLER BUTTON -->
<div class="sidebar-toggler">
</div>
<!-- END SIDEBAR TOGGLER BUTTON -->
</li>
<li class="nav-item start ">
<g:link class="nav-link nav-toggle" controller="dashboard"><i class="icon-home"></i><span class="title">Dashboard</span>
<span class="arrow"></span>
</g:link>
</li>
<sec:ifAnyGranted roles="ROLE_ADMIN,ROLE_OPERATOR,ROLE_OPS_MANAGER">
<li class="nav-item">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-diamond"></i>
<span class="title">Orders</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item ">
<g:link class="nav-link" action="dashboard" controller="operations">
<span class="title">Operations Dashboard</span>
</g:link>
</li>
<li class="nav-item ">
<g:link class="nav-link" action="search" controller="order">
<span class="title">Order serach</span>
</g:link>
</li>
<li class="nav-item ">
<g:link class="nav-link" action="create" controller="order">
<span class="title">Create Order</span>
</g:link>
</li>
<li class="nav-item ">
<g:link class="nav-link" action="import" controller="order">
<span class="title">Import Orders</span>
</g:link>
</li>
<li class="nav-item ">
<g:link class="nav-link" action="viewOrders" controller="operations">
<span class="title">View Orders</span>
</g:link>
</li>
<li class="nav-item ">
<g:link class="nav-link" action="list" controller="salesReturn">
<span class="title">Returns</span>
</g:link>
</li>
<li class="nav-item ">
<g:link class="nav-link" action="list" controller="shippingManifest">
<span class="title">Manifest</span>
</g:link>
</li>
</ul>
</li>
</sec:ifAnyGranted>
</ul>