We Keep Coding

Select current link in menu

I'm using MentisMenu for my site, and I'm trying to get the active menu selection to be set to active. I can get the Menu and submenus to activate and expand, but the actual link selected will not be marked active. Anyone?
const currentLinkParents = currentLink => {
let target = currentLink
let parent = []
while (target) {
// Get only nav-link
if (target.classList.contains('nav-item')) parent.unshift(target.querySelector('.nav-link'))
// Stop on treeview
if (target.classList.contains('treeview')) break
target = target.parentNode
}
return parent
}
const updateMenu = currentLink => {
document.querySelectorAll('#menu .active').forEach(i => i.classList.remove('active', 'show'))
for (const i of currentLinkParents(currentLink)) {
i.classList.add('active')
i.classList.contains('treeview-toggle') && i.classList.add('show')
}
}
updateMenu(document.querySelector(`#menu a[href="${window.location.pathname.split('/').pop()}"]`))
Sample HTML here:
<li class="nav-item">
<a class="nav-link has-icon treeview-toggle" href="#"><i class="material-icons">construction</i>Engineering</a>
<ul class="nav">
<li>Active Renovations</li>
<li>Maintenance Requests</li>
<li>Projects</li>
<li>Recurring Events</li>
<li class="nav-item">
Inventories
<ul class="nav">
<li>Stock Inventory</li>
<li>Master Keys</li>
</ul>
</li>
</ul>
</li>
In this example, if I select "Master Keys" then the menus Engineering and Inventories both expand and are set to active, but the Master Keys selection is not marked active.
Hope someone can help!

