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

Creating customized placeholders using CSS padding in HTML5

Choose all the alternative A radio buttons utilizing JavaScript

Baffling Visibility Issue: iframe's Transparency Lost in Chrome and IE, Only Visible in Firefox

When you open the responsive navigation bar, it automatically closes

Unleashing the power of ::ng-deep to access CSS in an Angular child component

Tips on transitioning from Modal1 to Modal2 in Ionic after a successful submit button press?

updating a list on the fly with jquery

Methods for anchoring an element at the bottom of a square container div

Exploration of jQuery Dropdown Menus

Unable to save the ID of an element into a jQuery variable

Extracting the number of likes from each post on a specific profile using Python scrapy

LiveValidation plugin causing issue with removing dynamically inserted elements

Understanding the positioning of HTML elements using CSS

Fade images using jQuery when hovered over

Adaptable website design featuring dynamic data grid

Perform a jQuery AJAX GET request while passing the current session information

A Step-by-Step Guide to Setting Up a Scoreboard for Your Rock Paper Scissors Game

Challenge with Filter Functionality when Activating Button

Tips for emphasizing the current element without disrupting existing styles

Discovering the magic of activating a JavaScript function on jQuery hover