As a sliding panel, move to the right side and can be done through animate() ;

Code: https://jsfiddle.net/d5cwzn47/

 $(document).ready(function() { $('#button_heder').click(function(){ if ($('#panel').hasClass('visible')) { $('#panel').removeClass('visible'); //alert("Test"); } else { $('#panel').addClass('visible'); //alert("Test"); } }); }); 
 *{ padding: 0; margin: 0;} html,body {height:100%;} #heder{ height: 50px; width:100%; background: #709dca; } #button_heder{ position: absolute; height: 50px; width:50px; background:#417F2C ; top: 0px; right: 0; text-align: center; cursor: pointer; color: #fff; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; text-align: center; } #panel{ background:#27577f; display: inline-block; width: 300px; height: 500px; top: 60px; left: -250px; position: fixed; z-index: 4; opacity: 0.8; cursor: pointer; transition: left 0.3s linear; } #panel.visible { left:0; visibility: visible; opacity: 1; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="heder"> <div id="button_heder">Menu</div> </div> <div id="panel"> 11111111111111 <br><br> 222222222222 </div>

    1 answer 1

    It is enough to replace left with right

     $(document).ready(function() { $('#button_heder').click(function() { if ($('#panel').hasClass('visible')) { $('#panel').removeClass('visible'); //alert("Test"); } else { $('#panel').addClass('visible'); //alert("Test"); } }); }); 
     * { padding: 0; margin: 0; } html, body { height: 100%; } #heder { height: 50px; width: 100%; background: #709dca; } #button_heder { position: absolute; height: 50px; width: 50px; background: #417F2C; top: 0px; right: 0; text-align: center; cursor: pointer; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; text-align: center; } #panel { background: #27577f; display: inline-block; width: 300px; height: 500px; top: 60px; right: -250px; position: fixed; z-index: 4; opacity: 0.8; cursor: pointer; transition: right 0.3s linear; } #panel.visible { right: 0; visibility: visible; opacity: 1; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="heder"> <div id="button_heder">Menu</div> </div> <div id="panel"> 11111111111111 <br> <br>222222222222 </div>

    • Thank. For some reason, it did not work for me, now I found an error: it was necessary in #panel.visible also replace the left:0; right:0; If you can in a few words how to replace the animation panel on animate(); - Petrovich
    • @Petrovich, instead of class call .animate({'right':0}, time) - Grundy