通过使菜单项齐平来改进引导带平行四边形肚脐菜单

Question

我试图调整引导5的导航条菜单为一个滚动菜单与平行四边形的活动菜单项，使用靠近这里。这基本上是可行的，但它看上去没有那么令人印象深刻，主要是因为平行四边形的菜单项并不是彼此齐整。

下面是： all 的菜单项(在火狐浏览器中，尽管Chrome也有问题)打开活动状态时的情况：

​

​

下面是一个CodePen，它再现了问题，并包含了所有相关代码。

标记，因为它显然是一个要求，即使包括一个CodePen：

​

.navbar {
  padding-top: 0;
}

.navbar-nav {
  display: table;
  width: 100%;
}

.navbar-nav>li {
  float: none;
  display: table-cell;
  text-align: center;
  transform: skewX(-40deg);
  -o-transform: skewX(-40deg);
  -moz-transform: skewX(-40deg);
  -webkit-transform: skewX(-40deg);
}

.navbar-nav>li span {
  display: inline-block;
  transform: skewX(40deg);
  -o-transform: skewX(40deg);
  -moz-transform: skewX(40deg);
  -webkit-transform: skewX(40deg);
}

.navbar-nav .show>.nav-link,
.navbar-nav .nav-link {
  color: #000;
  transition: all 350ms ease-out;
  -webkit-transition: all 350ms ease-out;
  -moz-transition: all 350ms ease-out;
  -o-transition: all 350ms ease-out;
}

.navbar-nav .active {
  color: #FFF;
  background: #000;
}

.navbar-nav .nav-link:hover {
  color: #FFF;
  background: #000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg collapsed" aria-label="Eighth navbar example">
  <div class="container">
    <a class="navbar-brand me-6 me-xl-7" href="#">Brand</a>
    <button class="navbar-toggler third-button" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-home" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
                <div class="animated-icon">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </button>

    <div class="collapse navbar-collapse" id="navbar-home">
      <ul class="navbar-nav mb-auto mb-2 my-0 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#"><span>Home</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#"><span>Find My Car</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#"><span>Frequently Asked Questions</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#"><span>Testimonials</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#"><span>Contact Us</span></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

​

为什么我的菜单项拒绝同花顺，我怎样才能做到呢？

Answer 1

最后，我决定使用一种不同的方法来解决这个问题，然后添加margin-left:-2px，这比以前的解决方案更好地集成了引导导航条。标记保持不变，下面是我的CSS：

@media (min-width: 992px) {

  .navbar-nav .nav-item .nav-link {
    padding-right: 0.3em;
    padding-left: 0.3em;
  }

  .navbar-nav {
    display:table; 
    width:100%;
  }

  .navbar li {
    display: table-cell;
  }

  .navbar-nav .nav-item {
    float: left;
    padding-right: 1em;
    padding-left: 1em;
    position: relative;
    cursor: pointer;
    margin-left: -2px;
  }

  .navbar-nav .nav-item::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    transform: skew(-45deg);
    transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out;
  }

  .navbar-nav .nav-item .active::after {
    background-color: var(--bs-body-color);
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    transform: skew(-45deg);
    transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out;
  }

  .navbar-nav .nav-item .nav-link {
    color: var(--bs-body-colour);
    transition: none;
  }

  .navbar-nav .nav-item .active,
  .navbar-nav .nav-item .nav-link:hover {
    color: var(--bs-body-bg);
  }

  .navbar-nav .nav-item:hover::after {
    background-color: var(--bs-body-color);
    color: var(--bs-body-bg);
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    transform: skew(-45deg);
    transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out;
  }
}

请注意，我将其全部放置在md媒体查询中，以确保它只适用于所有较大的设备，防止它干扰非移动设备上的导航条。

Answer 2

它们可能是“同花顺”，也就是说，就CSS而言，我看到的是不同项目之间的白色变化，随着缩放级别的变化--我认为它是部分像素(用CSS术语来说)--一个CSS像素可以由几个屏幕像素组成，这样你就可以得到边缘效果--基本上是舍入错误。

其中一个有点麻烦，就是在每个项目上放置一个伪元素，即1px (CSS像素，即)。比项目更大，有相同的颜色背景。这掩盖了边缘效应。这个片段将此代码添加到问题的代码页中给出的代码中：

.navbar-nav .active::before {
  content: '';
  background-color: #000;
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
  display: inline-block;
}

​

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
  <meta name="apple-mobile-web-app-title" content="CodePen">

  <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">

  <link rel="mask-icon" type="" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">


  <title>CodePen - A Pen by Hashim</title>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">

  <style>
    .navbar {
      padding-top: 0;
    }
    
    .navbar-nav {
      display: table;
      width: 100%;
    }
    
    .navbar-nav>li {
      float: none;
      display: table-cell;
      text-align: center;
      transform: skewX(-40deg);
      -o-transform: skewX(-40deg);
      -moz-transform: skewX(-40deg);
      -webkit-transform: skewX(-40deg);
    }
    
    .navbar-nav>li span {
      display: inline-block;
      transform: skewX(40deg);
      -o-transform: skewX(40deg);
      -moz-transform: skewX(40deg);
      -webkit-transform: skewX(40deg);
    }
    
    .navbar-nav .show>.nav-link,
    .navbar-nav .nav-link {
      color: #000;
      transition: all 350ms ease-out;
      -webkit-transition: all 350ms ease-out;
      -moz-transition: all 350ms ease-out;
      -o-transition: all 350ms ease-out;
    }
    
    .navbar-nav .active {
      color: #FFF;
      background: #000;
      position: relative;
    }
    
    .navbar-nav .nav-link:hover {
      color: #FFF;
      background: #000;
    }
    
    .navbar-nav .active::before {
      content: '';
      background-color: #000;
      position: absolute;
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      top: -1px;
      left: -1px;
      display: inline-block;
    }
  </style>

  <script>
    window.console = window.console || function(t) {};
  </script>



  <script>
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage("resize", "*");
    }
  </script>


</head>

<body translate="no">
  <nav class="navbar navbar-expand-lg collapsed" aria-label="Eighth navbar example">
    <div class="container">
      <a class="navbar-brand me-6 me-xl-7" href="#">Brand</a>
      <button class="navbar-toggler third-button" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-home" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
            <div class="animated-icon">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>

      <div class="collapse navbar-collapse" id="navbar-home">
        <ul class="navbar-nav mb-auto mb-2 my-0 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#"><span>Home</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="#"><span>Find My Car</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="#"><span>Frequently Asked Questions</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="#"><span>Testimonials</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="#"><span>Contact Us</span></a>
          </li>
        </ul>
      </div>
    </div>
  </nav>









</body>

</html>

​

在完整的页面中运行代码片段，并改变缩放级别，以检查没有出现虚假的白色“分界线”。