在导航栏中，如何将下拉菜单水平延伸到页面容器的宽度？

问题描述 投票：0回答：2

目前，当我将鼠标悬停在导航栏中的某个项目上时，会打开一个水平下拉菜单，如下所示（请注意下拉菜单的宽度）： enter image description here

我想实现什么？

我想像下一张照片一样水平扩展下拉菜单，但仅限桌面版本。我希望下拉菜单与我已在导航栏中使用的容器（Bootstrap 已与容器类一起使用的容器）一样宽，并且我还将在整个网站正文中使用该菜单。

在照片（蒙太奇/拼贴）中，我正在使用 Chrome 检查导航栏，以突出显示导航栏容器，让您了解我希望下拉菜单的宽度。 enter image description here

你能帮助我并告诉我如何获得它吗？我尝试过几次，但都失败了。

样式.css：

* {
    box-sizing: border-box;
}



/* Navbar */
.navbar {
    background-color: #000033;
    padding: 0 !important; /* Imposta il padding verticale invece dell'altezza */
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1000;
    box-sizing: border-box;
}

/* Stile logo e testo del brand */
.logo {
    height: 80px;
    margin-right: 10px;
}

.brand-text {
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    line-height: 1;
}

.fondazione {
    font-size: 0.80em;
    font-weight: normal;
    letter-spacing: 0.28em;
}

