将溢出的li包装到下拉列表中 [英] Wrap overflowing li's into dropdown list

问题描述

我正在制作菜单。我有一个包含许多列表项的菜单。我想要的是当我将浏览器调整到像（笔记本电脑和平板电脑）这样的小屏幕时，我希望溢出的 li的崩溃并出现在下拉列表中。

实际菜单。

同一菜单的响应式视图。

以下是代码结构。

  var menuWidth = $（'ul'）。width（）; //获取ulvar的实际宽度listWidth = $ .map（$（'ul li'），function（val）{return $（val）.width（）;}）; //获取arrayvar中每个li的宽度arrayTotalValue = listWidth.reduce（function（a，b）{return a + b;}）; //添加上面的arrayvar totalWidth = Math.ceil（arrayTotalValue）; //舍入总值（总宽度> menuWidth）{$（'li'）。css（{color：'＃FF0000'}）}  

  ul {display：flex;填充：50px 0; box-sizing：border-box; align-items：center;宽度：700px; overflow：visible;} li {text-decoration：none;颜色：＃000000; font-size：20px; text-transform：capitalize;边框：1px纯黑色;保证金：20px 10px; list-style：none;}  

 < script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script><ul> < li class =menu-item> menu1< / li> < li class =menu-item> menu2< / li> < li class =menu-item> menu3< / li> < li class =menu-item> menu4< / li> < li class =menu-item> menu5< / li> < li class =menu-item> menu6< / li> < li class =menu-item> menu7< / li> < li class =menu-item> menu8< / li> < li class =menu-item> menu9< / li> < li class =menu-item> menu10< / li> < li class =menu-item> menu11< / li> < li class =menu-item> menu12< / li> < li class =menu-item> menu13< / li> < li class =menu-item> menu14< / li> < li class =menu-item> menu15< / li> < li class =menu-item> menu16< / li>< / ul>  

以下是我的代码的 codepen 链接。

任何建议和答案都会有所帮助。

解决方案

