代码之家 › 专栏 › 技术社区 › Mohammed Wahed Khan Michael

将溢出的li包装到下拉列表中

css html jquery

Mohammed Wahed Khan Michael · 技术社区 · 6 年前

我正在做菜单。我有一份菜单,上面有很多单子。我想要的是当我把浏览器调整到小屏幕(笔记本电脑和平板电脑)时,我想要溢出 li's 折叠并显示在下拉列表中。

实际菜单。

同一菜单的响应视图。

这是代码结构。

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>

这里是 codepen 我的代码链接。

任何建议和答案都是有帮助的。

2 回复 | 直到 6 年前

Temani Afif 6 年前

首先,我会调整CSS以使其更容易。我把包裹打开( 拆下flexbox )并通过设置 max-height 和 overflow:hidden . 然后我会加上点击元素,只有在至少隐藏一个元素时才会看到。我用了一个伪元素技巧来隐藏它。

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>

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

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 & GT;
<li class=“menu item”>菜单1</li>
<li class=“menu item”>菜单2</li>
<li class=“menu item”>菜单3</li>
<li class=“menu item”>菜单4</li>
<li class=“menu item”>菜单5</li>
<li class=“menu item”>菜单6</li>
<li class=“menu item”>菜单7</li>
<li class=“menu item”>菜单8</li>
<li class=“menu item”>菜单9</li>
<li class=“menu item”>菜单10</li>
<li class=“menu item”>菜单11</li>
<li class=“menu item”>菜单12</li>
<li class=“menu item”>菜单13</li>
<li class=“menu item”>菜单14</li>
&L/UL & GT;
<DIV class=“单击”></DIV>

上面是一个简化的例子,我使用了一些硬编码的值,您可以很容易地调整或使其成为动态的。

Sumit Ridhal 6 年前

我试图解决你的问题。我找到了解决你问题的方法。我的路在下面。

$('.header').click(function() {
  console.log('open menu');
  if ($(this).parent().hasClass('expanded') == false) {
    $(this).parent().addClass('expanded');
  } else {
    $(this).parent().removeClass('expanded');
  }
})

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

ul .header {
  display: none;
}

li {
  margin: 20px 10px;
}

li {
  text-decoration: none;
  color: #000000;
  font-size: 20px;
  text-transform: capitalize;
}

li.cat {
  display: block;
  border: 1px solid black;
}

@media screen and (max-width: 800px) {
  ul {
    display: table-row;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  ul .header {
    display: block;
  }
  ul .cat {
    display: none;
  }
}

.expanded li {
  display: block;
}

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

上面的例子显示了简单的方法。所以你可以合身。