2

我在这样的页面上的不同位置有 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>
4

3 回答 3

5

简单地说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();
});
于 2013-04-28T23:23:16.490 回答
1

您可以在这里采取几种方式，您可以只制作 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 发布了两个答案，我猜这正是您正在寻找的。:)

于 2013-04-28T23:33:12.547 回答
1

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

小提琴

if($(window).width() < 768)
{
   $('.TopNav ul').append($('.LowerNav ul li')
     .unwrap()).parent()
     .removeClass("TopNav")
     .addClass("BothNav");
    $('.LowerNav').remove();
}
于 2013-04-28T23:20:53.013 回答