Wie kann ich ein div mit einem Folieneffekt anzeigen/ausblenden? Jquery

Question

Ich bin komplett neu in jQuery und ich versuche, meine eigene Navigationsleiste zu erstellen, die von rechts auf Klick einschiebt.

Ich habe einen Snippet online gefunden, der mein div mit slideToggle anzeigt und versteckt, aber anstatt dass es nur so aussieht, möchte ich, dass es glatt von rechts einrastet. Bitte lassen Sie mich wissen, wo ich falsch liege. Hier

ist die jQuery:

$(document).ready(function(){ 

    $(".menu").hide(); 
    $("#drop-icon").show(); 

    $('#drop-icon').click(function(){ 
    $(".menu").slideToggle(1000); 

Answer 1

Hallo versuchen, den Code unten hoffen, dass Sie für diese suchen. . . Ich habe es mit weniger Code gemacht, aber effektiv. Hoffentlich hilft es.

$('#button1').on('click', function() { 
 
\t $('.inner').toggleClass('visible'); 
 
\t $('.inner').animate({ 
 
\t \t width: 'toggle', 
 
\t 
 
\t },500); 
 
});

.toolbar { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    margin: 0px auto; 
 
    padding: 5px 0px; 
 
\t position: absolute; 
 
} 
 

 
#menu ul li{ 
 
    display: inline; 
 
\t padding:5px; 
 
\t margin:5px; 
 
\t width:100px; 
 
\t 
 
} 
 

 
.inner { 
 
    float: right; 
 
    display: none; 
 
\t padding-right: 5px; 
 
\t background-color:pink; 
 

 
} 
 

 
#button1 {  
 
    margin-right: 5px; 
 
\t justify:center: 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div style="text-align:center;"> 
 
\t <button type="button" id="button1" class="btn btn-success">Menu</button> 
 
    </div> 
 
\t <div class='toolbar'> 
 
    <div class="inner is-hidden"> 
 
     <div id="menu"> 
 
    <ul > 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Page 1</a></li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
    </div> 
 
</div>