Partage
  • Partager sur Facebook
  • Partager sur Twitter

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

    • Partager sur Facebook
    • Partager sur Twitter

    Dev C/C++ autodidacte sur FreeBSD 12

      6 février 2020 à 16:49:50

      Bonjour 

      Ajoute a ton css

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



      • Partager sur Facebook
      • Partager sur Twitter

      arf !!!

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



        • Partager sur Facebook
        • Partager sur Twitter

        Dev C/C++ autodidacte sur FreeBSD 12

        Dropdown Menu avec Flexbox

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown