Switching between a secondary menu using ClassieJS or jQuery?

Currently, the code is configured to toggle the same menu for every icon.

To see my current progress, you can check out this fiddle: http://jsfiddle.net/2Lyttauv/

My goal is to have a unique menu for each individual icon.

I began by creating the following HTML:

<nav class="slider-menu slider-menu-vertical slider-menu-left" id="slider-menu-s1">
            <h3>MENU</h3>
     <a href="#"><span class="icon-flag"></span>Item 1</a>
     <a href="#"><span class="icon-flag"></span>Item 2</a>
            <a href="#"><span class="icon-flag"></span>Item 3</a>
            <a href="#"><span class="icon-flag"></span>Item 4</a>
            <a href="#"><span class="icon-flag"></span>Item 5</a>
      <a href="#"><span class="icon-flag"></span>Item 6</a>
      <a href="#"><span class="icon-flag"></span>Item 7</a>
        </nav>

Next, I want to add a second menu to

navItem2

the second icon in the sidebar

I attempted creating a second menu using identical HTML as above but with a different id="slider-menu-s1 and tried implementing a separate function, however, it did not seem to work.

If anyone could offer assistance or guide me in the right direction, it would be greatly appreciated.

javascriptjqueryhtmlcssclassiejs

Answer №1

I would like to share something I worked on recently.

<nav class="slider-menu slider-menu-vertical slider-menu-left" id="slider-menu-s2">
    <h3>Exploring a New Menu</h3>
    <a href="#"><span class="icon-flag"></span>Item 1</a>
</nav>

In my code, you will find an ID assigned as slider-menu-s2, which is utilized in the toggle function for navItemClick.

        var newMenu = document.getElementById( 'slider-menu-s2' );

        navItem2.onclick = function() {
            classie.toggle( this, 'active' );
            classie.removeClass( menuLeft, 'slider-menu-open' ); //removing other menu
            classie.toggle( newMenu, 'slider-menu-open' );
            disableOther( 'navItem2' );
        };

I hope this provides clarity on the matter.

You can also view the implementation on jsfiddle: http://jsfiddle.net/2Lyttauv/20/

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

Postpone the processing of a message in the Service Bus Queue until a specific time using NodeJS

Despite trying multiple tutorials, I have been unable to achieve the desired result so far. Currently, my setup involves a nodejs app that sends messages to the Service Bus Queue and another nodejs app that continuously polls it. The goal is to schedule a ...

javascriptnode.jsazure

Troubleshooting: ngAnimate max-height failing to apply to specific element

Having integrated ngAnimate into a project to enhance animations, I've encountered some unusual behavior with a specific element. Let me provide some context: our website features a shop with categories and products within those categories. I am usin ...

javascripthtmlcssangularjs

Pagination in jQuery EasyUI datagrid does not function properly when using the appendRow method

I have been using the jeasyui datagrid with pagination for a while now, but I recently came across a requirement where I need to add data from a form upon clicking the "Add Data" button. Everything is working perfectly fine, except that the pagination is n ...

jquerydatagridpaginationjquery-easyui

How does Python interpret arrays from JavaScript?

As part of my API setup, I am sending parameters to a python script. One of these parameters happens to be a JavaScript array. Interestingly, when I check the array in Python, it only shows the first index. Here is the snippet of my Angular JS get request ...

javascriptarrays

Update the second dropdown menu depending on the selection made in the first dropdown menu

While I know this question has been posed previously, I'm struggling to apply it to my current situation. In my MySQL database, I have a table named "subject" that includes columns for subject name and subject level. Here's an example: Subject ...

javascriptphp

Mastering the Material-UI Grid in SPAs: Conquering the Negative Margin Dilemma

While attempting to build a single page application (SPA), I've encountered an issue with using the Grid component from material-ui. Normally, I rely heavily on the Grid, but in this new project, something seems amiss. The current problem is evident ...

javascriptcssreactjsmaterial-ui

The OOP functionality in Three.JS seems to be malfunctioning, as certain elements are not being properly accessed and displayed

