Question

我有一个这样的菜单：http://codepen.io/anon/pen/pjBdEL 我想第一行末尾的菜单会显示一个带有下拉菜单的按钮而不是两行。单击按钮时，它应显示一个下拉菜单，其中包含“第二行”菜单项。

这里有一个例子（意大利有线菜单）：http://www.wired.it/

.menu {width:100%;}
.menu ul {
  padding:0;
  float:left;
  width:100%;
  list-style:none;
}
.menu ul li {
  margin:0;
  padding:10px 20px;
  position:relative;
  display: inline-block;
  text-transform:uppercase;
  font-size:1.3em;
  font-weight:bold;
  font-family:'Arial', sans-serif;
}

<div class="menu">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
  </ul>
</div>

谢谢：）

修改

响应式菜单的按钮不。我需要在菜单的结束处设置一个按钮，以显示不适合菜单第一行的项目。

Answer 1

为主菜单提供一个类，这样我们就可以轻松地在CSS和jQuery中定位它：

<ul class="mainmenu">
  <li>One</li>
  ...
</ul>

在主菜单的右侧添加新的ul：

<ul class="rightmenu">
  <li class="more">More ▼</li>
</ul>

将div容器设为flexbox，并仅为主菜单设置li内嵌块。

调整窗口大小后，将所有li s 除“更多”li移至主菜单。隐藏正确的菜单。

然后使用getBoundingClientRect()查找主菜单中不适合的第一个li，并将其前一个兄弟以及所有下一个兄弟姐妹移动到右侧菜单中。然后显示正确的菜单：

$(window).resize(function() {
  setTimeout(function() {
    $('.menu li:not(.more)').appendTo('.mainmenu');

    $('.rightmenu').hide();

    $('.mainmenu li').each(function() {
      if(this.getBoundingClientRect().right > this.parentNode.getBoundingClientRect().right) {
        $(this).prev().nextAll().addBack().appendTo('.rightmenu');
      }
    });

    $('.rightmenu').toggle($('.rightmenu').children().length>1);
  }, 10);
}).resize();

使用setTimeout()以便在调整大小时不会持续运行该功能。

Updated CodePen

<强>段

$(window).resize(function() {
  setTimeout(function() {
    $('.menu li:not(.more)').appendTo('.mainmenu');
    
    $('.rightmenu').hide();
    
    $('.mainmenu li').each(function() {
      if(this.getBoundingClientRect().right > this.parentNode.getBoundingClientRect().right) {
        $(this).prev().nextAll().addBack().appendTo('.rightmenu');
      }
    });
    
    $('.rightmenu').toggle($('.rightmenu').children().length>1);
  }, 10);
}).resize();

.menu {
  display: flex;
}
.menu ul {
  padding:0;
  list-style:none;
  white-space: nowrap;
}
.menu li {
  margin:0;
  padding:10px 20px;
  position:relative;
  text-transform:uppercase;
  font-size:1.3em;
  font-weight:bold;
  font-family:'Arial', sans-serif;
}

.mainmenu {
  flex: 1;
}

.mainmenu li {
  display: inline-block;
}

.rightmenu {
  width: 7em;
  height: 3em;
  overflow: hidden;
}

.rightmenu:hover {
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul class="mainmenu">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
  </ul>
  <ul class="rightmenu">
    <li class="more">More ▼</li>
  </ul>
</div>

Answer 2

有线网站设置的方式是根据视口宽度显示“更多”下拉项。

例如，从窗口宽度650px到800px，“更多”部分中有5个导航项。 800px到1000px在'more'中有2个导航项目

我设置了一个代码来帮助您了解正在发生的事情。

HTML

<div class="menu">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li class="hide-sml">Ten</li>
    <li class="hide-sml">Eleven</li>
    <li class="hide-sml">Twelve</li>
      <li class="more-li">MORE
        <ul class="dropdown">
            <li>Ten</li>
           <li>Eleven</li>
            <li>Twelve</li>
        </li>  
    </li>
  </ul>
</div>

CSS

.menu {width:100%;}
.menu ul {
  padding:0;
  float:left;
  width:100%;
  list-style:none;
}
.menu ul li {
  margin:0;
  padding:10px 20px;
  position:relative;
  display: inline-block;
  text-transform:uppercase;
  font-size:1.3em;
  font-weight:bold;
  font-family:'Arial', sans-serif;
  position:relative;
}
.hidden{
    display: none;
}
li ul.dropdown{
    width: 150px;
    display:none;
    position:absolute;
}
li ul.dropdown li{
    width: 100%;
    background:#333;
    color: #fff;
    cursor:pointer;
}
ul li.more-li{
    display:none;
    cursor:pointer;
}
@media screen and (max-width:700px) {
    ul li.hide-sml{
        display:none;
    }
    ul li.more-li{
        display:inline-block;
    }

}

JQUERY

$('ul li.more-li').click(function(){
    $(this).find('.dropdown').toggle();
});

这是工作jsfiddle。

如果您对代码有任何疑问，请与我们联系。

Answer 3

试试这段代码。

**<!-- css code -->**
    <style>
    .menu {width:100%;}
    .menu ul {
      padding:0;
      float:left;
      width:100%;
      list-style:none;
    }
    .menu ul li {
      margin:0;
      **padding:10px 15px;**
      position:relative;
      display: inline-block;
      text-transform:uppercase;
      font-size:1.3em;
      font-weight:bold;
      font-family:'Arial', sans-serif;
    }

    .menu  ul.dropdown-menu li {
      margin:0;
      padding:10px 15px;
      position:relative;
      display: block;
      text-transform:uppercase;
      font-size:1.3em;
      font-weight:bold;
      font-family:'Arial', sans-serif;

    }
    </style>

**<!-- html code -->**
    <div class="menu">
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
        <li>Ten</li>
        <li>Eleven</li>
        <li>Twelve</li>
        **<a  href="#" id="submenu">more </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="more" style="margin-left: 81%">
                            <li><a href="#asas">Video</a></li><li><a href="#asas">Gallery</a>**</li>                  </ul>
    </div>

**<!-- js code to show and hide menu on selecting button -->**
    <script>
    $('.dropdown-menu').css('display' , 'none');
    $(document).ready(function() {
        $('#submenu').click(function() {
                $('.dropdown-menu').slideToggle("fast");
        });
    }); 
    </script>

突出显示的行是从我这边编辑的。希望这会帮助你。

感谢。

如何在一行上保留菜单？

3 个答案: