主页 / 问题 / 1079728
Accepted
Андрей
Asked:2020-02-08 01:50:52 +0000 UTC2020-02-08 01:50:52 +0000 UTC

如何在 flex 上制作这个

  • 772

在大屏幕上，菜单和语言必须紧贴右边缘，这样就可以了。但是当窗口缩小时，语言\u200b\u200bis的块总是一样大小，溢出时菜单被切断。似乎溢出根本不起作用。

.container {
  display: flex;
}

.header-logo {
  border: 1px solid red;
  width: 200px;
  height: 87px;
  display: flex;
  margin-right: 85px;
}

.header-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

.header-content-menu {
  display: flex;
  flex-basis: 100%;
  justify-content: flex-end;
}

.header-content-menu {
  padding-bottom: 7px;
}

nav {
  width: 100%;
}

nav ul {
  display: flex;
  justify-content: space-between;
  padding-left: 32px;
}

nav a {
  font-weight: 700;
  white-space: nowrap;
}

.header-content-language {
  margin-left: 20px;
  display: flex;
}

.header-content-language a {
  text-transform: uppercase;
  margin-left: 5px;
  font-size: 0.938em;
}

.current-language {
  font-weight: 700;
}

@media (max-width: 1000px) {
  nav {
    overflow: hidden;
  }
  nav ul {
    justify-content: flex-start;
    overflow: hidden;
  }
  nav ul li {
    margin-right: 10px;
  }
  nav ul::after {
    content: "...";
  }
}
<div class="container">
        <div class="header-logo">
        </div>
        <div class="header-content">
          <div class="header-content-menu">
            <nav>
              <ul>
                <li><a href="#">Линк1</a></li>
                <li><a href="#">Линк2</a></li>
                <li><a href="#">Линк3</a></li>
                <li><a href="#">Линк4</a></li>
                <li><a href="#">Линк5</a></li>
                <li><a href="#">Линк6</a></li>
              </ul>
            </nav>
            <div class="header-content-language">
              <a class="current-language" href="#">ru</a>
              <a href="#">ua</a>
            </div>
          </div>
        </div>
      </div>

html

2 个回答

  1. Best Answer

    像这样：

    1. 我们将主容器中带有语言的div取出到logo和菜单中。
    2. 在 flex 中，宽度不是通过 设置的width:，而是通过flex: 在我们的例子中，这些是徽标和语言的固定 flex，并自动计算菜单的大小（我们通过 计数calc()）。
    3. 将溢出添加到菜单容器。
    4. 我们从三个主要元素（徽标、菜单、语言）中删除所有边距，并justify-content在容器上设置缩进。
    5. 我们梳理元素的外观。缩进，list-style:none在菜单上等等。

    缺点：

    因为 我们这里只有 CSS，没有办法巧妙地隐藏菜单项。有的被切断。

    要解决这个问题，你需要连接JS，计算菜单的宽度，计算每个项目的宽度，看看应该隐藏哪些项目。然后通过单击“隐藏”菜单项在下拉列表中显示的“点”附加到“后”按钮。

    在“flex”上，这是无法组织的。

    这是一个如何在一个好的 opencart 模板中组织它的示例：https ://unishop2.tk/

    你可以从他们的 JS 代码中得到这个菜单项的“启发”。

    .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo {
  border: 1px solid red;
  flex: 0 0 200px;
  height: 87px;
  display: flex;
}

.header-content {
  flex: 1 1 calc(100% - 250px);
  display: flex;
}

.header-content-menu {
  display: flex;
  flex-basis: 100%;
  justify-content: flex-end;
}

nav {
  width: 100%;
}

nav ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0px;
}

nav ul li {
  padding: 0px 15px;
}

nav a {
  font-weight: 700;
  white-space: nowrap;
}

.header-content-language {
  display: flex;
  flex: 0 0 50px;
}

.header-content-language a {
  text-transform: uppercase;
  margin-left: 5px;
  font-size: 0.938em;
}

.current-language {
  font-weight: 700;
}

