将 2 个单独的菜单合并为一个菜单

Question

我在页面的不同位置有 2 个单独的菜单，如下所示：

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

当设备宽度小于 768 时，有没有一种方法可以将两个导航组合成一个全宽样式的切换下拉菜单？

所以他们会变成：

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

Answer 1

只需 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); 

...这是一种残暴：

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

Answer 2

使用 jquery 你可以试试这个：-

Fiddle

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

Answer 3

您可以在这里采取几种方式，您可以制作 3 个导航，一个顶部、一个底部和一个移动，并隐藏那些不应该显示的导航。

例如：

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

或者，如果您更喜欢在服务器端使用 php 脚本，例如 mobile_detect http://code.google.com/p/php-mobile-detect/

以 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 } ?>

已经使用 jQuery 发布了两个答案，我猜这正是您正在寻找的。 :)