Position sticky mit Untermenü nicht scrollen

Question

Ich benutze bootstrap v-4 beta2 und ich möchte Sticky Top-Menü mit Untermenü erstellen. Alles funktioniert auf dem Desktop, aber wenn ich auf dem Handy klicke, um das Untermenü zu öffnen, kann ich das ganze Untermenü nicht sehen und wenn ich mit der ganzen Webseite scrolle, aber nicht mit dem Menü. Ich fand heraus, dass ich etwas mit li.dropdown machen musste - als ich Position absolute hinzufügte, wurde es etwas unordentlich, aber ich sah das Menü. Aber ich kann nicht bekommen, was ich tun soll. Hier ist der Code:

li.dropdown:hover>.dropdown-menu { 
 
    display: block; 
 
} 
 

 
li.dropdown { 
 
    position: static; 
 
} 
 

 
.multi-columns { 
 
    width: 100%; 
 
}

<div class="nav-wrapper sticky-top"> 
 
    <div class="container"> 
 
    <nav class="navbar navbar-expand-lg navbar-light text-uppercase"> 
 
     <a class="navbar-brand" href="/"></a> 
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
 
      <span class="navbar-toggler-icon"></span> 
 
      </button> 
 
     <div class="collapse navbar-collapse" id="navbarNav"> 
 
     <ul class="navbar-nav mr-auto"> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="blog.html">Blog</a> 
 
      </li> 
 
      <li class="nav-item active"> 
 
      <a class="nav-link" href="eshop.html">E-shop</a> 
 
      </li> 
 
      <li class="nav-item dropdown"> 
 
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> 
 
      <div class="dropdown-menu multi-columns"> 
 
       <div class="row"> 
 
       <div class="col-md-3"> 
 
        <h3 class="h5">Blog</h3> 
 
        <a class="dropdown-item" href="#">Action</a> 
 
        <a class="dropdown-item" href="#">Another action</a> 
 
        <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
       <div class="col-md-3"> 
 
        <h3 class="h5">Blog 2</h3> 
 
        <a class="dropdown-item" href="#">Action</a> 
 
        <a class="dropdown-item" href="#">Another action</a> 
 
        <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
       <div class="col-md-3"> 
 
        <h3 class="h5">Blog 3</h3> 
 
        <a class="dropdown-item" href="#">Action</a> 
 
        <a class="dropdown-item" href="#">Another action</a> 
 
        <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
       <div class="col-md-3"> 
 
        <h3 class="h5">Blog 4</h3> 
 
        <a class="dropdown-item" href="#">Action</a> 
 
        <a class="dropdown-item" href="#">Another action</a> 
 
        <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     <form action="" class="form-inline"> 
 
      <select class="select2 form-control" style="width: 100%;"> 
 
    
 
       </select> 
 
     </form> 
 
     </div> 
 
    </nav> 
 
    <!-- /.nav --> 
 
    </div> 
 
    <!-- /.container --> 
 
</div> 
 
<!-- /.nav-wrapper -->

Auch wenn auf dem Desktop, wenn ich schweben auf der „Dropdown“ es wird gezeigt, sondern durch die Zeit, die ich bekommen mit der Maus auf das Untermenü es disapears. Soll ich das Untermenü mit margin-top verschieben: -10px oder smh so? Oder gibt es eine Lösung?

bearbeiten

Die Hauptsache ist das Untermenü größer als Ansichtsfenster ist, und dann habe ich einfach kippe Rolle auf diesem

Answer 1

Wenn Sie Ihr Untermenü müssen im aufgenommenen Inhalt blättern, für die Sie die max-height und overflow: scroll; angeben müssen.

Sie müssen auch col-md-3-col-lg-3 innerhalb der dropdown-menu multi-columns Teilung ändern.

CSS

@media (max-width: 991px){ 
.multi-columns{ 
    max-height: 300px; 
    overflow: auto; 
    } 
    } 

Demo Snippet:

li.dropdown:hover>.dropdown-menu { 
 
    display: block; 
 
} 
 

 
li.dropdown { 
 
    position: static; 
 
} 
 

 
.multi-columns { 
 
    width: 100%; 
 
} 
 
