如何根据导航栏将超级菜单居中？

Question

我有导航栏与下拉导航项目使用mega菜单。

超级菜单是position:absolute。

如何将mega菜单对齐到页面的中心？我对所有的导航项目都使用了相同的mega菜单组件，所以我需要动态地执行它。

Code Sandbox demo

​

.dropdown-menu {
  position: absolute;
  width: 400px;
  height: 300px;
}

.nav-item {
  margin-left: 60px;
}

.list-1 {
  position: absolute;
  left: 0px;
}

.list-2 {
  position: absolute;
  left: 100px;
}

.list-3 {
  position: absolute;
  left: 200px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<ul class="nav nav-pills">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <ul class="list-1">
        <li class="option-1">option 1</li>
        <li class="option-2">option 2</li>
      </ul>

      <ul class="list-2">
        <li>option 3</li>
        <li>option 4</li>
      </ul>

      <ul class="list-3">
        <li>option 5</li>
        <li>option 6</li>
      </ul>
    </div>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a
        >
        <div class="dropdown-menu">
          <ul class="list-1">
            <li class="option-1">option 1</li>
            <li class="option-2">option 2</li>
          </ul>

          <ul class="list-2">
            <li>option 3</li>
            <li>option 4</li>
          </ul>

          <ul class="list-3">
            <li>option 5</li>
            <li>option 6</li>
          </ul>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a
          class="nav-link dropdown-toggle"
          data-toggle="dropdown"
          href="#"
          role="button"
          aria-haspopup="true"
          aria-expanded="false"
          >Dropdown</a
        >
        <div class="dropdown-menu">
          <ul class="list-1">
            <li class="option-1">option 1</li>
            <li class="option-2">option 2</li>
          </ul>

          <ul class="list-2">
            <li>option 3</li>
            <li>option 4</li>
          </ul>

          <ul class="list-3">
            <li>option 5</li>
            <li>option 6</li>
          </ul>
        </div>
      </li>
    </ul>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

​

Answer 1

如果我没弄错你的问题，那么你想要把超大菜单放在屏幕的中央。您可以使用margin: auto来实现这一点。如果您还能提供CSS，这可能会帮助我们更好地回答您的用例

Answer 2

如果你想居中超级菜单，这是绝对的位置。

您应该在其上使用此css将其居中

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Answer 3

绝对定位的元素是相对于它们最近的非静态祖先进行定位的，所以我们需要使包含它们的列表项成为静态的。这将使用非静态定位将定位上下文移动到列表之外的任何位置。在这个演示中，它是body元素。

然后，我们需要强制覆盖一些位置和翻译样式。需要注意的是，top值是硬编码的。这可能需要根据定位上下文进行更改，并且可能不适用于所有响应场景。

另一个小贴士:你可能不应该让你的内部列表绝对定位。这是一个麻烦的策略，可能也不是必须的。考虑使用flexbox。

​

.dropdown-menu {
  position: absolute;
  width: 400px;
  height: 300px;
}

.nav-item {
  margin-left: 60px;
}

.list-1 {
  position: absolute;
  left: 0px;
}

.list-2 {
  position: absolute;
  left: 100px;
}

.list-3 {
  position: absolute;
  left: 200px;
}

.mega li {
  position: static;
}

.mega li .dropdown-menu {
  transform: translateX(-50%) !important;
  left: 50% !important;
  top: 40px !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<ul class="nav nav-pills mega">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <ul class="list-1">
        <li class="option-1">option 1</li>
        <li class="option-2">option 2</li>
      </ul>

      <ul class="list-2">
        <li>option 3</li>
        <li>option 4</li>
      </ul>

      <ul class="list-3">
        <li>option 5</li>
        <li>option 6</li>
      </ul>
    </div>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a
        >
        <div class="dropdown-menu">
          <ul class="list-1">
            <li class="option-1">option 1</li>
            <li class="option-2">option 2</li>
          </ul>

          <ul class="list-2">
            <li>option 3</li>
            <li>option 4</li>
          </ul>

          <ul class="list-3">
            <li>option 5</li>
            <li>option 6</li>
          </ul>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a
          class="nav-link dropdown-toggle"
          data-toggle="dropdown"
          href="#"
          role="button"
          aria-haspopup="true"
          aria-expanded="false"
          >Dropdown</a
        >
        <div class="dropdown-menu">
          <ul class="list-1">
            <li class="option-1">option 1</li>
            <li class="option-2">option 2</li>
          </ul>

          <ul class="list-2">
            <li>option 3</li>
            <li>option 4</li>
          </ul>

          <ul class="list-3">
            <li>option 5</li>
            <li>option 6</li>
          </ul>
        </div>
      </li>
    </ul>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

​