CSS：由于文本选择矩形和下拉菜单的位置，导航栏中出现问题

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

我正在创建一个导航栏，但当我将鼠标移到某个项目上（例如在公司上）以显示下面的下拉菜单时遇到问题。

enter image description here

问题是绿色选择矩形的位置距离“公司”太近（几乎就像在它下划线一样），相反，我想将绿色矩形定位得更低，并且精确地位于导航栏的下边缘。因此，我还想改进下拉菜单，因为它似乎位于导航栏上方太多并与导航栏重叠。我想要得到的结果是这样的：

enter image description here

我认为问题与：

  • 导航栏的内边距和边距；
  • 导航栏项目的填充和边距（也许它们冲突）
  • 行高；

或者也许问题是其他的，我不知道，我无法解决它。

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;
}

/* 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>

谢谢你

javascript html css flexbox bootstrap-5
1个回答
0
投票

这个想法是使用右侧导航链接的总高度。以下是执行此操作的步骤：

  1. 向容器添加 
    align-items-stretch
    类以垂直拉伸容器的项目，以利用导航链接的完整高度
  2. 将 
    h-100
    类添加到 
    ul
    元素，使其获得其父级的 100% 高度
  3. 将 100% 高度设置为 
    nav-link
    ，然后使用 Flexbox 垂直对齐
.navbar-nav .nav-link {
    height: 100%;
    display: flex;
    align-items: center;
}

  1. 将 

    align-self-center
    类添加到 
    navbar-toggler
    按钮，这样它就不会像其他项目一样垂直拉伸

  2. 下拉定位：

.dropdown-menu-horizontal {
    top: 97% !important;
}
  1. 覆盖导航栏的填充：（在某些地方它显示一些填充。我不知道为什么）
.navbar {
    padding: 0 !important;
}


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 .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;
    }
}
<!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>

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