Раскрывающийся список во Flex Navbar загружает содержимое - PullRequest
Новая
       7

Раскрывающийся список во Flex Navbar загружает содержимое

2 голосов
/ 13 апреля 2020

Я пытаюсь добавить выпадающий список в Navbar, однако при наведении курсора на кнопку выпадающего меню (в моем случае Kieli) выравнивание по центру выталкивает остальные элементы. Я приложил фрагмент с примером моей проблемы. 

.Navbar {
    display: flex;
    height: 10vh;
    background-color: lightgray;
    justify-content: space-between;
    align-items: center;
}

.Navbar-menu {
    display: flex;
}

.Navbar-dropdown {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.Navbar-dropdownMenu {
    display: none;
}

.Navbar-dropdown:hover .Navbar-dropdownMenu {
    display: flex;
    flex-direction: column;
}
        <nav class="Navbar">
            <a class="Navbar-brand Navbar-link" href="./">Brand</a>
            <div class="Navbar-menu">
                <a class="Navbar-link Text-uppercase" href="./">Link 1</a>
                <a class="Navbar-link Text-uppercase" href="./">Link 2</a>


                <div class="Navbar-dropdown">
                    <button class="Navbar-dropdownBtn">Kieli</button>
                    <div class="Navbar-dropdownMenu">
                        <a class="Navbar-link" href="../en-fi/">Suomi</a>
                        <a class="Navbar-link" href="../en-gb/">Englanti</a>
                    </div>
                </div>
            </div>
        </nav>

1 Ответ

3 голосов
/ 13 апреля 2020

Содержание загружается, потому что ваше выпадающее меню находится в вашем Navbar-dropdown. При наведении курсора вы отображаете выпадающий контент и, поскольку он занимает вертикальное пространство, он выталкивает контент.

Чтобы избежать этого, вы должны установить позицию выпадающего контента на absolute. Не забудьте установить положение Navbar-dropdown относительно. 

.Navbar {
    display: flex;
    height: 10vh;
    background-color: lightgray;
    justify-content: space-between;
    align-items: center;
}

.Navbar-menu {
    display: flex;
}

.Navbar-dropdown {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
    border: 1px solid red;
}

.Navbar-dropdownMenu {
    background-color: lightgray;
    display: none;
    position: absolute;
    top: 20px;
    right: 0;
}

.Navbar-dropdown:hover .Navbar-dropdownMenu {
    display: flex;
    flex-direction: column;
}
<nav class="Navbar">
    <a class="Navbar-brand Navbar-link" href="./">Brand</a>
    <div class="Navbar-menu">
        <a class="Navbar-link Text-uppercase" href="./">Link 1</a>
        <a class="Navbar-link Text-uppercase" href="./">Link 2</a>


        <div class="Navbar-dropdown">
            <button class="Navbar-dropdownBtn">Kieli</button>
            <div class="Navbar-dropdownMenu">
                <a class="Navbar-link" href="../en-fi/">Suomi</a>
                <a class="Navbar-link" href="../en-gb/">Englanti</a>
            </div>
        </div>
    </div>
</nav>
...