CODEWITHSUNDEEP
javascriptcssslidertransition
Ryan Wegner
Ryan Wegner

Reputation: 147

Slide Menu Transition

I have a left slide in menu. When I load the page it animates and "slides in" automatically. My transition speeds are set in the CSS. The problem is that the call function (see below) has a very unsmooth transition. If I add a speed (300) after .click it doesn't work at all.

The script is :

    <script>
    $(document).ready(function() {
       $('#showLeft').click();
       });</script>

CSS Transitions:

.cbp-spmenu {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;

}

If anyone has any ideas or advice on how to make the slide transition smooth. I'd be much obliged.

Javascript:

//slidemenu.js 
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
            showLeft = document.getElementById( 'showLeft' ),
            body = document.body;

        showLeft.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( menuLeft, 'cbp-spmenu-open' );
            disableOther( 'showLeft' );
        };
        function disableOther( button ) {
            if( button !== 'showLeft' ) {
                classie.toggle( showLeft, 'disabled' );
            }
        }

HTML 

<body class="cbp-spmenu-push">

<!-- Side Menu -->

<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
    <button id="showLeft" class="menuOpen"><i class="icon-reorder icon-small"></i></button>
    <div class="side-panel-top"><a href="index.html" id="logo"><img src="images/backgrounds/logo.png"></a></div>
    <ul class="sidemenu">
        <li><a href="#">Twitter<i class="icon-chevron-right icon-small"></i></a>
            <ul class="sidesub">
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Read</a></li>
                <li><a href="#">Twitter</a></li>
            </ul>
        </li>
        <li><a href="#">Github<i class="icon-chevron-right icon-small"></i></a></li>
        <li><a href="#">Facebook<i class="icon-chevron-right icon-small"></i></a></li>
        <li><a href="#">Github<i class="icon-chevron-right icon-small"></i></a></li>
        <li><a href="#">Facebook<i class="icon-chevron-right icon-small"></i></a></li>
    </ul>
</nav>

Upvotes: 0

Views: 655

Answers (1)

Hulk1991
Hulk1991

Reputation: 3163

Try this inside the $(document).ready(function( ) 

$("#id want to slide").animate({left:'-200px'});

or

 $("#id u want to slide").css({left:'-200px'});

Upvotes: 0

Related Questions