Results 1 to 2 of 2

Thread: Horizontal animated slide-in menu from the right side

  1. #1
    Join Date
    Sep 2017
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Horizontal animated slide-in menu from the right side

    I am looking for a script that does the following:

    I've got a vertical button on the top right side of the window.
    When you click on this button, a div(with some text, images and a few links) slides out pushing the button with it to the left.

    When you click on the button again it should slide back in.

    A the moment I just got it to appear and dissappear when you click on the button, but I really need it to slide.

    Can anybody help me?

    Thanks.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,734
    Thanks
    46
    Thanked 216 Times in 209 Posts
    Blog Entries
    53

    Default

    Something like this:
    Code:
    <!doctype html>
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Slide div to the left</title>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <script>
    $(document).ready(function()
    {
    $('#leftSlider-button').click(function() {
    if($(this).css("margin-right") == "200px")
    {
    $('.leftSlider').animate({"margin-right": '-=200'});
    $('#leftSlider-button').animate({"margin-right": '-=200'});
    }
    else
    {
    $('.leftSlider').animate({"margin-right": '+=200'});
    $('#leftSlider-button').animate({"margin-right": '+=200'});
    }
    
    });
    });  
    </script>   
    
    
    <style>
    .leftSlider {
    position:  fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: auto;
    color: white;
    background: red;
    margin-right: -200px; 
    }
    #leftSlider-button {
    position: fixed;
    top: 0;
    right: 0;
    width: 100px;
    height: 30px;
    color: white;
    background: green;
    cursor: pointer
    }
    </style>  
      
    </head>
    <body>
     
    <div class="leftSlider">
    <div style="padding: 20px">
    Put your images, links etc. here<br>Put your images, links etc. here
    </div>
    </div>
    
    <div id="leftSlider-button">Button</div>
     
    </body>
    </html>

Similar Threads

  1. Horizontal or Side-by-side iframes
    By wishiwasageek in forum HTML
    Replies: 8
    Last Post: 08-30-2014, 06:48 PM
  2. slide out menu from the side
    By juzbeingme1 in forum HTML
    Replies: 5
    Last Post: 07-14-2013, 12:54 PM
  3. Horizontal animated slide-in menu from the right side
    By Rhinosaurus in forum Looking for such a script or service
    Replies: 6
    Last Post: 07-08-2011, 02:32 PM
  4. Making a slide in menu bar horizontal
    By jmc92 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-22-2009, 04:18 PM
  5. Omni Slide Right side menu with an iframe
    By chips in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-17-2007, 07:26 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •