Show links in the sidebar menu when the primary navigation links are hovered over

I am trying to create a dynamic side menu that displays different links depending on which link is hovered over in the top navigation bar. Here is what I have so far:

HTML:

<ul class="nav navbar-nav">
  <li class="nav"><a class="toggle" href="#">LINK 1</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 2</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 3</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 4</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 5</a></li>
  <li class="nav"><a class="toggle" href="#">LINK 6</a></li>
</ul>

<div class="sideMenu">
    <div id="sideMenuLinks">
        <ul id="menuContent" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
          <li><a href="#">SM LINK 3</a></li>  
          <li><a href="#">SM LINK 4</a></li>
          <li><a href="#">SM LINK 5</a></li>
          <li><a href="#">SM LINK 6</a></li>
        </ul>
     </div>
</div>

jQuery:

$(document).ready(function() {
    $('.toggle').hover(function () {
        $('#sideMenuLinks').show('slow');
    });
});

Although this code successfully displays the side menu when a link is hovered over, I would like the side menu to dynamically change based on the specific link that is hovered over. For example, if "LINK 2" is hovered over, I want the side menu to display a different set of links. Is there a way to achieve this functionality?

Thank you!

javascriptjqueryhtmlcss

Answer №1

A suggestion would be to enhance the main navigation links by adding a custom data-* attribute. Here's how it can be implemented:

<ul class="nav navbar-nav">
  <li class="nav"><a class="toggle" data-menu="first" href="#">LINK 1</a></li>
  <li class="nav"><a class="toggle" data-menu="second" href="#">LINK 2</a></li>
  <li class="nav"><a class="toggle" data-menu="third" href="#">LINK 3</a></li>
</ul>

<div class="sideMenu">
    <div id="sideMenuLinks">
        <ul id="first" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
        </ul>
        <ul id="second" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
        </ul>
        <ul id="third" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
        </ul>
     </div>
</div>

Subsequently, the value of the data-menu attribute can be obtained on hover, which could create a more dynamic menu experience:

$(".toggle").hover(function() {
    $(".menuContent").each(function() {
        $(this).hide();
    });
    var menu = $(this).attr("data-menu");
    $('#' + menu).show('slow');
});

This method has not undergone testing yet, but it has the potential to add a level of dynamism to the menus.

Answer №2

It seems like you have multiple IDs that you only want to display when a specific link is hovered over on the page.

One way to achieve this is by enhancing the existing HTML structure. Consider the following example:

<ul class="nav navbar-nav">
    <li class="nav"><a class="toggle1" href="#">LINK 1</a></li>
    <li class="nav"><a class="toggle2" href="#">LINK 2</a></li>
    <li class="nav"><a class="toggle3" href="#">LINK 3</a></li>
</ul>

<div class="sideMenu">
    <div id="sideMenuLinks1">
        <ul id="menuContent" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
          <li><a href="#">SM LINK 3</a></li>  
          <li><a href="#">SM LINK 4</a></li>
          <li><a href="#">SM LINK 5</a></li>
          <li><a href="#">SM LINK 6</a></li>
        </ul>
    </div>
<div id="sideMenuLinks2">
        <ul id="menuContent" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
          <li><a href="#">SM LINK 3</a></li>  
          <li><a href="#">SM LINK 4</a></li>
          <li><a href="#">SM LINK 5</a></li>
          <li><a href="#">SM LINK 6</a></li>
        </ul>
    </div>
<div id="sideMenuLinks3">
        <ul id="menuContent" class="menuContent collapse out">
          <li><a href="#">SM LINK 1</a></li>
          <li><a href="#">SM LINK 2</a></li>
          <li><a href="#">SM LINK 3</a></li>  
          <li><a href="#">SM LINK 4</a></li>
          <li><a href="#">SM LINK 5</a></li>
          <li><a href="#">SM LINK 6</a></li>
        </ul>
    </div>
</div>

To implement this functionality, you can utilize a simple for loop along with the existing jQuery code you have. Here's an example of how you can achieve this:

$(document).ready(function() {
    for(i=0,i<3,i++){
        classname = '.toggle'+i;
        id = '#sideMenuLinks'+i;
        $(classname).hover(function () {
             $(id).show('slow');
        });
    }
});

While this solution has not been tested, it offers a straightforward and effective approach. I hope this information proves helpful to you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for swapping images as a webpage is scrolled [using HTML and JavaScript]

Hi there, I am looking to make some changes to a JavaScript code that will switch out a fixed image depending on the user's scrolling behavior. For example, when the page loads, the image should be displayed on the right side. As the user scrolls down ...

javascripthtml

Choose class based on the retrieved information

Good morning, I am working on dynamically setting the class of a td element based on data fetched from a database to reflect any changes or updates. One of the fields returned has four possible options, and I need to modify the CSS class of that field acc ...

jquerycssajax

Exploring the potential of utilizing the "wait" function in Selenium WebDriver for

