How to Use Jquery Right to Left slide/show/animation/hide

Posted by on
How to Use Jquery Right to Left slide/show/animation/hide


---------------------------------Html----------------------------

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <button class="xmenu1" style="background-color: Green;" >
        open</button>
    <div class="xbar1">
        <div class="close" >close</div>
        <div class="containt1" ></div>
    </div>
</body>
</html>

-------------------Script Jquery--------------------------

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 <script type="text/jscript">
        $(document).ready(function () {
            $(".xmenu1").click(function () {
                $(".xbar1").toggle('slide', { direction: 'right' }, 700);
            });
            $(".close").click(function () {
                $(".xbar1").toggle('slide', { direction: 'left' }, 700);
            });
        });
    </script>


---------------------------Style CSS------------------------
.<style type="text/css">
        .xbar1
        {
            height: 300px; width: 200px; display: none; background-color: Red;
        position: absolute; float: left
        }
        .close
        {
            transform:rotate(270deg);
        }
        .containt1
        {
            height:300px;width:150px;
        }
    </style>

Before click button
Right to Left Before Click
Right to left Before  Click
After Click Button Show Slide in Right
After Click Button Show Slide in Right
After Click Button Show Slide in Right

Comments

Post a Comment