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

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

 
 
one
 
two
 
three
 
 
 
 
 
Item 1
 
Item 2
 
Item 3
 
  

当设备宽度小于768时，有没有一种方法可以在全宽样式切换下拉中组合两种导航？

所以他们会变成：

 
 
 
one
 
two
 
three
 
Item 1
 
Item 2
 
Item 3
 
  

Answer 1

简单演示 ：

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

......这是一种残暴：

现场演示

 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你可以尝试这个： –

小提琴

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

Answer 3

你可以在这里找几个方法，你可以只做一个顶部，一个底部和一个移动的导航，只是隐藏那些不应该看到的导航。

例如：

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

或者，如果你喜欢这样做，服务器端使用像mobile_detect这样的PHP脚本http://code.google.com/p/php-mobile-detect/

用php的例子：

 isMobile()) { ?> 
 
...
 
 
 
...
 
  
 
...
 
  

已经使用jQuery发布了两个答案，这正是你想要的。 🙂