0
votes

Comment faire déborder un élément en dehors de l'élément contenant?

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }

            .squares {
                color: rgb(212, 212, 212);
                background-color: #2e2e2e;
                width: 40px;
                height: 40px;
            }

            .dropdown-content {
                width: 100px;
                height: 80px;
                background-color: #7e7e7e;
            }
            #sidebar{
                overflow: visible;
                width: 40px;
                height: 100px;
            }

        </style>
    </head>
    <body>
        
        <div id="sidebar">
            <div class="squares"></div>
            <div class="dropdown-content"></div>
            <div class="squares"></div>
        </div>
        
    </body>
</html>

Comment puis-je faire déborder .dropdown-content sur le côté droit de #sidebar sans changer la taille de la barre latérale? J'ai essayé d'utiliser des flotteurs mais cela n'a pas fonctionné. J'ai également essayé de contenir le premier .squares et le .dropdown-content ensemble, mais cela fait que le second .squares est positionné loin du bas du premier .squares.

css menu

8 commentaires

overflow: visible sur #sidebar devrait faire l'affaire.

Désolé, j'ai oublié d'ajouter cela, mais comment puis-je le faire déborder vers la droite en premier lieu?

Il déborde vers la droite par défaut.

Ce n'est pas le cas car la largeur de la # sidebar est définie sur 40px, ce qui est plus petit que .dropdown-content.

Un extrait de code pourrait être utile.

@AbsoluteBeginner ajouté.

Avez-vous essayé d'utiliser le positionnement absolu?

Je ne l'ai pas fait, mais je pense que ce ne serait pas élégant car je veux en utiliser plusieurs.

3 Réponses :

0
votes

Il vous suffit d'ajouter un positionnement relatif à votre .dropdown-content et un positionnement absolu à l'enveloppe de sous-menu interne. Et puis ajoutez top: 0 et left: 100%

Voici l'exemple de travail pour vous:

<div class="menu">
    <div class="menu-item">Simple Menu</div>
    <div class="menu-item expandable">
        Hover to Expand >
        <div class="sub-menu">
            <div class="sub-menu-item">Sub Menu 1</div>
            <div class="sub-menu-item">Sub Menu 2</div>
            <div class="sub-menu-item">Sub Menu 3</div>
        </div>
    </div>
    <div class="menu-item">Simple Menu</div>
</div>

body {
    margin: 0;
}
.menu {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #212121;
    position: fixed;
    overflow: visible;
}

.menu-item {
    padding: 10px;
    color: #fff;
    cursor: pointer;
}

.expandable {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.expandable:hover > .sub-menu {
    display: inline-flex;
    flex-direction: column;
    width: 200px;
}

.sub-menu {
    position: absolute;
    left: 100%;
    top: 0%;
    display: none;
    width: 200px;
    background: #fff;
    color: #000;
    border: 1px solid;
    cursor: pointer;
}

.sub-menu-item {
    padding: 10px;
}

.sub-menu-item:not(:last-child) {
    padding: 10px;
    border-bottom: 1px solid
}

Dans mon code .expandable est celui qui .expandable des sous-menus, en survolant les éléments, les sous-menus seront ouverts sur le côté droit de cet élément de menu. La position dépendra de l'élément survolé.

Aussi, voici le lien du stylet code si vous souhaitez le bricoler: https://codepen.io/prathameshkoshti/pen/zYBeWEz?editors=0110

Dans celui-ci, j'en ai utilisé plusieurs.

2 commentaires

Merci pour la réponse, fonctionne parfaitement. Je ne savais pas que "position: absolue" était "relative à son ancêtre positionné le plus proche". J'ai une question mais que signifie 100%? De quoi s'agit-il à 100%?

Lorsque vous rendez la position d'un élément absolue / fixe / relative / collante, vous pouvez ajuster la position selon l'exigence. Il y a 4 propriétés pour cela, en haut, en bas, à gauche et à droite. Donc, quand j'ai mentionné que la gauche devrait être de 100%, cela signifie que je veux que cet élément ait un espace de 100% sur le côté gauche (largeur de cet élément), ce qui signifie un espace de 200 px sur le côté gauche par rapport à son conteneur parent. Pour cette raison, il ne se superposera pas sur les éléments du menu principal et ne le fera pas s'afficher sur le côté droit du menu.

0
votes

        .dropdown-content {
            position: relative;
            right: -20px;
            width: 100px;
            height: 80px;
            background-color: #7e7e7e;
        }
    
simple version I do not change the container, and I shift it to the right.
If I understood correctly....

0 commentaires

0
votes

<body>
    <div id="sidebar">
        <div class="squares">1</div>
        <div class="squares">
            2
            <div class="dropdown-content">
            </div>
            
        </div>
        <!-- create another container to house the .dropdown-content --> 
        <div class="squares">3</div>
    </div>
</body>

* {
    margin: 0px;
    padding: 0px;
}

#sidebar {
    overflow: visible;
    width: 40px;
    height: 100px;
}

.squares {
    position: relative;
    border: 1px solid #fff;

    color: rgba(212, 212, 212, 1);
    background-color: #2e2e2e;
    width: 40px;
    height: 40px;
}


.dropdown-content {
    position: absolute;
    left: 40px;
    top: 0px;
    width: 100px;
    height: 80px;
    background-color: #7e7e7e;
    display: none; /* sub menus will not be visible as a result */
   
}

.squares:hover > .dropdown-content {
    display: block;
}

insérez le .dropdown-content dans un .square puis ajoutez display: none au style de .dropdown-content et enfin au survol, changez l'affichage: aucun à bloquer

0 commentaires