Dropdown Menu avec Flexbox

5 février 2020 à 22:54:51

Bonsoir,

Je cherche à faire apparaître le dropdown menu dans une navbar avec un Flexbox pour chaque Item :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>CSS Test</title>
    </head>

    <body>
        <style>
            html, body{
                height: 100%;
                margin: 0;
            }

            .main_container{
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            .navbar_container{
                display: flex;
                width: 100%;
                height: 60px;
                align-items: center;
                justify-content: space-around;
                background-color: darkblue;
            }

            .dropdown_menu{
                display: flex;
                flex-direction: column;
                position: relative;
                height: 100%;
                width: 100%;
                align-items: center;
                justify-content: center;
                background-color: darkblue;
                transition: background-color 0.25s;
            }

            .dropdown_menu:hover{
                background-color: rgb(0,116,255);
            }

            .dropdown_menu *{
                font-family: sans-serif;
                font-weight: bold;
                font-size: 25px;
                color : white;
                text-decoration: none;
            }

            .dropdown_menu_content{
                display: none;
                background-color: darkblue;
                width: 100%;
                position: absolute;
            }

            .dropdown_menu:hover .dropdown_menu_content{
                display: flex;
                flex-direction: column;
            }
        </style>

        <div class="main_container">
            <div class="navbar_container">
                <div class="dropdown_menu">
                    <a href="#" class="menu_item">Menu Item</a>
                    <div class="dropdown_menu_content">
                        <a href="#" class="link_item">Link Item</a>
                        <a href="#" class="link_item">Link Item</a>
                    </div>
                </div>

                <div class="dropdown_menu">
                    <a href="#" class="menu_item">Menu Item</a>
                    <div class="dropdown_menu_content">
                        <a href="#" class="link_item">Link Item</a>
                        <a href="#" class="link_item">Link Item</a>
                    </div>
                </div>

                <div class="dropdown_menu">
                    <a href="#" class="menu_item">Menu Item</a>
                    <div class="dropdown_menu_content">
                        <a href="#" class="link_item">Link Item</a>
                        <a href="#" class="link_item">Link Item</a>
                    </div>
                </div>

                <div class="dropdown_menu">
                    <a href="#" class="menu_item">Menu Item</a>
                    <div class="dropdown_menu_content">
                        <a href="#" class="link_item">Link Item</a>
                        <a href="#" class="link_item">Link Item</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Actuellement, les "Link Item" se supperposent sur les "Menu Item", je souhaiterai qu'ils apparaissent en-dessous..

Merci d'avance

Développeur Web autodidacte HTML5/CSS3/JS + C# (ASP.NET Core) / Python (Django)

Nyut

6 février 2020 à 16:49:50

Bonjour

Ajoute a ton css

.dropdown_menu_content{
  ...
  top:60px;
 }

arf !!!

Valenciano

6 février 2020 à 19:45:04

Salut @helpclic,

Merci de ta réponse, ça fonctionne cependant je ne comprends pas pourquoi le :

position: absolute;

ne place pas le dropdown_menu_content directement en dessous de la navbar.. alors que partout sur le web il est dit de mettre le conteneur parent en relative puis l'enfant en absolute..

D'autre part j'essaye d'appliquer une transition translateY mais elle ne fonctionne pas :

.dropdown_menu{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: darkblue;
    transition: background-color 0.25s;
}

.dropdown_menu_content{
    display: none;
    background-color: darkblue;
    width: 100%;
    transform: translateY(0%);
    position: absolute;
    transition: transform 1s;
}

.dropdown_menu:hover .dropdown_menu_content{
    display: flex;
    flex-direction: column;
    transform: translateY(-100%);
}

Développeur Web autodidacte HTML5/CSS3/JS + C# (ASP.NET Core) / Python (Django)