javascript - Flexbox 下拉子菜单

Question

我在获得下拉子菜单效果时遇到问题。我需要获得平板电脑的分辨率（768px），以便子菜单下拉菜单扩展到整个宽度，并且链接（项目）排列在三列中，它已经在使用flex-basis. 我知道要做到这一点，我需要使用设置下拉子菜单position: absolute。

小提示：下拉子菜单中的链接项会动态添加！

但是现在我在<li>使用社交图标设置最后一个菜单项时遇到了问题。

document.addEventListener('DOMContentLoaded', function() {

  // Toggle Nav Menu
  const btn = document.querySelector('#btnToggle');

  btn.addEventListener('click', function(e) {
    e.preventDefault();
    document.body.classList.toggle('nav-show');
    this.classList.toggle('btn-toggle--toggled');
  });

  // Toogle Dropdown Submenu
  let submenuToggle = document.querySelector('.nav__item--has-dropdown');
  let submenu = document.querySelector('.dropdown');

  submenu.classList.add('submenu--hidden');

  function dropdownMenu() {
    submenu.classList.toggle('submenu--hidden');
  }

  submenuToggle.addEventListener('click', dropdownMenu);

  // Highlight current page active menu item.
  const selector = '.nav__link';
  const elems = Array.from(document.querySelectorAll(selector));
  const navigation = document.querySelector('nav');

  function makeActive(evt) {
    const target = evt.target;

    if (!target || !target.matches(selector)) {
      return;
    }

    elems.forEach(elem => elem.classList.remove('active'));
    evt.target.classList.add('active');
  };

  navigation.addEventListener('mousedown', makeActive);
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

.social__link {
  display: block;
}

svg {
  width: 100%;
  display: block;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
}

.header {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

.logo__container {
  padding: .3125rem .3125rem .625rem;
}

.logo {
  display: flex;
  align-items: center;
}

.logo__heart {
  flex-basis: 27%;
}

.hgroup {
  padding-left: .625rem;
}

.headline__light {
  display: none;
}

.headline {
  font-size: 1.25rem;
  text-transform: uppercase;
  margin: 0;
}

.navigation__container {
  align-items: center;
}

.header__item {
  display: flex;
}

.btn-toggle button {
  background: none;
  border: 0;
}

.btn-toggle {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: 1px solid #DDD;
  border-radius: 4px;
  padding: 9px;
  position: absolute;
  top: 24px;
  right: 20px;
  background: none;
}

.btn-toggle .line {
  background: #888;
  border-radius: 10px;
  display: block;
  position: absolute;
  height: 2px;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  opacity: 1;
  top: 50%;
  left: 50%;
  width: 80%;
}

.btn-toggle .line:nth-child(1) {
  margin-top: -6px;
}

.btn-toggle .line:nth-child(3) {
  margin-top: 6px;
}

.btn-toggle--toggled .line:nth-child(2) {
  opacity: 0;
}

.btn-toggle--toggled .line:nth-child(1) {
  margin-top: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.btn-toggle--toggled .line:nth-child(3) {
  margin-top: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav {
  background: #F2EFE8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  max-height: 0;
  overflow: hidden;
  transition: 0.5s max-height;
}

.nav-show .nav {
  max-height: 700px;
}

.nav__list {
  display: flex;
  flex-direction: column;
  background: #F2EFE8;
  border-top: 1px solid #DDD;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.nav__item {
  flex-basis: 100%;
  text-transform: uppercase;
  font-size: .875rem;
  text-align: center;
  border-bottom: 1px solid #888;
  letter-spacing: .0625rem;
}

.nav__item--has-dropdown .arrow::after {
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  vertical-align: middle;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  transform: translateY(-2px);
}

.nav__link {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  color: #222;
  padding: .625rem;
}

.nav__link:hover {
  background: #c2def7;
}

.nav__link.active {
  background: #abd4f8;
}

.dropdown.submenu--hidden {
  display: none;
}

.dropdown {
  display: flex;
  flex-direction: column;
  background: #F2EFE8;
  transition: all 0.5s ease;
  border-top: 1px solid #888;
}

.nav__item.dropdown__item {
  border-bottom: 1px solid #ddd;
}

.dropdown__item:last-child {
  border-bottom: none;
}

.icon__container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.nav__item.social__icon {
  padding: .625rem;
  border-bottom: none;
}

.icon {
  width: 10%;
}

@media only screen and (min-width: 768px) {
  .logo__heart {
    flex-basis: 25%;
  }
  .hgroup {
    flex-basis: 71%;
  }
  .headline__light {
    display: block;
    font-size: .875rem;
    text-transform: none;
  }
  .nav__list {
    flex-grow: 1;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .nav__item {
    width: 33.33%;
    flex-basis: 33.33%;
  }
  .nav__item:nth-of-type(1) {
    order: 1;
  }
  .nav__item:nth-of-type(2) {
    order: 4;
  }
  .nav__item:nth-of-type(3) {
    order: 7;
  }
  .nav__item:nth-of-type(4) {
    order: 2;
  }
  .nav__item:nth-of-type(5) {
    order: 5;
  }
  .nav__item:nth-of-type(6) {
    order: 8;
  }
  .nav__item:nth-of-type(7) {
    order: 3;
  }
  .nav__item:nth-of-type(8) {
    order: 6;
  }
  .nav__item:nth-of-type(9) {
    order: 9;
  }
  .nav__item:nth-of-type(10) {
    order: 10;
    padding: .625rem;
    flex-basis: 100%;
  }
  /* ul li ul {
          visibility: hidden;
          opacity: 0;
          display: none;
        }

          ul li:hover > ul,
          ul li:focus-within > ul,
          ul li ul:hover {
            visibility: visible;
            opacity: 1;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            transition: all 0.5s ease;
            border-top: 1px solid #888;
          } */
  .nav__item--has-dropdown .dropdown {
    position: absolute;
    left: 0;
    right: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .nav__item--has-dropdown~.nav__item.social__icon {
    /*     margin-top: 50px; */
    /*     border-bottom: 1px solid #888; */
  }
  .dropdown__item {
    flex-basis: 33.33%;
    width: 33.33%;
  }
  .icon {
    width: 4%;
  }
}

@media only screen and (min-width: 1024px) {
  .logo {
    width: 100%;
  }
  .logo__heart {
    flex-basis: 30%;
  }
  .hgroup {
    flex-basis: 100%;
    padding: 0;
  }
  .unboxing__trick {
    background-color: #F2EFE8;
    width: 100vw;
    position: relative;
    margin: 0 calc(-50vw + 50%);
    padding: 0 calc(50vw - 50%);
  }
  .btn-toggle {
    display: none;
  }
  .nav {
    max-height: 100%;
    transition: none;
    transition-duration: 0s;
    display: flex;
    flex-direction: row;
    overflow: visible;
  }
  .nav__list {
    flex-direction: row;
    flex-wrap: nowrap;
    border-top: none;
    padding: .625rem 0;
  }
  .nav__item {
    flex-basis: auto;
    width: auto;
    flex-grow: 1;
    flex: 1 1 auto;
    position: relative;
    border-bottom: none;
  }
  .nav__item:after {
    content: '';
    position: absolute;
    width: 1px;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, .20) 50%, hsla(0, 0%, 0%, 0) 100%);
  }
  .nav__item:last-of-type {
    border-right: 0;
  }
  .nav__item:nth-of-type(1) {
    order: 1;
  }
  .nav__item:first-child::after {
    display: none;
  }
  .nav__item:nth-of-type(2) {
    order: 2;
  }
  .nav__item:nth-of-type(3) {
    order: 3;
  }
  .nav__item:nth-of-type(4) {
    order: 4;
  }
  .nav__item:nth-of-type(5) {
    order: 5;
  }
  .nav__item:nth-of-type(6) {
    order: 6;
  }
  .nav__item:nth-of-type(7) {
    order: 7;
  }
  .nav__item:nth-of-type(8) {
    order: 8;
  }
  .nav__item:nth-of-type(9) {
    order: 9;
  }
  .nav__item:nth-of-type(10) {
    order: 10;
    flex: 1 1 8%;
    padding: .3125rem 0;
  }
  .nav__item.social__icon {
    border-bottom: none;
  }
  .nav__link:hover {
    background: none;
    color: #b8795a;
  }
  .nav__link.active {
    background: none;
    color: #b8795a;
  }
  .icon {
    width: 25px;
  }
  /*   nav__item--has-dropdown {
            position: relative;
          }

          .nav__item--has-dropdown > .dropdown {
            display: none;
        }

          .nav__item--has-dropdown:hover > .dropdown {
            display: flex;
          }

          .dropdown {
            porition: absolute;
            width: 100%;
            top: 100%;
            right: 0;
            flex-direction: column;
            background: #000;
        }

          .dropdown__item {
            flex: 1;
        } */
  /*   ul li ul {
            background: #F2EFE8;
            visibility: hidden;
            opacity: 0;
            position: absolute;
            transition: all .25s ease;
            top: 35px;
            left: 0;
          } */
  .dropdown {
    position: absolute;
    background: #F2EFE8;
    width: 100%;
    flex-direction: column;
    border-top: none;
    transition: all 0.5s ease;
    top: 35px;
    left: 0;
  }
  .nav__item.dropdown__item {
    border-bottom: none;
  }
  .nav__item.dropdown__item::after {
    display: none;
  }
  .dropdown__item+.dropdown__item::before {
    content: '';
    position: absolute;
    display: block;
    height: 1px;
    width: 100%;
    background: linear-gradient(to left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, .20) 50%, hsla(0, 0%, 0%, 0) 100%);
  }
  .dropdown .dropdown__item:first-child {
    padding-top: 5px;
  }
}

@supports (position: sticky) {
  .header {
    position: sticky;
    top: 0;
  }
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <script src="app.js"></script>
</head>

<body>
  <header class="header">
    <section class="container">
      <div class="header__container">
        <div class="logo__container header__item">
          <div class="logo">
            <div class="logo__heart">
              <a href="#"><img class="img__logo" src="http://placehold.it/169x160" alt="" title=""></a>
            </div>
            <div class="hgroup">
              <h1 class="headline__bold headline">Company</h1>
              <h2 class="headline__light headline">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.<br> Aenean massa. Cum sociis natoque penatibus et magnis dis</h2>
            </div>
          </div>
        </div>

        <nav class="navigation__container">
          <button class="btn-toggle" id="btnToggle" aria-label="Open / Close Menu">
                            <span class="line"></span>
                            <span class="line"></span>
                            <span class="line"></span>
                        </button>

          <div class="unboxing__trick">
            <div class="nav">
              <ul class="nav__list">
                <li class="nav__item">
                  <a class="nav__link active" href="#">Home</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">About</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Calendar</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Workshops</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Lecture</a>
                </li>
                <li class="nav__item nav__item--has-dropdown">
                  <a class="nav__link arrow" href="#">Article</a>
                  <ul class="dropdown">
                    <li class="nav__item dropdown__item">
                      <a href="#" class="nav__link dropdown__link">Article Title First</a>
                    </li>
                    <li class="nav__item dropdown__item">
                      <a href="#" class="nav__link dropdown__link">Article Title Second</a>
                    </li>
                    <li class="nav__item dropdown__item">
                      <a href="#" class="nav__link dropdown__link">Article Title Third</a>
                    </li>
                    <li class="nav__item dropdown__item">
                      <a href="#" class="nav__link dropdown__link">Article Title Fourth</a>
                    </li>
                  </ul>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Audio</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Youtube</a>
                </li>
                <li class="nav__item">
                  <a class="nav__link" href="#">Contact</a>
                </li>
                <li class="nav__item social__icon">
                  <figure class="icon__container">
                    <div class="icon">
                      <a class="social__link social__link--fb" href="#">
                        <svg version="1.1" id="Social_Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-297.5 123.5 595 595" enable-background="new -297.5 123.5 595 595" reserveAspectRatio="xMidYMid meet" xml:space="preserve">
                                                        <rect x="-64.47" y="206.101" fill="#FFFFFF" width="276.871" height="512.399"/>
                                                        <path id="Facebook" fill="#4460A0" d="M20.309,718.5H-264.66c-18.143,0-32.84-14.707-32.84-32.84V156.342
                                                         c0-18.144,14.698-32.842,32.84-32.842h529.324c18.135,0,32.836,14.698,32.836,32.842V685.66c0,18.137-14.701,32.84-32.836,32.84
                                                         H113.042V488.082h77.34l11.581-89.799h-88.921v-57.328c0-26,7.218-43.713,44.5-43.713l47.548-0.02v-80.316
                                                         c-8.223-1.092-36.449-3.538-69.289-3.538c-68.561,0-115.496,41.851-115.496,118.698v66.222H-57.23v89.798H20.31V718.5H20.309z"/>
                                                    </svg>
                      </a>
                    </div>
                    <div class="icon">
                      <a class="social__link social__link--youtube" href="#">
                        <svg version="1.1" id="Social_Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 36.305 595 595" enable-background="new 0 36.305 595 595" reserveAspectRatio="xMidYMid meet" xml:space="preserve">
                                                        <polygon fill="#FFFFFF" points="214.04,443.136 214.04,214.49 432.938,328.812 "/>
                                                            <path id="Youtube" fill="#CE1312" d="M589.05,214.115c0,0-5.819-41.248-23.65-59.408c-22.629-23.849-47.991-23.959-59.611-25.343
                                                                c-83.265-6.06-208.158-6.06-208.158-6.06h-0.261c0,0-124.895,0-208.157,6.06c-11.641,1.384-36.984,1.495-59.63,25.343
                                                                C11.75,172.873,5.948,214.115,5.948,214.115S0,262.565,0,310.993v45.417c0,48.445,5.949,96.875,5.949,96.875
                                                                s5.802,41.247,23.633,59.407c22.647,23.851,52.379,23.102,65.617,25.591c47.6,4.602,202.301,6.021,202.301,6.021
                                                                s125.024-0.185,208.288-6.246c11.621-1.4,36.983-1.514,59.611-25.36c17.831-18.166,23.652-59.408,23.652-59.408
                                                                S595,404.859,595,356.41v-45.417C595,262.565,589.05,214.115,589.05,214.115z M236.066,411.443l-0.019-168.18l160.762,84.38
                                                                L236.066,411.443z"/>
                                                    </svg>
                      </a>
                    </div>
                  </figure>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </section>
  </header>
</body>

</html>

我在Codepen的代码

标签： javascripthtmlcssflexbox