I've run into some issues while trying to implement OOP in my Three.js project. The original script displays three y-rotational planes, but it seems like some objects I've created aren't being called when I check the console. Can someone ple ...

javascriptoopthree.js

Use the slide bar to adjust the Angular filter value

I am diving into my very first AngularJS project and I must admit, I have zero experience with Angular. On my HTML page, I have implemented a slider bar with two handles to set a minimum and maximum value. Here is the snippet of code where this functionali ...

javascriptangularjsfilter

Is NodeJS primarily used as a socket library for network communication?

Here is a server program written in C language using socket functionality provided by libC # include <unistd.h> # include <sys/socket.h> # include <sys/types.h> # include <string.h> #include <netinet/in.h> main(){ int listfd ...

javascriptcnode.jssockets

Is "Invalid Date" indicating an incorrect date?

Have you ever wondered why JavaScript returns 'Invalid Date' when setting an (invalid) date? It can be quite confusing and make it difficult to handle errors. So, what is the optimal way to deal with this issue? One approach is to check the date ...

javascript

Tips for circumventing if statements in TypeScript-ReactJS?

I currently have various action checks in place to perform different functions. Essentially, I am using if and else conditions to determine the action type and execute the corresponding functionality as shown below: public onMessage = (messageEvent) => ...

javascriptreactjsif-statementtypescriptporthole.js

Retrieve information from a .json file using the fetch API

I have created an external JSON and I am trying to retrieve data from it. The GET request on the JSON is functioning correctly, as I have tested it using Postman. Here is my code: import "./Feedback.css"; import { useState, useEffect } from " ...

javascriptreactjsjsonreact-hooks

I need to find a way to transfer user input data from the frontend to ExpressJS in order to make an API call using an endpoint

Within my perspective, there is a text box where users can input values. Leveraging jquery, I retrieved the user's value and now aim to transfer it from my jquery file to the express module in app.js. Any ideas on how to best approach this? ...

jquerynode.jsexpress

CSS font attribute stylus variable

Can you help me troubleshoot this issue with the variable in stylus that is setting the font attribute using shorthand syntax? button-font = 100 16px Helvetica Neue', Helvetica, Arial, sans-serif I'm encountering the following error message: ...

cssstylus

How can you reach a constant from a different component in React?

I am new to developing a react application and struggling with accessing const data from another component. The specific constant I need access to is located in the TableComponent.js file. TableComponent.js export default function({ infinite }) { const [ ...

javascriptreactjs

What is the best way to choose the right value based on parameters?

I am currently working on a solution using protractor where I have several options to consider. Specifically, I need to test timeslots between 1600 and 1900, along with an else statement. For instance, if the 1600 timeslot is selected, then the code shoul ...

javascriptseleniumif-statementparametersprotractor

Issue with Tweening in Three.js: Initial value does not change

Having trouble with tweening my camera position. I've set up a Codepen with minimal code to showcase the issue, complete with annotations and plenty of console.log() statements for debugging purposes. Check out the Codepen The starting point of my c ...

javascriptthree.jsgsaptween

Locally hosted website failing to transfer login details to external domain

Having trouble with an ajax call that is supposed to retrieve data from a web page, but instead returns a jQuery parse Error. Even though I can access the page directly, the ajax call doesn't seem to be working and storing the result properly. Below ...

javascriptjqueryasp.netajaxcross-domain

Issues arise when the jQuery min.js file conflicts with the WooCommerce plugin

While working on my WordPress website with various plugins and WooCommerce theme, I encountered conflicts when using jQuery code. This led to my plugins stopping working. Can anyone provide me with guidance on how to resolve this issue so I can successfu ...

jquerywordpresswoocommerce

The jQuery scrollLeft function seems to be stuck and not working correctly

I have a container div with a ul inside of it set up like this CodePen: http://codepen.io/example/123 Why won't the scroll feature work? HTML: <div id="container"> <ul class="list"> <li>apple</li> <li>orange& ...

jquerycsshtml