@media (max-width: 991px){ 
 
.multi-columns{ 
 
    max-height: 300px; 
 
    overflow: auto; 
 
    } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 

 

 
<div class="nav-wrapper sticky-top"> 
 
    <div class="container"> 
 
    <nav class="navbar navbar-expand-lg navbar-light text-uppercase"> 
 
     <a class="navbar-brand" href="/"></a> 
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
 
      <span class="navbar-toggler-icon"></span> 
 
      </button> 
 
     <div class="collapse navbar-collapse" id="navbarNav"> 
 
     <ul class="navbar-nav mr-auto"> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="blog.html">Blog</a> 
 
      </li> 
 
      <li class="nav-item active"> 
 
      <a class="nav-link" href="eshop.html">E-shop</a> 
 
      </li> 
 
      <li class="nav-item dropdown"> 
 
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> 
 
      <div class="dropdown-menu multi-columns"> 
 
       <div class="row"> 
 
       <div class="col-lg-3"> 
 
        <h3 class="h5">Blog</h3> 
 
        <a class="dropdown-item" href="#">Action</a> 
 
        <a class="dropdown-item" href="#">Another action</a> 
 
        <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
       <div class="col-lg-3"> 
 
        <h3 class="h5">Blog 2</h3> 
 
        <a class="dropdown-item" href="#">Action</a> 
 
        <a class="dropdown-item" href="#">Another action</a> 
 
        <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
       <div class="col-lg-3"> 
 
        <h3 class="h5">Blog 3</h3> 
 
        <a class="dropdown-item" href="#">Action</a> 
 
        <a class="dropdown-item" href="#">Another action</a> 
 
        <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
       <div class="col-lg-3"> 
 
        <h3 class="h5">Blog 4</h3> 
 
        <a class="dropdown-item" href="#">Action</a> 
 
        <a class="dropdown-item" href="#">Another action</a> 
 
        <a class="dropdown-item" href="#">Something else here</a> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     <form action="" class="form-inline"> 
 
      <select class="select2 form-control" style="width: 100%;"> 
 
    
 
       </select> 
 
     </form> 
 
     </div> 
 
    </nav> 
 
    <!-- /.nav --> 
 
    </div> 
 
    <!-- /.container --> 
 
</div> 
 
<!-- /.nav-wrapper -->

Hope this Sie helfen können. Codepen demo link. Danke.

Answer 2

Wenn Sie das nav-Burger-Taste, um ‚Stock‘ wollen, sind auf der Website, wenn Sie scrollen, müssen Sie es als fixiert positionieren.

Edit: Ich habe das Untermenü vergessen, aber in Chrome Devtools ermöglicht mobilen Modus, das funktioniert gut. Ein Klick auf das Untermenü öffnet das Menü und klickt es erneut an, schließt es.

li.dropdown:hover>.dropdown-menu { 
 
    display: block; 
 
} 
 

 
li.dropdown { 
 
    position: static; 
 
} 
 

 
.multi-columns { 
 
    width: 100%; 
 
} 
 

 
.body { 
 
    height: 1000px; 
 
} 
 

 
.nav-wrapper.sticky-top { 
 
    position: fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="body"> 
 
    <div class="container"> 
 
    <div class="nav-wrapper sticky-top"> 
 
     <div class="container"> 
 
     <nav class="navbar navbar-expand-lg navbar-light text-uppercase"> 
 
      <a class="navbar-brand" href="/"></a> 
 
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
     </button> 
 
      <div class="collapse navbar-collapse" id="navbarNav"> 
 
      <ul class="navbar-nav mr-auto"> 
 
       <li class="nav-item"> 
 
       <a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a> 
 
       </li> 
 
       <li class="nav-item"> 
 
       <a class="nav-link" href="blog.html">Blog</a> 
 
       </li> 
 
       <li class="nav-item active"> 
 
       <a class="nav-link" href="eshop.html">E-shop</a> 
 
       </li> 
 
       <li class="nav-item dropdown"> 
 
       <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> 
 
       <div class="dropdown-menu multi-columns"> 
 
        <div class="row"> 
 
        <div class="col-md-3"> 
 
         <h3 class="h5">Blog</h3> 
 
         <a class="dropdown-item" href="#">Action</a> 
 
         <a class="dropdown-item" href="#">Another action</a> 
 
         <a class="dropdown-item" href="#">Something else here</a> 
 
        </div> 
 
        <div class="col-md-3"> 
 
         <h3 class="h5">Blog 2</h3> 
 
         <a class="dropdown-item" href="#">Action</a> 
 
         <a class="dropdown-item" href="#">Another action</a> 
 
         <a class="dropdown-item" href="#">Something else here</a> 
 
        </div> 
 
        <div class="col-md-3"> 
 
         <h3 class="h5">Blog 3</h3> 
 
         <a class="dropdown-item" href="#">Action</a> 
 
         <a class="dropdown-item" href="#">Another action</a> 
 
         <a class="dropdown-item" href="#">Something else here</a> 
 
        </div> 
 
        <div class="col-md-3"> 
 
         <h3 class="h5">Blog 4</h3> 
 
         <a class="dropdown-item" href="#">Action</a> 
 
         <a class="dropdown-item" href="#">Another action</a> 
 
         <a class="dropdown-item" href="#">Something else here</a> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </li> 
 
      </ul> 
 
      <form action="" class="form-inline"> 
 
       <select class="select2 form-control" style="width: 100%;"> 
 

 
      </select> 
 
      </form> 
 
      </div> 
 
     </nav> 
 
     <!-- /.nav --> 
 
     </div> 
 
     <!-- /.container --> 
 
    </div> 
 
    <!-- /.nav-wrapper --> 
 
    </div> 
 
</div>

Answer 3

Bitte beachten Sie die folgende Lösung:

https://jsfiddle.net/ard5rg6f/1/

ich einige Zeilen von jQuery verwendet haben Klasse sticky div hinzuzufügen, wenn das Menü öffnet.

und absolute Position der Position des Dropdown-Menüs entfernt und Scroll zu Sticky Div hinzugefügt.

.nav-wrapper.sticky-top { 
      position: fixed; 
     } 
     .nav-wrapper.sticky-top.menu-opened { 
      overflow: scroll; 
      height: 100vh; 
     } 
     .dropdown-menu { 
      display: block; 
      position: inherit; 
     }