I want to automate a test on my website using the Selenium WebDriver for JavaScript. How can I approach running tests here with content that may not be ready when the page loads, such as data coming from an external API? In my case, the content is loaded ...

javascripthtmlseleniumselenium-webdriverauth0

Issue with transition effect not functioning properly when hovering in HTML and CSS

Is there a way to achieve a slow smooth transition when hovering over the .bg-gradient element and have the same effect when removing the cursor? Currently, the transition happens quickly on hover. .asc { height: 500px; background-position: 50%; ...

htmlcssbackgroundhovercss-transitions

Comprehending the concept of error and data callbacks in functions

I'm feeling a bit puzzled about how the function(err, data) callback operates. Is the first argument always designated to handle errors? And what happens with the rest of the arguments in a scenario like function(x, y, z, a, b, c)? How exactly does ...

javascriptnode.jsasynchronouscallback

Obtaining JSON data using Jquery results in the output of "undefined"

I am struggling to extract the correct values from a JSON document in order to display schedules in list view. Currently, when accessing the JSON document, I keep receiving "undefined" as the result. Below is an example of the JSON document: { "Ferries": ...

jqueryhtmljson

Float a div within text to be positioned vertically

Is there a way to use only CSS to create an article that includes a featured quote section starting around 50px from the top? The section should be half the width of the page with text wrapping around it at the top and bottom. Currently, I am using the fl ...

htmlcsscss-float

Using a query string inside an <iframe> tag

I've been attempting to access a query string within an <iframe>, but all my attempts have failed. Whenever I run the script, I receive the following error message: Notice: Trying to get property of non-object in C:\Program Files (x86).. ...

phphtmliframe

Build a photo carousel similar to a YouTube channel

Is there a way to create an image slider similar to the one on YouTube channels? I've noticed that when there are multiple videos on a channel, YouTube displays them in a slider with back and forth buttons to navigate through the videos that aren&apos ...

javascriptjquerycssimageslider

Creating a unique tab spacing effect using HTML and CSS

I'm currently working on my personal website and I'm looking to create a tab-like effect (similar to word processors) for showcasing projects along with their descriptions. Here's an example layout: ReallyLong NameProject Project1 Descr ...

htmlcssformatting

Strange Safari 15 bug causing unexpected transformations

Hey there, I'm a div with animation on scroll using GSAP. On Safari 15 (no issues below 15), something strange is happening - parts of the letters are leaving an afterimage on the sides. The code snippet I am using for this animation is: this.$refs.l ...

csssafaritransformgsap

variations in menu functionality on firefox

Could you please take a look at the links below? It appears that there may be an issue with FireFox. The green top menu seems to be displaying incorrectly. In Chrome/IE, it appears in one line, but in FF, the last two links are on the second line despite s ...

htmlcss

The cart icon is not visible in the responsive mode

There seems to be an issue with my cart icon not displaying in the navbar toggle when the display size is reduced. I am currently using Bootstrap 5 for the navbar. I can navigate to the cart page by clicking on the toggler, but the icon itself is not visi ...

htmlcssbootstrap-5

Do you think there might be an issue with the CSS coding?

I have designed a user-friendly responsive login form that allows users to easily log in and reset their passwords. However, I am facing an issue where the username and password fields are not displaying on separate lines as intended. I have thoroughly ins ...

htmlcssforms

Uploading with Javascript CORS consistently ends with an error event occurring

My current challenge is uploading a file to a server using JavaScript in compliance with the CORS specification. While there are numerous examples available online that successfully upload the file, I encounter an error as the final event being fired. Up ...

javascriptajaxxmlhttprequestcors

How can you create an ordered list with letters and parentheses using HTML5 and CSS?

Is it possible to use letters with ")" instead of "." in an ordered list format? For example: a) Some text... b) Some text... c) Some text... Currently, I am seeing: a.) Some text... b.) Some text... c.) Some text... I need to remove the periods. CSS: ...

csshtmlhtml-lists

Use Python to fetch a file from a webpage without having to actually open the webpage

I needed a method to automate the download of a file from a particular website without having to manually open the website. Everything should be done in the background. The website in question is Morningstar, and a specific example link is: . On this page ...

javascriptpythonhtmlseleniumweb

Ways to set the minimum width of a div depending on its contents

As I work on my website, I encountered an issue with a div containing a table. The div expands to full width, but when I resize the screen, it shrinks causing the content to overlap. I am looking for a solution where the minimum width of the div adjusts b ...

javascriptjqueryhtmlcss

Gatsby: A guide on inserting unadulterated HTML within the head section

Is it possible to insert raw HTML into the <head></head> section of every page in a Gatsby.js project? I need to add a string of HTML for tracking purposes, including inline and external script tags, link tags, and meta tags. For example, here ...

javascripthtmlreactjsgatsbytracking

The load() function in jQuery's ajax call seems to have trouble executing scripts

I have been searching for different methods, but most of them involve taking script codes to another page and calling them. However, I prefer to reload dynamically. Is there a way to write this in the AJAX code? success: function(response) { $("butt ...

jqueryajaxreload