@media (max-width: 1000px) {
  .header-content {
    overflow: hidden;
    position:relative;
  }
  .header-content:after {
    content: "...";
    position: absolute;
    right: 0px;
    top: 0;
    height: 50px;
    width: 20px;
    background: #fff;
    line-height: 50px;
    text-align: right;
  }
}
    <div class="container">
  <div class="header-logo">
  </div>
  <div class="header-content">
    <div class="header-content-menu">
      <nav>
        <ul>
          <li><a href="#">Линк1</a></li>
          <li><a href="#">Линк2</a></li>
          <li><a href="#">Линк3</a></li>
          <li><a href="#">Линк4</a></li>
          <li><a href="#">Линк5</a></li>
          <li><a href="#">Линк6</a></li>
          <li><a href="#">Линк6</a></li>
          <li><a href="#">Линк6</a></li>
          <li><a href="#">Линк6</a></li>
          <li><a href="#">Линк6</a></li>
          <li><a href="#">Линк6</a></li>
          <li><a href="#">Линк6</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="header-content-language">
    <a class="current-language" href="#">ru</a>
    <a href="#">ua</a>
  </div>
</div>

    • 2

  2. 像这样 - 溢出时，它在按钮下折叠

    function responseMenu() {
  $('ul.dropdown-menu li.item').appendTo('ul.menu');
  var items = $('ul.menu li.item');
  var max_width = $('ul.menu').width() - $('ul.menu li.dd_menu').outerWidth();
  var width = 0;
  var hide_from = 0;

  items.css({
    'width': 'auto'
  });

  items.each(function(index) {
    if (width + $(this).outerWidth() > max_width) {
      return false;
    } else {
      hide_from = index;
      width += $(this).outerWidth();
    }
  });
  if (hide_from < items.length - 1) {
    items.eq(hide_from).nextAll('li.item').appendTo('ul.dropdown-menu');
    items.css({
      'width': (max_width / (hide_from + 1)) + 'px'
    });
    $('ul.menu li.dd_menu').show();
  } else {
    $('ul.menu li.dd_menu').hide();
  }
}

$(document).ready(function() {
  $('.top_menu').on('click', '.dropdown-toggle', function() {
    $('.dropdown-menu').toggle();
  });

  $(window).on('resize', function() {
    responseMenu();
  }).trigger('resize');

});
    ul.menu {
  padding: 0;
  margin: 0;
}

ul.menu li {
  list-style-type: none;
  display: block;
  float: left;
  padding: 5px 0;
  text-align: center;
  white-space: nowrap;
}

ul.menu li.dd_menu {
  float: right;
  position: relative;
  display: none;
}

ul.menu ul.dropdown-menu {
  display: none;
  position: absolute;
  top: 35px;
  right: 10px;
  padding: 5px;
  border: #CCC 1px solid;
  border-radius: 5px;
  z-index: 2;
}

ul.menu ul.dropdown-menu li {
  float: none;
}

ul.menu a {
  color: #0b4da2;
  display: inline-block;
  margin: 0 10px;
}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="top_menu">
  <ul class="menu">
    <li class="dd_menu">
      <button class="dropdown-toggle" type="button">+</button>
      <ul class="dropdown-menu"></ul>
    </li>
    <li class="item"><a href="#"><span>Menu item #1</span></a></li>
    <li class="item"><a href="#"><span>Menu item #2</span></a></li>
    <li class="item"><a href="#"><span>Menu item #3</span></a></li>
    <li class="item"><a href="#"><span>Menu item #4</span></a></li>
    <li class="item"><a href="#"><span>Menu item #5</span></a></li>
    <li class="item"><a href="#"><span>Menu item #6</span></a></li>
    <li class="item"><a href="#"><span>Menu item #7</span></a></li>
    <li class="item"><a href="#"><span>Menu item #8</span></a></li>
    <li class="item"><a href="#"><span>Menu item #9</span></a></li>
    <li class="item"><a href="#"><span>Menu item #10</span></a></li>
    <li class="item"><a href="#"><span>Menu item #11</span></a></li>
    <li class="item"><a href="#"><span>Menu item #12</span></a></li>
    <li class="item"><a href="#"><span>Menu item #13</span></a></li>
    <li class="item"><a href="#"><span>Menu item #14</span></a></li>
    <li class="item"><a href="#"><span>Menu item #15</span></a></li>
  </ul>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    • 2

相关问题