Using jquery to create a dropdown menu that appears on multiple pages

Is there a way to code a dropdown menu on one page and use it on multiple pages? For example, if I click on an image, a dropdown menu should appear. This same image appears on multiple pages, so the dropdown menu should display when clicked.

Fiddle: http://jsfiddle.net/exuY9/1/

<ul id="container">

    <li class="draggable">
        <div class="header">
            <h1>1</h1>
            <div class="button"></div>
            <div class="button dropmenu"  id="menuwrap">
                <a href="#" class="dropdown"><img src="../images/Forward.JPG"></a>
                <ul class="menucontainer" style="margin:0px" id="dr1">
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </div>
            <div class="button"></div>
        </div>
    </li>

    <li class="draggable">
        <div class="header">
            <h1>2</h1>
            <div class="button minimize"></div>
            <div class="button dropmenu" id="menuwrap2">
                <a href="#" class="dropdown"><img src="../images/Forward.JPG"></a>
                <ul class="menucontainer" style="margin:0px" id="dr2">
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </div>
            <div class="button maximize"></div>
        </div>
    </li>

</ul>

Answer №1

A simple way to achieve this is by removing the current menu from both elements and replacing it with just one instance of menucontainer at the bottom of your page.

<ul class="menucontainer" style="display:none;">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

Using jQuery, you can then append a duplicate of that element to each dropmenu element...

$(".dropmenu").append( $(".menucontainer").clone() );

I have updated your fiddle to demonstrate how this works: http://jsfiddle.net/promatik/bHJvs/
I have removed unnecessary sections to focus on what you specifically requested...


If you prefer not to have the HTML code block hidden at the bottom of your page, there is an alternative method using jQuery:

$(".dropmenu").append( $('<ul class="menucontainer"><li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li></ul>') );` 

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

After upgrading from jquery version 2.1 to 3, the custom rules for Knockout Validation are no longer functioning as expected

In my project using knockout 3.2, I have a custom validation rule that retrieves its value from an ajax call on a specific field. Everything worked perfectly with jQuery version 2.1. However, when I updated to jQuery version 3.0, the functionality stopped ...

Tips for linking two project routes in NodeJS and incorporating React (I am interested in invoking React within the NodeJS project)

I'm in the process of linking two projects, one using reactJS and the other NodeJS. Currently, NodeJS is running smoothly on localhost:3000. Next, I want to call a React application which redirects to port localhost:3001. How can I seamlessly connect ...

Retrieve information from a PHP file and populate it into a textarea using AJAX

In my file named Getsocks.php, I have the following code: <? session_start(); require("../includes/config.php"); $getsocks = mysqli_query($cl,"SELECT * FROM getsocks"); while($socks = mysqli_fetch_array($getsocks)) { echo $s ...

Having trouble loading styles in Vue after publishing to npm

I'm currently using vue-cli3 for the npm publication of a Vue component. Below are my build scripts: "package-build": "eclint fix && vue-cli-service build --target lib --name @xchat-component/chat-component ./src/index.ts & ...

The issue of the jQuery ajax script being inadvertently reloaded is persisting even after

I've successfully integrated a bootstrap modal and included a .js file that contains the necessary Ajax function. However, I have encountered an issue where the ajax function is triggered multiple times when the load more button is clicked multiple ti ...

Ensure that the form redirects to website.com/test/ rather than website.com?name=

I am currently facing an issue while trying to create a search function for usernames. When I click the submit button, it redirects me to websitelink.com?=name=Nighel instead of going to websitelink.com/Nighel/ Even though I am using htaccess, the ?= form ...

The precedence of theme CSS is paramount

Check out this link for Smirnoff Espresso Vodka 70cl (password: hide) Upon inspecting the page source, you'll see that my main stylesheet (main-style) is loaded at the top of the head section with high priority, even above my theme's style. Why ...

Tips for customizing the toggle animation styling

I'm new to HTML and CSS, currently working on designing a website for our conference. I've implemented a toggle effect for displaying the information about invited speakers along with their research interests using the following code: <!DOCTY ...

Conceal table cells using jquery depending on the input value

Is there a way to hide the td elements when the input value is set to 0? I've been struggling to make it work. http://jsfiddle.net/zxpsd8x6/1/ <td><input type="radio" name="hideifvalue0" value"0"></td> <td><input type="rad ...

Update the CSS styles

html document <ul id="navbar"> <li class="selected"> <a href="#"> HOME</a> </li> <li> <a href="#"> ABOUT US</a> </li> ...

Adjust the x and y coordinates of the canvas renderer

Manipulating the dimensions of the canvas renderer in Three.js is straightforward: renderer = new THREE.CanvasRenderer(); renderer.setSize( 500, 300 ); However, adjusting the position of the object along the x and y axes seems more challenging. I've ...

Tips for utilizing AJAX to send data from a specific row

<table> <tr data-id="1"> <input type="text" name="name_1" value="abc"> <input type="text" name="value_1" value="1"> <a href="load_edit_row(this)">Edit</a> </tr> <tr data-id="2"> <input t ...

What is the best way to display additional content in a Django application?

My Django application has a template for viewing group lists. However, I have noticed that as the number of groups increases, the page scrolls down and I am unable to see all the names of the groups. What I want is to display only 4 group names initially ...

Tips for resizing and positioning an image within an input field

Is it possible to have a button overlapped on an input field in a responsive website like this: https://i.sstatic.net/tnVmF.png I tried using an input group addons, but the result is not quite what I expected: https://i.sstatic.net/xpMgr.png This seems t ...

How can SASS be used to style a span based on its content?

In order to add css styling to a span element, I am looking to utilize only the dynamic SASS style processor without relying on any javascript/jQuery. The condition for applying the style should be based on the content of the span. For example: <sp ...

The function given to requestAnimationFrame is not being triggered as expected

I have successfully implemented an infinite loop animation using setInterval. However, I want to enhance the performance by switching to requestAnimationFrame(). Unfortunately, the function supplied to requestAnimationFrame() is not being called for some r ...

Clear the text in a textarea after submitting the form

I am facing an issue with a comment box (textarea) inside a dialog. After successfully saving the comment, I want to clear the content of the textarea and close the dialog box. Currently, the dialog box closes, but the content remains in the textarea. < ...

Differentiating between inline and block elements in HTML5

Can you explain the various categories of inline and block elements in html5? I'm having trouble distinguishing between the different types of inline and block elements in html5. ...

Is there a method in Jquery to change the background color of a Div when it is clicked on?

Is there a way to use Jquery to highlight/select the text within a clicked-on div as if it were selected with the mouse? This would not be for a text box, but rather a standard div element. I am attempting to create a 'short URL' input box where ...

Strange spacing in Angular Material checkbox

I have a container with an angular material checkbox inside. The background of the container is black, so I changed the background color of the checkbox to white for visibility. However, there seems to be some unwanted spacing on the right side of the chec ...