CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user782104
user782104

Reputation: 13545

Slide left and hide effect using jquery or CSS

I am working on a slide menu,

Please have a look at the demo site:

kotechweb.com/new_focus/

At left side there is a main menu , when toggle , the words right now is squeeze and hide, here is how I implement:

 var is_closed = false;
                $("#menu_btn").on("click", function () {
                    if (is_closed) {
                        $(".nav_bar ul").css("width", "75%");
                    } else {
                        $(".nav_bar ul").css("width", "0");
                    }
                    is_closed = !is_closed;
                });

CSS:

transition: all 1s;

So the logic is using transition to implement the slide animation, however, this approach the text is squeeze when the width is smaller.

How to make the text slide left as well?

Upvotes: 0

Views: 1071

Answers (4)

Muhammad Ashikuzzaman
Muhammad Ashikuzzaman

Reputation: 3143

Use just jquery and jquery ui : Here At the top reference the bellowed code.

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

And at script only add this :

 $(".nav_bar ul").toggle( "slide");

Or also can use with customized time delay ms unit.

 $( ".nav_bar ul" ).toggle( "slide",2000 );

Upvotes: 1

Nirvik Baruah
Nirvik Baruah

Reputation: 1793

First of all, instead of using CSS transitions use animate in JQuery as it allows for more functionality.

What I actually do for my slide menus is adding overflow-x: hidden to my body tag. I then position the menu outside of the page, so I give it the CSS value of right: 0 to position it just outside the left hand side of the page.

What this allows me to do is that when the user clicks the menu button you can animate the menu to slide out by simply changing the right value, so your final code would look something like this

$("#menu_btn").on("click", function () {
          if (is_closed) {
                        $("#slideoutMenu").animate({right:"[insert width of nav menu]"}, 1000);
                    } else {
                        $("#slideoutMenu").animate({right:"0"}, 1000);
                    }
                    is_closed = !is_closed;
                });

Upvotes: 2

cesare
cesare

Reputation: 2118

You can create a "mask" using 

#menu_right{
 overflow:hidden;
   ... 
}

and move your menu in this way:

var is_closed = false;
            $("#menu_btn").on("click", function () {
                if (is_closed) {
                    $(".nav_bar ul").css("margin-left", "-100%");
                } else {
                    $(".nav_bar ul").css("margin-left", "-0%");
                }
                is_closed = !is_closed;
            });

I think this works like espected

Upvotes: 2

codinator
codinator

Reputation: 1

Maybe you should .hide() the text when the sidebar collapses. Hope this helps.

Upvotes: 0

Related Questions