合併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的答案，這正是你想要的，我猜。 :)