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

Question

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.

javascript jquery html css

Answer 1

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

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 3

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 4

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 5

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;
    }
}

Answer 6

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;
    }
}

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

Answer №1

Answer №2

Answer №3

Similar questions

Limit a div to only accept a specific stylesheet

angularjs dynamically display expression based on controller value

Tips for incorporating a User ID object into an Ajax request

Attempting to change the text of a Bootstrap button using jQuery when clicked

How come the last word in CSS nested flexbox wraps even though there is space available?

Adjust the DIV dimensions to fit the background image perfectly

Enhance the current MultiSelect object by incorporating JQuery MultiSelect

Maximizing the potential of AFRAME animations: Tips for recycling your animations

Issues with data within a Vue.js pagination component for Bootstrap tables

Detection of numerous Google Analytics tags

Exploring ways to access elements within shadow-root (open) in Angular using SVG.js

Making a column in a Vue data grid return as a clickable button

How to style HTML li elements to wrap like sentences within a paragraph

How to properly handle Angular routing errors and best practices?

Can we set a specific length for an array passed in as a prop?

When utilizing JavaScript within an Electron application file that is linked with a script tag in an HTML document, there may be limitations on using node modules with

What is the purpose of uploading the TypeScript declaration file to DefinitelyTyped for a JavaScript library?

Having trouble with the dropdown multiselect feature in AngularJS?

Reactjs is retrieving several items with just one click on individual items

Having issues with the functionality of the Previous/Next button in my table