Animate.css Startposition ändern

Question

So verwende ich Bootstrap-Menü mit animate.css (Beispiel - https://jsfiddle.net/wpf9whd6/1/). Das Problem ist, dass wenn ich auf die Schaltfläche klicke, das Menü weit über die Schaltfläche zu laden beginnt. Der gewünschte Effekt wäre, dass er direkt unter dem Button beginnt zu laden, so dass es aussehen würde, als würde das Menü unter dem Button herausrutschen.

JS:

$(document).ready(function(){ 
    $('.dropdown-submenu a.test').on("click", function(e){ 
    $(this).next('ul').toggle(); 
    e.stopPropagation(); 
    e.preventDefault(); 
    }); 
}); 

HTML:

<br /> 
    <br /> 
    <br /> 
    <div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu slideInDown animated"> 
     <li><a tabindex="-1" href="#">HTML</a></li> 
     <li><a tabindex="-1" href="#">CSS</a></li> 
     <li class="dropdown-submenu"> 
     <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
      <li class="dropdown-submenu"> 
      <a class="test" href="#">Another dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">3rd level dropdown</a></li> 
       <li><a href="#">3rd level dropdown</a></li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </div> 

Answer 1

Sie können das Dropdown in ein Element mit der Höhe des Ansichtsfensters oder nur eine Art Höhe, die die Höhe des Dropdown (ein Seitenumbruch oder was auch immer) unterzubringen, ausblenden overflow-y so, dass der Startpunkt des Menüs nach unten rutscht, aber der Boden ist nicht. Verwenden Sie dann z-index, um den Button über das Dropdown zu setzen.

$(document).ready(function() { 
 
    $('.dropdown-submenu a.test').on("click", function(e) { 
 
    $(this).next('ul').toggle(); 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    }); 
 
});

.dropdown-toggle { 
 
    z-index: 1001; 
 
    position: relative; 
 
} 
 

 
.wrapper { 
 
    overflow-y: hidden; 
 
    height: 100vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/> 
 
https://jsfiddle.net/wpf9whd6/#update 
 
<br /> 
 
<br /> 
 
<br /> 
 
<div class="wrapper"> 
 

 
    <div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials 
 
     <span class="caret"></span></button> 
 
    <ul class="dropdown-menu slideInDown animated"> 
 
     <li><a tabindex="-1" href="#">HTML</a></li> 
 
     <li><a tabindex="-1" href="#">CSS</a></li> 
 
     <li class="dropdown-submenu"> 
 
     <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
 
      <li class="dropdown-submenu"> 
 
      <a class="test" href="#">Another dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">3rd level dropdown</a></li> 
 
       <li><a href="#">3rd level dropdown</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

Es scheint, dass man einfach Styling <ul class="dropdown-menu slideInDown animated"> ich in margin-top setzen hinzufügen und es bewegt es, es ist einfach immer Sie beginnen machen, wo wollen . Hier ist die Zeile, die ich verwendete <ul class="dropdown-menu slideInDown animated" style='margin-top:100px !important'>