首先，我会调整CSS以使其更容易。我将启用换行（删除flexbox ）并通过设置 max-height 隐藏所有不在第一行的元素溢出：隐藏。然后我将添加 click 元素，只有在隐藏了至少一个元素时才会看到这些元素。我使用伪元素技巧来隐藏它。

  ul {padding：5px 40px 5px 5px; box-sizing：border-box;溢出：隐藏;最大高度：55像素; position：relative;} li {display：inline-block; text-decoration：none;颜色：＃000000; font-size：20px; text-transform：capitalize;边框：1px纯黑色;保证金：10px的; list-style：none; position：relative;} li：last-child :: after {content：;位置：绝对的;左：102％;宽度：100vw;顶部：-10px;底部：-10px;背景：#FFF; z-index：2;}。点击{background：red;位置：相对;宽度：40像素;高度：40像素;保证金左：自动;边距：-65px; margin-right：5px;}  

 < script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script><ul> < li class =menu-item> menu1< / li> < li class =menu-item> menu2< / li> < li class =menu-item> menu3< / li> < li class =menu-item> menu4< / li> < li class =menu-item> menu5< / li> < li class =menu-item> menu6< / li> < li class =menu-item> menu7< / li> < li class =menu-item> menu8< / li> < li class =menu-item> menu9< / li> < li class =menu-item> menu10< / li> < li class =menu-item> menu11< / li> < li class =menu-item> menu12< / li> < li class =menu-item> menu13< / li> < li class =menu-item> menu14< / li>< / ul>< div class =click>< / div>  

现在你可以添加一些JS，以便在点击红色方块时通过调整它们的位置来显示隐藏的元素，使它们看起来像一个下拉菜单。要选择隐藏元素，您需要测试其 offesetTop 值是否大于某个值。

< pre class =snippet-code-js lang-js prettyprint-override> var h = 30; var val = 0; $（'。click'）。click（function（）{if（$ （'ul'）。hasClass（'show'））{$（'ul'）。removeClass（'show'）; $（'ul li.menu-item'）。removeClass（'drop'）return;} val = 0; $（'ul li.menu-item'）。each（function（）{var of = $（this）.offset（）。top - $（'ul'）。offset（）。top; if（ of> 20）{$（this）.addClass（'drop'）; $（this）.css（'top'，'calc（100％+'+ val +'px）'）; val + = h; } $（'ul'）。addClass（'show'）;}）}）

  ul {padding：5px 40px 5px 5px; box-sizing：border-box;溢出：隐藏;最大高度：55px; position：relative;} ul.show {overflow：visible;} li {display：inline-block; text-decoration：none;颜色：＃000000; font-size：20px; text-transform：capitalize;边框：1px纯黑色;保证金：10px 8px; list-style：none; position：relative;} li.drop {display：block;位置：绝对; right：0;} li：last-child :: after {content：;位置：绝对;左：102％;宽度：100vw;上：-10px;底部：-10px;背景：#fff; z-index：2;} li.drop :: after {content：none;}。click {background：red;位置：相对;宽度：40px;身高：40px; margin-left：auto; margin-top：-65px; margin-right：5px;}  

 < script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script><ul> < li class =menu-item> menu1< / li> < li class =menu-item> menu2< / li> < li class =menu-item> menu3< / li> < li class =menu-item> menu4< / li> < li class =menu-item> menu5< / li> < li class =menu-item> menu6< / li> < li class =menu-item> menu7< / li> < li class =menu-item> menu8< / li> < li class =menu-item> menu9< / li> < li class =menu-item> menu10< / li> < li class =menu-item> menu11< / li> < li class =menu-item> menu12< / li> < li class =menu-item> menu13< / li> < li class =menu-item> menu14< / li>< / ul>< div class =click>< / div>  

上面是一个简化的例子，我使用了一些你可以轻松调整或动态的硬编码值。

I am working on a menu. I have a menu with many list items. What I want is when I resize the browser to small screens like (laptops and tablets) I want the overflowing li's to collapse and appear in a dropdown.

Actual Menu.

Responsive view for the same menu.

Here is the code structure.

var menuWidth = $('ul').width(); //get actual width of ul

var listWidth = $.map($('ul li'), function(val) {
  return $(val).width();
}); //get width of each individual li in an array
var arrayTotalValue = listWidth.reduce(function(a, b) {
  return a + b;
}); //adding above array
var totalWidth = Math.ceil(arrayTotalValue); //rounding up total value

if (totalWidth > menuWidth) {
  $('li').css({
    color: '#FF0000'
  })
}

ul {
  display: flex;
  padding: 50px 0;
  box-sizing: border-box;
  align-items: center;
  width: 700px;
  overflow: visible;
}

li {
  text-decoration: none;
  color: #000000;
  font-size: 20px;
  text-transform: capitalize;
  border: 1px solid black;
  margin: 20px 10px;
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="menu-item">menu1</li>
  <li class="menu-item">menu2</li>
  <li class="menu-item">menu3</li>
  <li class="menu-item">menu4</li>
  <li class="menu-item">menu5</li>
  <li class="menu-item">menu6</li>
  <li class="menu-item">menu7</li>
  <li class="menu-item">menu8</li>
  <li class="menu-item">menu9</li>
  <li class="menu-item">menu10</li>
  <li class="menu-item">menu11</li>
  <li class="menu-item">menu12</li>
  <li class="menu-item">menu13</li>
  <li class="menu-item">menu14</li>
  <li class="menu-item">menu15</li>
  <li class="menu-item">menu16</li>
</ul>

Here is the codepen link of my code.

Any kind of suggestion and answers will be helpful.

解决方案

First, I would adjust the CSS in way to make it easier. I will enable the wrap (remove the flexbox) and hide all the elements that aren't in the first row by setting a max-height and overflow:hidden. Then I will add the click element that we will see only when there is at least one element hidden. I used a pseudo element trick to hide it.

ul {
  padding:5px 40px 5px 5px;
  box-sizing: border-box;
  overflow: hidden;
  max-height:55px;
  position:relative;
}

li {
  display:inline-block;
  text-decoration: none;
  color: #000000;
  font-size: 20px;
  text-transform: capitalize;
  border: 1px solid black;
  margin:10px;
  list-style: none;
  position:relative;
}

li:last-child::after {
  content:"";
  position:absolute;
  left:102%;
  width:100vw;
  top:-10px;
  bottom:-10px;
  background:#fff;
  z-index:2;
}

.click {
  background:red;
  position:relative;
  width:40px;
  height:40px;
  margin-left:auto;
  margin-top:-65px;
  margin-right:5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="menu-item">menu1</li>
  <li class="menu-item">menu2</li>
  <li class="menu-item">menu3</li>
  <li class="menu-item">menu4</li>
  <li class="menu-item">menu5</li>
  <li class="menu-item">menu6</li>
  <li class="menu-item">menu7</li>
  <li class="menu-item">menu8</li>
  <li class="menu-item">menu9</li>
  <li class="menu-item">menu10</li>
  <li class="menu-item">menu11</li>
  <li class="menu-item">menu12</li>
  <li class="menu-item">menu13</li>
  <li class="menu-item">menu14</li>
</ul>
<div class="click"></div>

Now you may add some JS in order to show the hidden elements when clicking the red square by adjusting their position to make them look like a dropdown. To select a hidden elements you need to test if its offesetTop value is bigger than a certain value.

var h = 30;
var val = 0;

$('.click').click(function() {
  if ($('ul').hasClass('show')) {
    $('ul').removeClass('show');
    $('ul li.menu-item').removeClass('drop')
    return;
  }
  val = 0;
  $('ul li.menu-item').each(function() {
    var of = $(this).offset().top - $('ul').offset().top;
    if ( of > 20) {
      $(this).addClass('drop');
      $(this).css('top', 'calc(100% + ' + val + 'px)');
      val += h;
    }
    $('ul').addClass('show');
  })
})

ul {
  padding: 5px 40px 5px 5px;
  box-sizing: border-box;
  overflow: hidden;
  max-height: 55px;
  position: relative;
}

ul.show {
  overflow: visible;
}

li {
  display: inline-block;
  text-decoration: none;
  color: #000000;
  font-size: 20px;
  text-transform: capitalize;
  border: 1px solid black;
  margin: 10px 8px;
  list-style: none;
  position: relative;
}

li.drop {
  display: block;
  position: absolute;
  right: 0;
}

li:last-child::after {
  content: "";
  position: absolute;
  left: 102%;
  width: 100vw;
  top: -10px;
  bottom: -10px;
  background: #fff;
  z-index: 2;
}

li.drop::after {
  content: none;
}

.click {
  background: red;
  position: relative;
  width: 40px;
  height: 40px;
  margin-left: auto;
  margin-top: -65px;
  margin-right: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="menu-item">menu1</li>
  <li class="menu-item">menu2</li>
  <li class="menu-item">menu3</li>
  <li class="menu-item">menu4</li>
  <li class="menu-item">menu5</li>
  <li class="menu-item">menu6</li>
  <li class="menu-item">menu7</li>
  <li class="menu-item">menu8</li>
  <li class="menu-item">menu9</li>
  <li class="menu-item">menu10</li>
  <li class="menu-item">menu11</li>
  <li class="menu-item">menu12</li>
  <li class="menu-item">menu13</li>
  <li class="menu-item">menu14</li>
</ul>
<div class="click"></div>

The above is a simplified example where I used some hardcoded values that you can easily adjust or make dynamic.

这篇关于将溢出的li包装到下拉列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！