Ways to append each list item from one unordered list to the end of another based on their unique styles

I am in the process of making a website responsive and I am faced with the task of combining two different menus. In order to achieve this, I need to transfer all list items (li) from one unordered list (ul) to another.

Provided below is a simplified version of the current markup:

<ul class="navigation-menu">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

<ul class="nav-bar">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

The goal is to append all list items from nav-bar at the end of the navigation-menu list and then hide the nav-bar from being visible on the web page.

This is my attempted solution:

$('ul.nav-bar li').each(function() {
   $(this).after('ul.nav-bar:last-child');
}

I am uncertain about how to go about solving this issue. Any guidance or pointers in the right direction would be greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

If you want to add items to the bottom of the .navigation-menu, you can use the appendTo() method:

$('ul.nav-bar li').each(function() {
  $(this).appendTo('ul.navigation-menu');
});

To hide another div at a specific screen width, you can utilize media queries in CSS (although it will be hidden because it will be empty):

@media only screen and (max-width: 500px //example){
  .nav-bar{
    display: none;
  }
}

You could also achieve this with JavaScript if desired, but CSS would suffice:

$('ul.nav-bar').hide();

FIDDLE

Update

Thanks to vladkras for pointing out that the JavaScript code can be shortened to:

$('ul.nav-bar li').appendTo('ul.navigation-menu');

NEW FIDDLE

Answer №2

const mainNav = $('.main-navigation'),
    links = mainNav.find('a');
$('.menu').append(links);
mainNav.hide(); // or use .remove() to completely remove it from the DOM

JSFIDDLE LINK

Answer №3

Hello, I have an example for you to check out: Example

If you want to add more menu items after the existing second menu, all you need to do is clone the list elements and append them to the navigation menu using jQuery.

$(function(){
  var children = $(".nav-bar li").clone();
    $(".navigation-menu").append(children);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation-menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<ul class="nav-bar">
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

You can also hide elements based on a specific breakpoint, such as hiding the .nav-bar when the screen width is 769px or less.

@media screen and (max-width:769px){
    .nav-bar{
        display: none;
    }
}

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

Issue encountered while creating a token in a JavaScript Chrome extension and attempting to validate it on a backend Node.js server

Trying to create a token within a chrome extension and utilizing it to authenticate requests to the backend server has proven challenging. While successfully generating a token on the front end, encountering an error when verifying it with the google-auth- ...

javascriptnode.jsgoogle-chrome-extensiongoogle-oauthgoogle-auth-library-nodejs

NativeScript encountered an error while trying to locate the module 'ui/sidedrawer' for the specified element 'Sidedrawer'

Currently, I am in the process of developing a simple side-drawer menu for my NativeScript application by following this helpful tutorial. I have successfully implemented it on a single page using the given code below. starting_point.xml: <Page xmlns ...

javascriptandroidxmltypescriptnativescript

Is it possible for jQuery UI Tabs to load entire new HTML pages?

In my index.html file, I have set up 3 different tabs. Using the jQuery UI function tabs(), I am attempting to load an HTML page via Ajax. Each HTML page includes the jQuery library and contains the following code: <link type="text/css" href="css/redmo ...

javascripthtmljquery-uijqueryjquery-tabs

Obtain the value of the background image's URL

Is there a way to extract the value of the background-image URL that is set directly in the element tag using inline styling? <a style="background-image: url(https:// ....)"></a> I attempted to retrieve this information using var url = $(thi ...

javascriptjqueryhtmlcssmongodb

Generate an array of identifiers from a pre-existing array

I am facing a challenge where I need to create an array of IDs for each element in an existing array whose size is unknown. The twist here is that every set of four elements should have the same ID. As an illustration, if the original array (let's ca ...

javascriptarraystypescript

For Firefox, the status code always comes back as 0 when using xmlhttprequest

When attempting to make asynchronous calls using the xmlhttprequest object, everything functions perfectly in Internet Explorer. However, Firefox seems to be encountering issues. Here is a snippet of the problematic code: if (req.readyState == 4) { i ...

javascriptajaxasp.net-ajaxxmlhttprequest

Styling the background of the endAdornment in a material-ui textfield using React

I tried following the instructions from this source: Unfortunately, the example code provided doesn't seem to be functioning properly now. Is there a way to achieve the same result without having that right margin so that it aligns better with the r ...

javascriptcssreactjsmaterial-uitextfield

Attempting to integrate the Angular2 module text-mask-addon into the project

Currently, I am in the process of integrating text-mask-addons into my Angular application. You can find more information at https://github.com/text-mask/text-mask/tree/master/addons Despite attempting to follow the npm links suggestion, I am encountering ...

javascripthtmlnode.jsangularnpm

Firefox is mistakenly interpreting a pasted image from the clipboard as a string instead of a file, causing

I am facing an issue where I am attempting to extract images from a contenteditable div using the paste event. The code works perfectly in Chrome but does not function as expected in Firefox. I have implemented the following code: $(window).on("paste& ...

javascriptjqueryfirefoxcross-browserclipboard

Sustain information across two pages using Next.js

Recently, I have been considering reorganizing my Next.js webapp to allocate different pages for handling various screens. Currently, I have a component that manages multiple states to determine the screen being displayed. Within the jsx section, I utilize ...

javascriptreactjsnext.jsreact-state-management

Guiding the jQuery Document

I currently have a stylesheet in the head section with the following content: *, body { direction:rtl; } Upon inspection, I found that the dir variable of jQuery is set to ltr: $(function(){ alert(this.dir); }); How can I obtain the specific page di ...

jquerycss

Retrieve the data attribute from a specific dropdown menu using jQuery

Here is the code snippet I am currently working with: $('.tmp-class').change(function() { $('.tmp-class option:selected').each(function() { console.log($('.tmp-class').data('type')); }) ...

javascriptjquery

Changing the text color and background color of a span element when a ng-click event is triggered

There are two buttons, Today and Tomorrow, each with an ng-click function. By default, the button background color is white and text color is red. When the Today button is clicked, the background color changes to blue and the text color changes to white. ...

javascripthtmlcssangularjs

Tips for harnessing the power of servlets in conjunction with jQuery and bootstrap

I am working with a button: <button id="saveFeed" type="button" class="btn btn-primary">Save changes</button> which exists within this form: <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="moda ...

jqueryajaxservlets

Can you provide step-by-step instructions on how to customize styles with MUI in my application?

I am encountering issues with MUI while attempting to customize the color of my buttons. The two methods I have tried so far have been unsuccessful. For example, Method 1: import React from 'react' import { Typography } from '@mui/material& ...

cssreactjsmaterial-ui

How should values be properly stored in a constant using mongoose?

Within my user model, I have included timestamps. I am seeking a way to retrieve the createdAt date and store it in a variable. My initial attempt was: const date = await User.find({ serial: serialId, }).select('-_id createdAt'); The result re ...

javascriptnode.jsmongodbmongoose

Ready document not triggering at the anticipated time

I've developed a website where all the pages are loaded using ajax. When I load the first page, I check if jQuery is loaded by using: if (window.jQuery) { alert('jQuery is loaded'); } Every time this script runs, it successfully alert ...

jqueryajax

Selections made from the dropdown menu will automatically generate additional fields in the

The code I'm working with is too lengthy to post in its entirety, so here is the JSFiddle link instead: https://jsfiddle.net/c0ffee/pew9f0oc/1/ My specific issue pertains to this screenshot: Upon clicking on the dropdown menu, the options are visib ...

htmljquerycss

The issue with AngularJS multiple $http requests failing to fetch accurate data

I'm having issues with my AngularJS controller and service modules. I want to refresh custController.allCustomers after adding a new customer so that the UI displays the new data. However, when I call custController.createCustomer, the new customer do ...

javascriptangularjs

Is there a way to automatically launch a new tab upon arriving from another website?

I currently have a website that displays a table of elements, each with its own set of sub-elements. On another page, I can view the element along with multiple tabs for its corresponding sub-elements. The current setup is depicted as follows: <a clas ...

javascripthtml