Showing identification on the drop-down list

Question

Showing identification on the drop-down list

Within my dropdown menu setup, I am aiming to achieve a specific functionality. When the user clicks on sub menu, I want the title of sub menu to display in the Menu space as illustrated below.

What steps can be taken to accomplish this?

UPDATE: After further consideration, it seems that my initial explanation was not clear enough.

Let's say, for instance, a user selects the Sub Menu 2 option, they will then be directed to a corresponding page.

This particular Sub Menu 2 page will have a designated url of sub_menu_2. For example, the URL of the page may be something like .com/sub_menu_2

When users navigate to the sub menu 2 page, I would like the menu title to reflect 'sub menu 2' accordingly.

I apologize for any confusion caused earlier.

jquery css

Answer 1

Answer №1

Check out a potential fix here: https://jsfiddle.net/mboz45fv/3/

To enhance your main and sub menus, assign classes with the following values:

<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())
});

UPDATE: To revert back to the 'Menu' text when the control is not in focus, follow this method:https://jsfiddle.net/mboz45fv/9/

Answer 2

Check out a potential fix here: https://jsfiddle.net/mboz45fv/3/

To enhance your main and sub menus, assign classes with the following values:

<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())
});

UPDATE: To revert back to the 'Menu' text when the control is not in focus, follow this method:https://jsfiddle.net/mboz45fv/9/

Answer 3

Answer №2

Keeping the HTML as is:

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

FIDDLE: https://jsfiddle.net/uniqueuser123/z8fk37tb/9/

Answer 4

Keeping the HTML as is:

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

FIDDLE: https://jsfiddle.net/uniqueuser123/z8fk37tb/9/

Showing identification on the drop-down list

Answer №1

Answer №2

Similar questions

Cookies are strangely absent from the ajax call to the web api - a puzzling issue indeed for Web Api users

Exploring the Spotify API with jQuery/ajax to fetch details about songs, artists, and albums

I am experiencing difficulties with my custom font not functioning properly

Challenges with displaying css/bootstrap classes within angular2

The submitHandler constantly refreshes the webpage

How can I extract a substring from a URL and then save it to the clipboard?

Retrieve the link of a nearby element

Having trouble with this code// Does anyone know how to make the div slide in line with other divs when hovering over it?

Load the identical page using jQuery and insert it into a specified <div> element

Generating an Xpath for the selected element with the help of Javascript or Jquery - here's how!

What is the best way to align all menu items horizontally with the logo?

Issue with codeigniter and jquery login functionality not triggering/responding

Tips for using various versions of jQuery at the same time

What sets apart the two syntaxes for JavaScript closures?

Can you explain the meaning of this compound CSS selector?

Performing a validation on data fetched using a .load() function

Discover the path with the power of JavaScript

In IE8, submitting an Ajax request almost always results in an error being

Unexpected issue encountered during ajax request to an API

using jquery to fill in fields in a table form