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

或者，如果你prefere做服务器端使用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的答案，这正是你想要的，我猜。 :)