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

What is the method to implement timeago.js?

I've recently embarked on my journey to learn JavaScript, and it has only been two weeks since I started. As a beginner, I'm encountering some difficulties with implementing timeago from . The specific line of instruction that's giving me tr ...

javascriptjquery

Is left padding appearing mysteriously (supernatural CSS phenomenon)?

While using the Firebug inspector tool, if you hover over #jimgMenu ul, you may notice that it has left padding without any corresponding CSS rule: Where is this mysterious left padding coming from? Why is the origin not visible? EDIT: If you navigate t ...

jquerycss

CSS regression testing through version control systems and continuous integration

Is there a tool that integrates with CI systems and VCS like Git to automatically assign regression test results to individual commits? Ideally, this tool would provide a concise summary on a main page showing passed/failed numbers for each commit, with th ...

csscontinuous-integrationcontinuous-deploymentregression-testing

What could be causing my YouTube code to malfunction with certain playlists?

Check out the first jsfiddle playlist here The Alum Songs Playlist is working perfectly, but unfortunately, the same code is not functioning for another playlist ID. View the second jsfiddle playlist here The Medical Animated Playlist is currently not w ...

javascriptjqueryjson

Using a JavaScript script in my HTML alongside Vue.js is not possible

Hello there! I recently created a Node.js server and now I'm trying to display an HTML file that contains a Vue script which loads data using another method written in a separate JS file. However, when I attempt to load my HTML file in the browser, ...

javascripthtmlnode.jsvue.js

Issues with the initial drop functionality in jQuery UI

How come the jQuery code does not work properly on the first drop? $(".drag").draggable({ revert: 'invalid', drag: function(event, ui) { $(this).addClass('valid'); } }); $("#droppable").droppable({ accept: '.valid&apos ...

javascriptjqueryjquery-ui

How can HTML be utilized to create a brief description?

I want to insert a link into the brief description that says "Read More..." which will direct the buyer to the main description further down on the product page when clicked. Can someone please provide guidance on how to achieve this? The URL for the link ...

htmlmagento

When using the `Node fs.readstream()` function, the output includes `<Buffer 3c 3f 78 6d 6c ...>`, which is not in a readable

Handling a large XML file (~1.5gb) in Node Js by streaming it to process data in chunks has proven challenging due to the complexity of the documentation. A simple code snippet I am currently using is: var fs = require('fs'); var stream = fs.c ...

javascriptnode.jsstreamhexnode.js-stream

How to access iFrame in ReactJS using document.getElementById

I am facing a challenge on my website where I need to transfer data (using postMessage) to an iframe. Typically in plain JavaScript, I would use techniques like document.getElementById or $("#iframe") in jQuery to target the iframe. However, I am unsure ...

javascriptreactjsnext.js

JavaScript and jQuery syntax are essential for web development. Understanding how

I've been searching everywhere but couldn't find syntax similar to this: var mz = jQuery.noConflict(); mz('#zoom01, .cloud-zoom-gallery').CloudZoom(); This basically means: jQuery.noConflict()('#zoom01, .cloud-zoom-gallery') ...

javascriptjquery

A groundbreaking algorithm engineered to launch a sequence of distinct hyperlinks upon each button press

I have a unique script that allows me to open links randomly, but now I want to create a new script that opens links sequentially and goes back to the initial one. For example, clicking a button will open link1, then clicking it again will open link2, an ...

javascripthtmlweb

What is the reason behind the perpetual hiding of the button?

<div class="app__land-bottom" v-if="isVisible"> <a href="#projects"> <img ref="arrowRef" id="arrow" src="./../assets/down.png" alt srcset /> </a> </div> When ...

javascriptvue.jsvuejs2vue-componentvuejs3

Instructions for including packages in .vue files

Within the script section of my .vue file, I have the following code: <script> import get from 'lodash.get'; ... </script> Despite trying to import lodash.get, I keep encountering an error message stating ReferenceError: ge ...

javascriptlaravelvue.jslodash

Encountering an error when attempting to generate a production build after running the npm install command with the

After adding the brotli-webpack-plugin as a devDependency, I encountered an issue when attempting to generate a production build using npm run build (which internally runs next build). The error message displayed was: Error: Cannot find module 'bro ...

javascriptreactjsnpmpackage.jsonnext.js

What is the best way to ensure that my header remains responsive across all devices and screen sizes?

The header is not responding despite inputting width: 100%. How can I ensure that the header is responsive on all browsers, as well as iPads and phones? .head-wrap { background: url(http://envisionmediallc.com/prodigy/wp-content/uploads/2014/02/We-are-p ...

csswordpress

Verify the presence of a specific value within an array of objects in JavaScript that was retrieved from an AJAX response, and then

I am encountering an issue with the code below where I am unable to filter entry.AllLinks. The code snippet is shown here: $.ajax({ url: url, type: "get", headers: {"Accept": "application/json;odata=verbose"}, success: function (data) { ...

javascriptjqueryarraysajax

Dealing with problems related to types in React and TypeScript createContext

Struggling to pass the todos (initial state) and addNewTodo (methods) using React Context hook and typescript. Despite trying multiple solutions, errors persist. Partial generics do not cause issues in the context component, but I encounter the error Cann ...

javascriptreactjstypescriptreact-hooks

Positioning images within a relatively positioned div using absolute positioning

I have come across multiple discussions on this topic, but I am still struggling to make the following code snippet function correctly: .container { position: relative; width: 100%; } .left { position: absolute; left: 0px; } .right { positio ...

htmlcsscss-position

Change the color of the menu icon based on the specified HTML class or attribute

I'm trying to create a fixed menu that changes color depending on the background of different sections. Currently, I am using a data-color attribute but I am struggling with removing and adding the class to #open-button. Adding the class works fine, ...

javascriptjqueryhtmlcss

What is causing the qtip tooltip to show up on buttons with different ids?

I have a requirement to display tooltips only for specific buttons and not for others. I am facing an issue where the tooltip intended for the TAB button is showing up when hovering over other buttons like FOO and BAR as well. Could this be due to them sha ...

javascriptjquerycssqtip2