1

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

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

例如：

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

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

谢谢你！

4

2 回答 2

2

你也可以使用

<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
于 2013-04-05T06:06:17.417 回答
1

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

如果文档宽度为 768 像素或更窄，请查看此 Fiddle以了解它如何组合 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 事件侦听器以在调整浏览器大小时运行代码，否则它只会在页面首次加载时运行。

于 2013-04-29T13:59:50.513 回答