submenu in sidebar not expanding on click in metronic theme - javascript

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>

Related

prevent bootstrap collapse to re-animate when clicking an item

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>

Navbar active link color change when I have empty href only

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>

Highlight Active Menu using Jquery

I have a sidebar with few <li> elements in it. as shown below
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="/">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./overview.html">
<i class="material-icons">explore</i>
<p>Overview</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./user.html">
<i class="material-icons">person</i>
<p>User Profile</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./tables.html">
<i class="material-icons">content_paste</i>
<p>Table List</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./typography.html">
<i class="material-icons">library_books</i>
<p>Typography</p>
</a>
</li>
[
When I click on other tabs such as Overview , User Profile , i want that purple highlight to be active on that class.
How do i achieve that using jquery?
<script>
$(document).ready(function() {
$('.sidebar-wrapper a').click(function(e){
.....
});
});
</script>

Since the navigation is not client side. You should listen to document ready event; when the page loads find the link with current location and highlight it.
$(document).ready(function() {
var link = $('.nav').find('a[href=".' + window.location.pathname + '"]');
link.parent().addClass('active');
});
Also make sure you remove active class from other links :)

Try following. Firstly, remove the active class from all the li's and then apply active class to the li which is the parent of the clicked a.
Please note, just added e.preventDefault() for example here and may not be required in actual code.
$(document).ready(function() {
$('.sidebar-wrapper a').click(function(e) {
$('.sidebar-wrapper li').removeClass("active");
$(e.currentTarget).parent().addClass("active");
e.preventDefault();
});
});
.active > a {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="/">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./overview.html">
<i class="material-icons">explore</i>
<p>Overview</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./user.html">
<i class="material-icons">person</i>
<p>User Profile</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./tables.html">
<i class="material-icons">content_paste</i>
<p>Table List</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./typography.html">
<i class="material-icons">library_books</i>
<p>Typography</p>
</a>
</li>
</ul>
</div>

always visible Hamburger and to hide some of the nav items in the hamburger and some should beside it

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.

Menu having options in multiple columns on demand

I have been using CSS for multi-column view styles for mega menu. Right now the menu is showing the submenu items in multi-column but the issue I am facing is those submenu items get started in new column although there exists sufficient space in the earlier column.
i.e. For example, I have 31 submenu options and per column 12 submenu items can be listed. Hence it should display like 12 menu items in column 1, another 12 in column 2 and rest in column 3. But, due to some unknown reason. It shows only 10 sub menu items in columns 2 and rest in column 3.
You can review the same via image preview using the below link :
http://prntscr.com/oe22lu
We worked on to implement few CSS scripts to make the submenu items visible as we needed.
<div class="main-megamenu notmobile">
<ul class="navbar-nav">
<li class="nav-item dropdown" data-id="23">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/easy-servo-products" role="button">
<span class="category-name">EASY SERVO PRODUCTS</span>
</a>
<div class="catlevel-1">
<div class="dropdown-menu">
<div class="nav-items menu-options">
<div class="nav-item dropdown" data-id="24">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/easy-servo-motors" role="button">
<span class="category-name">Easy Servo Motors</span>
</a>
</div>
<div class="nav-item dropdown" data-id="40">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/2-phase" role="button">
<span class="category-name">2 Phase</span>
</a>
</div>
<div class="nav-item" data-id="42">
<a class="nav-link" href="/hybrid-stepper-motor-2">
<span class="category-name">Hybrid Stepper Motor</span>
</a>
</div>
</div>
<div class="nav-items menu-options-details">
<div class="submenu-details-wrapper" id="submenu-details-wrapper-24" style="min-height: auto;">
<div class="submenu-details" id="submenu-details-24">
<div class="nav-item dropdown catlevel-2" data-id="25">
<a class="nav-link dropdown-toggle" href="/low-vdc-input">
<span class="category-name">Low VDC Input</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-25">
<div class="nav-item" data-id="51">
<a class="nav-link" href="/2-phase-nema-14">
<span class="category-name">2 Phase NEMA 14</span>
</a>
</div>
<div class="nav-item" data-id="52">
<a class="nav-link" href="/2-phase-nema-16">
<span class="category-name">2 Phase NEMA 16</span>
</a>
</div>
<div class="nav-item" data-id="53">
<a class="nav-link" href="/vdc-or-transformer-input">
<span class="category-name">VDC or Transformer Input</span>
</a>
</div>
<div class="nav-item" data-id="54">
<a class="nav-link" href="/220230-vac-input">
<span class="category-name">220/230 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="61">
<a class="nav-link" href="/budge-stepper-drives">
<span class="category-name">Budge Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="62">
<a class="nav-link" href="/motor-extension-cables">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="27">
<a class="nav-link dropdown-toggle" href="/120-230-vac-input">
<span class="category-name">120 / 230 VAC Input</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-27">
<div class="nav-item" data-id="57">
<a class="nav-link" href="/digital-stepper-drives">
<span class="category-name">Digital Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="58">
<a class="nav-link" href="/classic-stepper-drives">
<span class="category-name">Classic Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="59">
<a class="nav-link" href="/stepper-drive-modules">
<span class="category-name">Stepper Drive Modules</span>
</a>
</div>
<div class="nav-item" data-id="60">
<a class="nav-link" href="/servo-motors-2">
<span class="category-name">Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="47">
<a class="nav-link dropdown-toggle" href="/2-phase-2">
<span class="category-name">Easy Servo Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-47">
<div class="nav-item" data-id="1056">
<a class="nav-link" href="/brushless-servo-products">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1057">
<a class="nav-link" href="/brush-servo-products">
<span class="category-name">Brush Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1058">
<a class="nav-link" href="/unregulated-switching">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
<div class="nav-item" data-id="1059">
<a class="nav-link" href="/motor-extension-cables-2">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1060">
<a class="nav-link" href="/advanced-digital-stepper-drives-2">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="48">
<a class="nav-link dropdown-toggle" href="/3-phase">
<span class="category-name">Digital Stepper Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-48">
<div class="nav-item" data-id="1061">
<a class="nav-link" href="/110120-vac-input">
<span class="category-name">110/120 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="1062">
<a class="nav-link" href="/bldc-servo-motors">
<span class="category-name">BLDC Servo Motors</span>
</a>
</div>
<div class="nav-item" data-id="1074">
<a class="nav-link" href="/unregulated-switching-4">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="49">
<a class="nav-link dropdown-toggle" href="/5-phase">
<span class="category-name">High Torque Stepper Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-49">
<div class="nav-item" data-id="1063">
<a class="nav-link" href="/motor-extension-cables-3">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1064">
<a class="nav-link" href="/unregulated-switching-2">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="50">
<a class="nav-link dropdown-toggle" href="/09">
<span class="category-name">0.9</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-50">
<div class="nav-item" data-id="1065">
<a class="nav-link" href="/brush-servo-motors">
<span class="category-name">Brush Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="55">
<a class="nav-link dropdown-toggle" href="/advanced-digital-stepper-drives">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-55">
<div class="nav-item" data-id="1066">
<a class="nav-link" href="/classic-stepper-drives-2">
<span class="category-name">Classic Stepper Drives</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="56">
<a class="nav-link dropdown-toggle" href="/integrated-easy-servo-motors">
<span class="category-name">Integrated Easy Servo Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-56">
<div class="nav-item" data-id="1067">
<a class="nav-link" href="/stepper-drives-with-oscillators">
<span class="category-name">Stepper Drives with Oscillators</span>
</a>
</div>
</div>
</div>
</div>
<div class="submenu-image" id="submenu-image-24">
<img src="../images/thumbs/000/0000233_easy-servo-motors_370.png">
</div>
</div>
<div class="submenu-details-wrapper" id="submenu-details-wrapper-40" style="min-height: auto;">
<div class="submenu-details" id="submenu-details-40" style="min-height: 217px;">
<div class="nav-item dropdown catlevel-2" data-id="41">
<a class="nav-link dropdown-toggle" href="/geared-motors-2">
<span class="category-name">Geared Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-41">
<div class="nav-item" data-id="1072">
<a class="nav-link" href="/110120-vac-input-2">
<span class="category-name">110/120 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="1073">
<a class="nav-link" href="/motor-extension-cables-4">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1075">
<a class="nav-link" href="/brush-servo-motors-2">
<span class="category-name">Brush Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item" data-id="1068">
<a class="nav-link" href="/brushless-servo-products-2">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1069">
<a class="nav-link" href="/brushless-servo-products-3">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1070">
<a class="nav-link" href="/unregulated-switching-3">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
<div class="nav-item" data-id="1071">
<a class="nav-link" href="/advanced-digital-stepper-drives-3">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item" data-id="22">
<a class="nav-link" href="/others-2">
<span class="category-name">OTHERS</span>
</a>
</li>
<li class="mobile-menu-items"></li>
</ul>
I need to show sub-menu items in multi-column vertically, such that additional column is used only if sufficient menu items exist. You can review the same via the image preview - http://prntscr.com/oe28im

Categories

Resources