Question

我的网站头部有两个完全独立的菜单，

这是有充分理由的，因为两个菜单的样式完全不同，并且有不同的链接等;

例如：

<div class="menu1">
 <ul>
  <li><a href="">one</a></li>
  <li><a href="">two</a></li>
  <li><a href="">three</a></li>
 </ul>
</div>

<div class="menu2">
 <ul>
  <li><a href="">drop 1</a>
    <ul>
      <li><a href="">sub 1</a></li>
    </ul>
  </li>
  <li><a href="">drop 2</a>
    <ul>
      <li><a href="">sub 2</a></li>
    </ul>
  </li>  
  <li><a href="">drop 3</a>
    <ul>
      <li><a href="">sub 3</a></li>
    </ul>
  </li>
 </ul>
</div>

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

所以它会把它变成：

<div class="menus combined">
 <ul>
  <li><a href="">one</a></li>
  <li><a href="">two</a></li>
  <li><a href="">three</a></li>
  <li><a href="">drop 1</a>
    <ul>
      <li><a href="">sub 1</a></li>
    </ul>
  </li>
  <li><a href="">drop 2</a>
    <ul>
      <li><a href="">sub 2</a></li>
    </ul>
  </li>  
  <li><a href="">drop 3</a>
    <ul>
      <li><a href="">sub 3</a></li>
    </ul>
  </li>
 </ul>
</div>

任何意见或建议都将不胜感激！

谢谢你！

Answer 1

你也可以用

<div class="menus combined">
 <ul>
 <select>
    <option>one</option>
    <option>two</option>
    <option>three</option>
    <option>drop 1</option>
    <option>sub 1</option>
    <option>drop 2</option>
    <option>sub 2</option>
    <option>drop 3</option>
    <option>sub 3</option>
    <option>one</option>
 </select>
</div

Answer 2

使用CSS媒体查询无法更改页面的HTML，但您可以通过JavaScript。

Take a look at this Fiddle了解如果文档宽度为768像素或更窄，它如何组合2个菜单。

$(document).ready( function () {

// Get the width of the body:
var bodyWidth = document.documentElement.clientWidth;

if (bodyWidth <= 768) {
    // Change the class of the first menu:
    $('.menu1').attr('class', 'menus combined'); 

    // Add in the items from the second menu into the first:
    $('.menus.combined ul').append($('.menu2 ul').html());        
}

});

您可能还希望添加resize事件侦听器以在调整浏览器大小时运行代码，否则它仅在首次加载页面时运行。

在移动设备上，两个单独的菜单组成一个响应式下拉菜单

2 个答案: