如何根据导航栏居中MEGA MENU ?

Question

我有一个导航栏下拉导航项使用mega菜单。

Mega menu isposition:absolute.

我怎么能对齐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

如果我正确理解了你的问题，那么你想要将mega菜单放在屏幕的中心。你可以用margin: auto来实现。如果你能提供CSS，也可以帮助我们更好地回答你的用例

Answer 2

如果你想让绝对位置的超级菜单居中

你应该用这个CSS来居中

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

Answer 3

绝对定位的元素相对于它们最近的非静态祖先进行定位，因此我们需要将包含它们的列表项设置为静态。这会将定位上下文移动到列表外部的非静态定位。在这个示例中，它是body元素。

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

另一个提示:你可能不应该把你的内部列表完全定位。这是一个麻烦的策略，可能没有必要。

.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>