Turns out the following line after the call to updateMenu() fixes it:
document.querySelector(#menu a[href="${window.location.pathname.split('/').pop()}"]).classList.add('active');

To add class="current" Dynamically

I have Menu list which contains Sub-Menu as shown in the code below.
<li class="current">
<span class="icon4"></span>Subscriptions
<ul class="sub-menu">
<li>View Subscriptions
</li>
<li class="#((ViewBag.PageName == " Subscription ") ? "active " : " ")">Manage Subscription Plans
</li>
</ul>
</li>
<li class="current">
<span class="icon5"></span>Administration
<ul class="sub-menu">
<li class="#((ViewBag.PageName == " AssetPage ") ? "active " : " ")">Assets
</li>
<li>Configure Text
</li>
<li>Error Log
</li>
<li>Product Settings
</li>
</ul>
</li>
<li class="current">
<span class="icon6"></span>Promo Codes
<ul class="sub-menu">
<li>Manage Promo Code
</li>
<li>Used Promo Code
</li>
</ul>
</li>
Here Subscription,Administration,Promo Codes are Menu Lists which contains Sub-Menu Lists under them.
The thing is I want to apply class=current dynamically when a user clicks on Subscription,Administration,Promo Codes`.
And I am doing this in LayoutPage of MVC.
Any help will be appreciated.

Here you have a working solution: https://jsfiddle.net/c4h3sup9/
You have to use a little bit of Javascript for that.
You have to give the listitems a other class name like in my example "operator"
document.body.addEventListener("click", function(e){
if(e.target && e.target.className == "operator"){
var actives = document.getElementsByClassName("active");
actives[0].setAttribute("class", "operator");
e.target.setAttribute("class", "active");
}
});
for this example you need to assing one element as active from the beginning.
Note:
LI elements are never parents of UL.
The order is:
Unordered List (Plural) -> List item (Singular, Child).
You might want to correct that as it is not standard conform.

To add the class name to the parent <li> element, give the main links a class name. Assuming you also want to remove it from any <li> elements that already have it, also give them a class name
<li class="container">
<span class="icon4"></span>Subscriptions
and the script will be
$('.mainmenu').click(function() {
$('.container').removeClass('current'); // remove any previous
$(this).closest('.container').addClass('current');
});
In addition, if when you navigate to one of the views with this layout, and what to add the class name to the appropriate element, then you can give the <li> elements an id attribute
<li id="subscriptions" class="container">
....
</li>
<li id="administration" class="container">
....
and in the GET method, pass the value of the id to the view (e.g. using ViewBag
public ActionResult ConfigureText()
{
ViewBag.Menu = "administration";
....
return View(...);
}
and add a script that runs when the page first loads
var menu = '#ViewBag.Menu";
$('#' + menu).addClass('current');

How to make only previous process bar clickable using jquery

I made a process bar using jquery and it is clickable also.But i want that if i was in second process bar then it can go only on previous bar by clicking on that and will not go to the next bar when i clicked.
Please see the jquery and tell me the condition for that.
jQuery('.nav-tabs > li > a').click(function(event){
event.preventDefault();//stop browser to take action for clicked anchor
//get displaying tab content jQuery selector
var active_tab_selector = jQuery('.nav-tabs > li.active > a').attr('href');
//find actived navigation and remove 'active' css
var actived_nav = jQuery('.nav-tabs > li.active');
actived_nav.removeClass('active');
//add 'active' css into clicked navigation
jQuery(this).parents('li').addClass('active');
//hide displaying tab content
jQuery(active_tab_selector).removeClass('active');
jQuery(active_tab_selector).addClass('hide');
//show target tab content
var target_tab_selector = jQuery(this).attr('href');
jQuery(target_tab_selector).removeClass('hide');
jQuery(target_tab_selector).addClass('active');
});
Here is the html:
<div class="mesre-tab">
<ul class="nav nav-tabs">
<li class="active collar_tab">
COLLAR
</li>
<li class="cuff_tab">
CUFF
</li>
<li class="pocket_tab">
POCKET
</li>
<li class="monogram_tab">
MONOGRAM
</li>
<li class="size_tab">
SIZE
</li>
</ul>
</div>
if anyone knows it, please help me out.
Thanks

Get current URL and find nav items matching part of it, then show submenu

I have a navigation menu which has submenus hidden by default. I want to display the submenu of the nav item that matches the current location, if I am on a page other than the home page.
I can find out the current pathname:
var currentUrl = (window.location.pathname);
I know how to scan href parameters:
$('ul.see li a[href^="/' + location.pathname.split("/")[1] + '"]');
to get the submenu first directory.
How can I navigate through the nav items and add a class to a parent li item?
My menu markup is as follows:
<ul id="mainNavigation">
<li class="hasKids">About
<ul>
<li>The Salon
</li>
<li>Our Story
</li>
<li>Joe Mills
</li>
<li>Stylists
</li>
<li>Products
</li>
</ul>
</li>
<li class="hasKids">Services
<ul >
<li>Colour
</li>
<li>Cutting & Styling
</li>
<li>Waving & Straightening
</li>
<li>Treatments
</li>
</ul>
</li>
So as you see if I am /services/colour, I would like to show the services submenu.

Q: How can I navigate through the nav items and add a class to a parent li item?
Assuming you are AT your anchor tag with:
var $a = $('ul.see li a[href^="/' + location.pathname.split("/")[1] + '"]');
Then, you can use the .closest() method to get to the closest LI
$a.closest('li')
Then, add the class you desire...and then navigate up to it's .closest('ul') if you need to add a class there, etc.

Automatic disabling the menu items

I have a menu bar in my home page, when i click on the menu item it will display the list in that menu. until i press some where else in the home page the menu list will be remains same.
when i press some position in the page then only the drop down menu list going away.
i want to make the list disappear as soon as i press on list of menu item. how can i do that.
i really appreciate your time.
thanks in advance.
i tried this:
<li class="menu">Initialization
<ul class="links">
<%--<li>Refresh</li>--%>
<li> Programme Management</li>
<li>Subject Database</li>
<li>Faculty Database</li>
<%--<li>Load Curriculum</li>
<li>Add Subject</li>
<li>Add Faculty</li>
<li>Delete Subject</li>
<li>Delete Faculty</li>--%>
<li>Ph.D electives</li>
<li>Grade Formula</li>
</ul>
</li>
Edited :
JS:
window.addEvent('domready', function(){
$('drop_down_menu').getElements('li.menu').each( function( elem ){
var list = elem.getElement('ul.links');
var myFx = new Fx.Slide(list).hide();
elem.addEvents({
'mouseenter' : function(){
myFx.cancel();
myFx.slideIn();
},
'mouseleave' : function(){
myFx.cancel();
myFx.slideOut();
}
});
})
});