Javascript Slide Out Panel without JQuery_问答_开发者

Javascript Slide Out Panel without JQuery

开发者 https://www.devze.com 2023-03-09 03:13 出处：网络

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

相关专题：javascript

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.co开发者_开发问答m/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 :D

Thanks for your reply

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.

The thruth is, there is no simple javascript to do that. If you want the popup without any animation, you can write two css styles for 2 different classes and then swich between them with the javascript "onclick" event.

If you want a good looking popup with animation, I would still suggest you use jQuery. It's simple to include the library in your website. And there are tons of plugins for jQuery, that do exactly the thing you want. Of course you can still write your own javascript function to achieve the desired effect, but jQuery was written for that kind of stuff.