Combine two distinct menus to create a unified menu

Question

Combine two distinct menus to create a unified menu

I currently have two separate menus positioned in different areas on a webpage structured like this:

<div class="TopNav">
<ul>
    <li><a href="">one</a></li>
    <li><a href="">two</a></li>
    <li><a href="">three</a></li>
</ul>
</div>

<div class="LowerNav">
 <ul>
  <li><a href="">Item 1</a></li>
  <li><a href="">Item 2</a></li>  
  <li><a href="">Item 3</a></li>
 </ul>
</div>

Is there a way to merge both navigation menus into a full-width style toggle drop-down when the screen width is less than 768 pixels?

So they would transform into:

<div class="BothNav">
 <ul>
  <li><a href="">one</a></li>
  <li><a href="">two</a></li>
  <li><a href="">three</a></li>
  <li><a href="">Item 1</a></li>
  <li><a href="">Item 2</a></li>  
  <li><a href="">Item 3</a></li>
 </ul>
</div>

jquery html css responsive-design

Answer 1

Answer №1

Experience the LIVE DEMO:

var $LowerNavLI = $('.LowerNav li'),
    $TopNav = $('.TopNav');    
function resizeNavigation(){  
  var mobileView = window.innerWidth<768;
  $LowerNavLI.appendTo((mobileView?".TopNav":".LowerNav")+' ul');
  $TopNav[mobileView?"addClass":"removeClass"]('BothNav');
}    
resizeNavigation();
$(window).resize(resizeNavigation);

...which showcases:

LIVE DEMO

var $LowerNavLI = $('.LowerNav li');

function resizeNavigation(){

  var winWidth = window.innerWidth;
  var isAppended = false;
  if(winWidth < 768 && !isAppended){
    isAppended = true;
    $LowerNavLI.appendTo('.TopNav ul');
    $('.TopNav').addClass('BothNav');
  }else{
    isAppended = false;
    $LowerNavLI.appendTo('.LowerNav ul');
    $('.TopNav').removeClass('BothNav');
  }

}

resizeNavigation();

$(window).resize(function(){
  resizeNavigation();
});

Answer 2

Experience the LIVE DEMO:

var $LowerNavLI = $('.LowerNav li'),
    $TopNav = $('.TopNav');    
function resizeNavigation(){  
  var mobileView = window.innerWidth<768;
  $LowerNavLI.appendTo((mobileView?".TopNav":".LowerNav")+' ul');
  $TopNav[mobileView?"addClass":"removeClass"]('BothNav');
}    
resizeNavigation();
$(window).resize(resizeNavigation);

...which showcases:

LIVE DEMO

var $LowerNavLI = $('.LowerNav li');

function resizeNavigation(){

  var winWidth = window.innerWidth;
  var isAppended = false;
  if(winWidth < 768 && !isAppended){
    isAppended = true;
    $LowerNavLI.appendTo('.TopNav ul');
    $('.TopNav').addClass('BothNav');
  }else{
    isAppended = false;
    $LowerNavLI.appendTo('.LowerNav ul');
    $('.TopNav').removeClass('BothNav');
  }

}

resizeNavigation();

$(window).resize(function(){
  resizeNavigation();
});

Answer 3

Answer №2

Using jquery, you have the option to implement the following code snippet:-

Code Example on Fiddle

if($(window).width() < 768)
{
   $('.TopNav ul').append($('.LowerNav ul li')
     .unwrap()).parent()
     .removeClass("TopNav")
     .addClass("BothNav");
    $('.LowerNav').remove();
}

Answer 4

Using jquery, you have the option to implement the following code snippet:-

Code Example on Fiddle

if($(window).width() < 768)
{
   $('.TopNav ul').append($('.LowerNav ul li')
     .unwrap()).parent()
     .removeClass("TopNav")
     .addClass("BothNav");
    $('.LowerNav').remove();
}

Answer 5

Answer №3

There are a few different approaches you could take in this situation. One option is to create three separate navigation menus - one for the top, one for the bottom, and one for mobile - and then hide the ones that should not be visible.

For example:

<div class="TopNav hideOnPhone">
 <ul>...</ul>
</div>
<div class="LowerNav hideOnPhone">
 <ul>...</ul>
</div>
<div class="mobileNav hideOnDesktop">
 <ul>...</ul>
</div>

@media screen and (max-width: 767px) {
 .hideOnPhone {
   display:none;
  }
}

@media screen and (min-width: 768px) {
 .hideOnDesktop{
   display:none;
  }
}

Alternatively, if you prefer to handle this on the server side, you can use a PHP script like mobile_detect http://code.google.com/p/php-mobile-detect/

Here's an example using PHP:

<?php
 include 'Mobile_Detect.php';
 $detect = new Mobile_Detect();

 if ($detect->isMobile()) { ?>

 <div class="TopNav">
  <ul>...</ul>
 </div>
 <div class="LowerNav">
  <ul>...</ul>
 </div>

<?php } else { ?>

 <div class="mobileNav">
  <ul>...</ul>
 </div>

<?php } ?>

There have already been two answers posted using jQuery which may also suit your needs. :)

Answer 6

There are a few different approaches you could take in this situation. One option is to create three separate navigation menus - one for the top, one for the bottom, and one for mobile - and then hide the ones that should not be visible.

For example:

<div class="TopNav hideOnPhone">
 <ul>...</ul>
</div>
<div class="LowerNav hideOnPhone">
 <ul>...</ul>
</div>
<div class="mobileNav hideOnDesktop">
 <ul>...</ul>
</div>

@media screen and (max-width: 767px) {
 .hideOnPhone {
   display:none;
  }
}

@media screen and (min-width: 768px) {
 .hideOnDesktop{
   display:none;
  }
}

Alternatively, if you prefer to handle this on the server side, you can use a PHP script like mobile_detect http://code.google.com/p/php-mobile-detect/

Here's an example using PHP:

<?php
 include 'Mobile_Detect.php';
 $detect = new Mobile_Detect();

 if ($detect->isMobile()) { ?>

 <div class="TopNav">
  <ul>...</ul>
 </div>
 <div class="LowerNav">
  <ul>...</ul>
 </div>

<?php } else { ?>

 <div class="mobileNav">
  <ul>...</ul>
 </div>

<?php } ?>

There have already been two answers posted using jQuery which may also suit your needs. :)

Combine two distinct menus to create a unified menu

Answer №1

Answer №2

Answer №3

Similar questions

Using the typed plugin in jQuery to create a string of text that includes an HTML hyperlink

Include a "Click for more" and "Click to collapse" button on all thumbnails, not limited to just one

Show the components of an associative array with a click of a button

Utilizing JQuery UI autocomplete for dynamically loaded textbox using AJAX

Exploring ways to tailor regex for tel input type in HTML5

I am attempting to adjust the color of the active tab, but I seem to be encountering issues in my code. Can anyone help me

Is there a more efficient method to choose from various potential attribute values?

If Node doesn't receive a response, the Ajax request will automatically restart

Adding Elements to an Array with JavaScript

ending the AJAX request in servlet

Incorporating a discreet progress bar into traditional file uploading processes

I prefer using HTML over Jade in my MEAN stack development - how can I accomplish this?

Switch the CSS class when clicking on a responsive table within a table

Can you use a lightbox to showcase multiple images while only displaying one image at a time to trigger them?

Using JavaScript to implement CSS3 with multiple background images

Activate the active class on the icon when hovering over a dynamically generated span using Vue

What could be the reason behind the ineffectiveness of my recently acquired Google Maps API key

Is it possible to switch the summernote editor between airmode and toolbar mode?

Use jQuery to retrieve HTML content excluding comments

Choose all HTML checkboxes that have the onClick attribute linked to href