.surname {
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* Rettangolino colorato sotto le voci della navbar */
.navbar-nav .nav-link {
    color: #ffffff;
    margin-right: 10px;
    padding: 0 10px; /* Gestisce lo spazio tra i link */
    line-height: normal; /* Usa la line-height di default */
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.navbar-nav .nav-link:hover::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px; /* Altezza del rettangolo */
    background-color: #459439;
    position: absolute;
    bottom: 0; /* Allineato al bordo inferiore */
    left: 0;
    z-index: 1000;
}

/* Rimozione della freccia dropdown */
.nav-link.dropdown-toggle::after {
    display: none;
}

/* Dropdown orizzontale */
.dropdown-menu-horizontal {
    display: none;
    background-color: #000033 !important;
    padding: 20px !important;
    min-width: 100%;
    border-radius: 0;
    position: absolute;
    left: 0;
    top: 97% !important;
    z-index: 9999;
}

.dropdown-item-horizontal {
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    margin-right: 30px;
    white-space: nowrap;
}

.dropdown-item-horizontal img {
    width: 50px;
    height: 50px;
    margin-right: 15px;
}

.dropdown-item-horizontal:hover {
    color: #d4d4ff;
    text-decoration: none;
}

/* Mostra il menu a tendina al passaggio del mouse */
.nav-item:hover .dropdown-menu-horizontal {
    display: flex;
    justify-content: space-around;
}

/* Responsive per dispositivi mobili */
@media (max-width: 768px) {
    .navbar-expand-md .navbar-nav .nav-link {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

index.html：

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>


<!-- Navbar con logo e link -->
<nav class="navbar navbar-expand-md navbar-dark mb-0">
    <div class="container align-items-stretch">
        <a class="navbar-brand d-flex align-items-center" href="#">
            <img src="img/..." alt="Logo" class="logo">
            <div class="brand-text">
                <span class="fondazione">AAAAAAA</span>
                <span class="surname">XXXX</span>
            </div>
        </a>
        <button class="navbar-toggler align-self-center" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto h-100">
                <li class="nav-item dropdown">
                    <a class="nav-link" href="#" id="fondazioneDropdown">COMPANY</a>
                    <div class="dropdown-menu dropdown-menu-horizontal" aria-labelledby="fondazioneDropdown">
                        <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 1"> Example 1</a>
                        <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 2"> Example 2</a>
                        <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 3"> Example 3</a>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 7</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 8</a></li>
            </ul>
        </div>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>

script.js：

document.addEventListener("DOMContentLoaded", function () {
    const dropdowns = document.querySelectorAll(".nav-item.dropdown");

    dropdowns.forEach(dropdown => {
        dropdown.addEventListener("mouseenter", function () {
            const menu = this.querySelector(".dropdown-menu-horizontal");
            if (menu) menu.style.display = "flex";
        });

        dropdown.addEventListener("mouseleave", function () {
            const menu = this.querySelector(".dropdown-menu-horizontal");
            if (menu) menu.style.display = "none";
        });
    });
});

谢谢你

javascript html css frontend bootstrap-5
2个回答
1
投票

将 Bootstrap 类 

position-relative
添加到 
container
并将 
position-static
添加到 
dropdown
。

将类 

w-100
添加到 
dropdown-menu
。

最后是手机版的垂直视图：

/* Responsive per dispositivi mobili */
@media (max-width: 768px) {
   .navbar-expand-md .navbar-nav .nav-link {
       padding-top: 20px;
       padding-bottom: 20px;
   }

   .dropdown-menu-horizontal {
       flex-direction: column;
   }
}


document.addEventListener("DOMContentLoaded", function () {
    const dropdowns = document.querySelectorAll(".nav-item.dropdown");

    dropdowns.forEach(dropdown => {
        dropdown.addEventListener("mouseenter", function () {
            const menu = this.querySelector(".dropdown-menu-horizontal");
            if (menu) menu.style.display = "flex";
        });

        dropdown.addEventListener("mouseleave", function () {
            const menu = this.querySelector(".dropdown-menu-horizontal");
            if (menu) menu.style.display = "none";
        });
    });
});
* {
    box-sizing: border-box;
}

/* Navbar */
.navbar {
    background-color: #000033;
    padding: 0 !important; /* Imposta il padding verticale invece dell'altezza */
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1000;
    box-sizing: border-box;
}

/* Stile logo e testo del brand */
.logo {
    height: 80px;
    margin-right: 10px;
}

.brand-text {
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    line-height: 1;
}

.fondazione {
    font-size: 0.80em;
    font-weight: normal;
    letter-spacing: 0.28em;
}

.surname {
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* Rettangolino colorato sotto le voci della navbar */
.navbar-nav .nav-link {
    color: #ffffff;
    margin-right: 10px;
    padding: 0 10px; /* Gestisce lo spazio tra i link */
    line-height: normal; /* Usa la line-height di default */
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.navbar-nav .dropdown {
    display: flex;
    flex-direction: column;
}

.navbar-nav .nav-link:hover::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px; /* Altezza del rettangolo */
    background-color: #459439;
    position: absolute;
    bottom: 0; /* Allineato al bordo inferiore */
    left: 0;
    z-index: 1000;
}

/* Rimozione della freccia dropdown */
.nav-link.dropdown-toggle::after {
    display: none;
}

/* Dropdown orizzontale */
.dropdown-menu-horizontal {
    display: none;
    background-color: #000033 !important;
    padding: 20px !important;
    min-width: 100%;
    border-radius: 0;
    position: absolute;
    left: 0;
    top: 97% !important;
    z-index: 9999;
}

.dropdown-item-horizontal {
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    margin-right: 30px;
    white-space: nowrap;
}

.dropdown-item-horizontal img {
    width: 50px;
    height: 50px;
    margin-right: 15px;
}

.dropdown-item-horizontal:hover {
    color: #d4d4ff;
    text-decoration: none;
}

/* Mostra il menu a tendina al passaggio del mouse */
.nav-item:hover .dropdown-menu-horizontal {
    display: flex;
    justify-content: space-around;
}

/* Responsive per dispositivi mobili */
@media (max-width: 768px) {
    .navbar-expand-md .navbar-nav .nav-link {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .dropdown-menu-horizontal {
        flex-direction: column;
    }
}
<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>

<body>


    <!-- Navbar con logo e link -->
    <nav class="navbar navbar-expand-md navbar-dark mb-0">
        <div class="container align-items-stretch position-relative">
            <a class="navbar-brand d-flex align-items-center" href="#">
                <img src="img/..." alt="Logo" class="logo">
                <div class="brand-text">
                    <span class="fondazione">AAAAAAA</span>
                    <span class="surname">XXXX</span>
                </div>
            </a>
            <button class="navbar-toggler align-self-center" type="button" data-toggle="collapse"
                data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto h-100">
                    <li class="nav-item dropdown position-static">
                        <a class="nav-link" href="#" id="fondazioneDropdown">COMPANY</a>
                        <div class="dropdown-menu dropdown-menu-horizontal w-100" aria-labelledby="fondazioneDropdown">
                            <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 1"> Example 1</a>
                            <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 2"> Example 2</a>
                            <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 3"> Example 3</a>
                        </div>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 7</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 8</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

0
投票

您可以将主菜单项的CSS 

position
修改为“静态”，因此子菜单的绝对位置将与主导航
.navbar
（全宽）相关，或者在本例中是导航栏容器（ 
.navbar .container
）设置为 
position:relative
。然后，您可以设置我添加这些行的子菜单的绝对位置，以使其以这种方式工作（仅适用于第一个菜单）。此规则仅影响桌面屏幕宽度（>786px）

@media (min-width: 769px){
  .navbar .container{
    position: relative;
  }

  .navbar-nav > .nav-item{
    position: static;
  }

  .navbar-nav > .nav-item:first-child > div.dropdown-menu {
    margin-top: -1px;
    width: 100%;
  }
}

编辑：我已将 

position:relative
添加到 .navbar .container 中，使其与导航栏容器相同。

document.addEventListener("DOMContentLoaded", function () {
    const dropdowns = document.querySelectorAll(".nav-item.dropdown");

    dropdowns.forEach(dropdown => {
        dropdown.addEventListener("mouseenter", function () {
            const menu = this.querySelector(".dropdown-menu-horizontal");
            if (menu) menu.style.display = "flex";
        });

        dropdown.addEventListener("mouseleave", function () {
            const menu = this.querySelector(".dropdown-menu-horizontal");
            if (menu) menu.style.display = "none";
        });
    });
});
* {
    box-sizing: border-box;
}



/* Navbar */
.navbar {
    background-color: #000033;
    padding: 0px 0; /* Imposta il padding verticale invece dell'altezza */
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1000;
}

@media (min-width: 769px){
  .navbar .container{
    position: relative;
  }

  .navbar-nav > .nav-item{
    position: static;
  }

  .navbar-nav > .nav-item > div.dropdown-menu {
    margin-top: -1px;
    width: 100%;
  }
}


/* Stile logo e testo del brand */
.logo {
    height: 80px;
    margin-right: 10px;
}

.brand-text {
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    line-height: 1;
}

.fondazione {
    font-size: 0.80em;
    font-weight: normal;
    letter-spacing: 0.28em;
}

.surname {
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* Rettangolino colorato sotto le voci della navbar */
.navbar-nav .nav-link {
    color: #ffffff;
    margin-right: 10px;
    padding: 0 10px; /* Gestisce lo spazio tra i link */
    line-height: normal; /* Usa la line-height di default */
    position: relative;
}

.navbar-nav .nav-link:hover::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px; /* Altezza del rettangolo */
    background-color: #459439;
    position: absolute;
    bottom: 0; /* Allineato al bordo inferiore */
    left: 0;
    z-index: 1000;
}

/* Rimozione della freccia dropdown */
.nav-link.dropdown-toggle::after {
    display: none;
}

/* Dropdown orizzontale */
.dropdown-menu-horizontal {
    display: none;
    background-color: #000033 !important;
    padding: 20px !important;
    min-width: 100%;
    border-radius: 0;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 9999;
}

.dropdown-item-horizontal {
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    margin-right: 30px;
    white-space: nowrap;
}

.dropdown-item-horizontal img {
    width: 50px;
    height: 50px;
    margin-right: 15px;
}

.dropdown-item-horizontal:hover {
    color: #d4d4ff;
    text-decoration: none;
}

/* Mostra il menu a tendina al passaggio del mouse */
.nav-item:hover .dropdown-menu-horizontal {
    display: flex;
    justify-content: space-around;
}

/* Responsive per dispositivi mobili */
@media (max-width: 768px) {
    .navbar-expand-md .navbar-nav .nav-link {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>


<!-- Navbar con logo e link -->
<nav class="navbar navbar-expand-md navbar-dark mb-0">
    <div class="container">
        <a class="navbar-brand d-flex align-items-center" href="#">
            <img src="img/..." alt="Logo" class="logo">
            <div class="brand-text">
                <span class="fondazione">AAAAAAA</span>
                <span class="surname">XXXX</span>
            </div>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link" href="#" id="fondazioneDropdown">COMPANY</a>
                    <div class="dropdown-menu dropdown-menu-horizontal" aria-labelledby="fondazioneDropdown">
                        <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 1"> Example 1</a>
                        <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 2"> Example 2</a>
                        <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 3"> Example 3</a>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 7</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Item 8</a></li>
            </ul>
        </div>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>

（注意：要按预期查看此嵌入预览，您可能需要桌面计算机屏幕并单击“运行代码片段”，然后单击“完整页面”）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.