CODEWITHSUNDEEP
jquerycss
Steve Kim
Steve Kim

Reputation: 5601

Displaying ID on dropdown menu

So, I have the following set up of a dropdown menu:

https://jsfiddle.net/mboz45fv/10/

What I am trying to achieve is that, when sub menu is clicked, I want to display the title of sub menu in the Menu space as shown below.

enter image description here

How can I achieve this?

EDIT: So, I realized that I was not clear enough.

Let say, an user clicks Sub Menu 2 button, then the user will be directed to that page.

This sub menu 2 page will have url of sub_menu_2. For example, the page url will be .com/sub_menu_2

I want the menu title to be sub menu 2 when the users are in the sub menu 2 page.

Sorry for the confusion.

Upvotes: 0

Views: 43

Answers (2)

JGV
JGV

Reputation: 5187

Here is a possible solution: https://jsfiddle.net/mboz45fv/3/

Add a class to your main as well as sub menu's and set the value as shown below,

<h1>Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>

  <li><a class="main-menu" href="#">Menu</a>
    <ul>
      <li><a class="sub-menu" id="a" href="#">Sub Menu 1</a></li>
      <li><a class="sub-menu" id="d" href="#">Sub Menu 2</a></li>
      <li><a class="sub-menu" id="c" href="#">Sub Menu 3</a></li>
    </ul>
  </li> 
</ul>
</nav>

$('.sub-menu').on('click', function(){
    $('.main-menu').text($(this).text())
});

EDIT: If you want the 'Menu' text back when the user is not focusing on the control, here is the solution:https://jsfiddle.net/mboz45fv/9/

Upvotes: 1

lmgonzalves
lmgonzalves

Reputation: 6588

Without changing HTML:

$(document).ready(function() {
    $('ul li ul li a').click(function(e){
        $('#primary_nav_wrap > ul > li > a').text($(this).text());
    });
});

FIDDLE: https://jsfiddle.net/lmgonzalves/mboz45fv/7/

Upvotes: 0

Related Questions