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

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

例如：

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

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

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发布了两个答案，这正是你想要的。：）

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

3 个答案: