How to highlight currently selected item in dropdown menu

JavaScript
1

Hi there

I am trying to make currently selected item highlighted on menu bar

this is what I have tried so far

but as you can see this is not working

2

maybe something like this:

$('.nav-menu a').click(function()
{
  $(this).closest('ul').find('.active').removeClass('active');
  $(this).addClass('active');
  });
1 Like
3

but there is one problem I am including common header using php

so although selected value get highlighted color but when I redirect to that page then Home Item get selected of obvious reason

4

That’s a different and more complicated question.

Are you linking to a specific tab from another page?

Are you selecting a tab and wanting it to be remembered when you come back?

You would probably need to set a cookie to remember which tab was selected and then when the page loads check the cookie and activate that tab.

If you are linking directly to a specific tab from another page then you will need to query the url and find out which tab should be highlighted and highlight it as required and then change the cookie to remember it.

All of which is not a simple task and beyond my skills (to do quickly and easily) I’m afraid so you will need to wait for Paul or one of the other JS experts on here.:slight_smile:

1 Like
5

As @PaulOB says, you could use a cookie to store the active element and later serve that menu with the active class set accordingly. Or if you want to do it client side, you could use the localStorage for this, like

var activeItem = localStorage.activeItem;

// The function to apply the active class
var activeHandler = function() {
  var $this = $(this);
  
  $('.active').removeClass('active');
  $this.addClass('active');
  
  // Store the index of the active li element
  localStorage.activeItem = $this.parent().index();
};

// Check if activeItem was set at some point,
// and if so, call the handler function on
// the item of that index
if (activeItem) {
  activeHandler.call($('.nav-menu li').eq(activeItem).find('a'));
}

// The event handler uses that same funtion
$('.nav-menu a').click(activeHandler);

Here’s a fiddle. Try selecting a element and rerun the fiddle; the active element will be the same.

As a pure HTML/CSS alternative you could use fragment identifiers for each item and highlight the active on with the :target pseudoclass; like

CSS

.nav-menu li:target {
  background-color: yellow;
}

HTML

<div class="nav-menu">
  <ul>
    <li id="nav-home"><a href="#nav-home" class="active">HOME</a></li>
    <li id="nav-basic"><a href="#nav-basic">BASIC INFO.</a></li>
    <li id="nav-users"><a href="#nav-users">USERS</a></li>
    <!-- etc. -->
  </ul>
</div>

I think this would be the preferable solution as the user always gets a fresh page when they visit your site, unless they explicitly go where they left via the history or some bookmark. Also it doesn’t depend on JS, obviously.

1 Like
6

@m3g4p0p

Thanks for clearfying

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.