Home/ Questions/Q 5943851
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T16:27:17+00:00

For example : http://www.building58.com/examples/tabSlideOut.html (Click on the Contact button on the right) I Live

  • 0

For example : http://www.building58.com/examples/tabSlideOut.html (Click on the Contact button on the right)

I Live to have this function in my website, but I do not want to add a ton of javascript to mit. And so my question is: Is there any simple javascript to do that?

I found a tutorial that just uses CSS3 http://www.1stwebdesigner.com/tutorials/slide-out-panel-css3/ here but it shows the panel in the Top of the site, when I want it to the left or right 😀

Thanks for your reply

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    i wrote a little example with a sliding panel:

    <html>
    <head>
        <script type="text/javascript" >

        </script>

        <style type="text/css">
            #sliding_box {
                position:absolute;
                width:200px;
                height:200px;
                background-color: red;

                top:200px;
                left:0px;               
                -moz-transition: all 1s ease-in-out;
                -webkit-transition: all 1s ease-in-out;
                -o-transition: all 1s ease-in-out;
                transition: all 1s ease-in-out;                 

                margin-left: -190px;            
            }                       

            #sliding_box:hover{

                margin-left: 0px;
            }

        </style>

    </head>

    <body>
        <div id="sliding_box">
            Sliding box
        </div>
    </body>
</html>

    Tested it with FF4 and Chrome. You can manipulate the sliding animation with the margin-left parameter.

    • 0