merge 2 separate menus into a single menu

问题

I have 2 separate menus in different places on a page 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 a can combine both of the navigations in a full width style toggle drop down when the device width is less the 768?

so they will turn 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>

回答1:

Simply LIVE DEMO:

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

...which is a brutality of:

LIVE DEMO

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

function navResize(){

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

}

navResize();

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

回答2:

With jquery you can try this:-

Fiddle

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

回答3:

You could go about a few ways here, you could just make 3 navigations one top, one bottom and one mobile and just hide the ones who 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;
  }
}

Or if you prefere to do it serverside use a php script like mobile_detect http://code.google.com/p/php-mobile-detect/

Example with 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 already have been posted two answers using jQuery which are exactly what your looking for I guess. :)

来源：https://stackoverflow.com/questions/16269027/merge-2-separate-menus-into-a-single-menu

标签

jquery

html5

css3

responsive-design