Geek asks and answers

Javascript Slide Panel without jQuery

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

I want to use this function on my website, but I don't want to add a ton of javascript to mit. And so my question is: is there any simple javascript?

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

thanks for your reply

+3
source share
2 answers

I wrote a small 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>

FF4 Chrome. margin-left.

+3

, javascript. - , css , swich javascript "onclick".

, jQuery. . jQuery, , . , javascript , jQuery .

0

More articles:


All Articles