Menu déroulant - problème d'empilage de z-index

Mon équipe et moi-même rencontrons des problèmes pour empiler un composant Dropdown sur notre page. Essentiellement, nous voulons que la liste déroulante glisse vers le bas sous le top-nav lorsque le bouton est cliqué, mais comme il glisse vers le bas, il doit être positionné au-dessus de tout le reste: le sous-nav et le contenu ci-dessous.Menu déroulant - problème d'empilage de z-index

Actuellement, la liste déroulante est positionnée comme absolue et l'animation est effectuée avec un transform: translateY(). Nous avons essayé de positionner les éléments à l'extérieur (éléments extérieurs <ul>, <nav> et <div id="top-nav"> en caractères gras) avec un index z plus élevé pour que la liste déroulante reste en dessous, mais cela n'a pas fonctionné jusqu'ici.

Nous ne sommes pas non plus en mesure de modifier le CSS ou la structure du contenu div # ci-dessous, mais nous avons une certaine flexibilité quant à l'emplacement structurel de la liste déroulante dans le #header.

EDIT: J'ai essayé de mon mieux pour recréer le scénario avec jsFiddle ici:https://jsfiddle.net/4zaas4sq/

Voici à peu près ce que notre démarquage ressemble:

<body> 
    <div id="header"> 
    <div> 
     **<div id="top-nav">** 
     <div> 
      **<nav>** 
      <ul></ul> 
      **<ul>** 
       <li> 
       <DROPDOWN> 
        <button onClick={toggleDropdown}>Log In</button> 
        <div className={(this.state.show && 'show})> 
        <ul></ul> 
        </div> 
        ... 
       </DROPDOWN> 
       </li> 
       <li></li> 
      </ul> 
      </nav> 
     </div> 
     </div> 
     <div id="sub-nav"> 
     ... 
     </div> 
    </div> 
    </div> 
    <div id="content"> 

    </div> 
</body>

Voici un wireframe représentant l'état final la liste déroulante.

wireframe of final state of dropdown

Toute aide ou suggestion serait appréciée!

Source

2017-10-18 bteng22

Pouvez-vous poster CSS ou attacher jsfiddle? – void

Essayé de mon mieux pour recréer le scénario https://jsfiddle.net/4zaas4sq/ – bteng22

Si vous utilisez jquery, vous pouvez simplement glisserToggle. https://jsfiddle.net/xsrhzvw4/1/ – Confuzing

I utilisé max hauteur property.I n'a pas changé beaucoup de choses dans votre code.In JS code vous verrez principal changes.Let-moi savoir si cette solution est ce que vous want.Thanks :)

dans le code html ajouter class = "hideItem" dans le diviseur avec id = "menu déroulant" comme ceci:

<div id="dropdown" class="hideItem">

code JS

$(document).ready(function() { 
$('#dropdown-button').click(function() { 
    if($("#dropdown").hasClass('hideItem')){ 
     $("#dropdown").css('max-height' , '100%'); 
     $("#dropdown").removeClass('hideItem'); 
     $("#dropdown").addClass('showItem'); 
    }else{ 
     $("#dropdown").css('max-height' , '0'); 
     $("#dropdown").addClass('hideItem'); 
     $("#dropdown").removeClass('showItem'); 
    } 
}); 
});

code css

html, body { 
height: 100%; 
} 

#top-nav { 
    background-color: mediumpurple; 
    width: 100%; 
} 

.nav { 
    display: flex; 
    justify-content: space-between; 
} 

.inner-left-nav { 
    list-style: none; 
    display: flex; 
} 

.inner-left-nav li { 
    padding: 5px; 
    border: 1px solid black; 
    } 
    .inner-right-nav { 
     display: flex; 
     list-style: none; 
     margin: 0; 
    } 

    .inner-right-nav li { 
    align-items: center; 
    padding: 0 5px; 
    } 

    .dropdown-container { 
     display: flex; 
     align-items: center; 
     height: 100%; 
    } 

    #dropdown { 
     position: absolute; 
     top: 70px; 
     right: 100px; 
     max-height: 0; 
     overflow-y: hidden; 
     transition: max-height 1s ease-in-out; 
     background-color: mediumseagreen; 
    } 

    #dropdown.show { 
    visibility: visible; 
    transform: translateY(0%); 
    transition: visibility 0s, transform 0.3s; 
    } 

    #dropdown-button { 
     border: 1px solid black; 
     background: transparent; 
     padding: 0 20px; 
     cursor: pointer; 
    } 

    .dropdown-list { 
     padding: 0; 
     list-style: none; 
    } 
    #sub-nav { 
     display: flex; 
     justify-content: space-between; 
     background-color: grey; 
    } 

    #content { 
     background-color: azure; 
     width: 100%; 
     height: 100%; 
    }

Source

2017-10-18 21:38:44

Menu déroulant - problème d'empilage de z-index

Répondre

Questions connexes