Slide out Menu Sidebar

Question

I am trying to learn how to create a slide out menu. So far I have some basic HTML and CSS. However, I'm not sure of the best approach to write the jQuery. At present, it slides out but will not slide back. Or could I use the CSS Transition?

<div class="side-menu">
   MENU
</div>

<div class="page">

    <a href="#" id="slideMenu"><i class="fa fa-bars"></i></a>

    <p>The Hon. Francis Gillette, in a speech in Hartford, Conn., in 1871, said that there was "in Connecticut, on an average, one liquor shop to every forty voters, and three to every Christian church. In this city, as stated in the _Hartford Times_, recently, we have five hundred liquor shops, and one million eight hundred and twenty-five thousand dollars were, last year, paid for intoxicating drinks. A cry, an appeal, came to me from the city, a few days since, after this wise: 'Our young men are going to destruction, and we want your influence, counsel, and prayers, to help save them.'"</p>

</div>

My CSS:

div.side-menu {
    width:260px;
    height:400px;
    background:#202020;
    position:absolute;
    left:-260px;
    top:0px;
}

div.page {
    width:100%; 
    height:100%;
    position:relative;
    top:0;
    left:0px;
    padding:4%;
    padding-top:100px;
    background:#f4f4f4;
}


div.page a {
    display:block;
    width:50px;
    height:50px;
    -o-border-radius: 100%; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%;    
    background:#666;
    position:absolute;
    top:20px;
    left:4%;
    font-size:24px;
    text-align:center;
    text-decoration:none;
    padding-top:7px;
    color:#fff;
    outline:none;   
 }

p {
    color:#555; 
    font-size:18px;
    font-weight:normal;
}

My jQuery:

    <script>
    $(document).ready(function() {

        $("a").click(function() {
        $(".page").animate({"left": "260px"},"fast");
        });

    });
    </script>

I want the page to slide back in again (Toggle) Therefore, return to left:0px; — user1432315, Nov 03 '14 at 17:27
please leave a comment, if your question is not answered or mark one of these answers as right — Mephiztopheles, Nov 03 '14 at 17:54

Typhomism · Accepted Answer · 2014-11-03T17:42:58.540

1

$(document).ready(function() {

    $("a").click(function() {
        if($(".page").css("left") == "0px"){
            $(".page").animate({"left": "260px"},"fast");
        }
        else{
            $(".page").animate({"left": "0px"},"fast");
        }
    });

});

heres a fiddle

edited Nov 03 '14 at 17:42

answered Nov 03 '14 at 17:35

Typhomism

284
1
3
13

1

because his if clause is wrong... turn it around... doesnt make sense to move to 260 if its already moved to 260 – Mephiztopheles Nov 03 '14 at 17:43
@user1432315 had my if logic wrong, derp. try it now. and that is why you always test before production... – Typhomism Nov 03 '14 at 17:44

score 0 · Answer 2 · answered Nov 03 '14 at 17:52

to make such calls much faster, handle integer as integer and not as string...
you can also replace "fast" with 200 because the normal time is 400 ms and 200 ms is the "fast"

$(document).ready(function() {

    $("a").click(function() {
        if(parseInt($(".page").css("left")) == 0){
            $(".page").animate({left: 260},200);
        }
        else{
            $(".page").animate({left: 0},200);
        }
    });

});

score 0 · Answer 3 · answered Nov 03 '14 at 22:11

Give this A try.

http://jsfiddle.net/qdp7j8mq/

--------------- CSS --------------

div.side-menu {
    width:260px;
    height:400px;
    background:#202020;
    position:absolute;
    left:-260px;
    top:0px;
    z-index:99999;
        -webkit-transition: all .32s ease-in-out;
    -moz-transition: all .32s ease-in-out;
    -ms-transition: all .32s ease-in-out;
    -o-transition: all .32s ease-in-out;
    transition: all .32s ease-in-out;
}

.nav-active{
    left: 0px !important;
        -webkit-transition: all .32s ease-in-out;
    -moz-transition: all .32s ease-in-out;
    -ms-transition: all .32s ease-in-out;
    -o-transition: all .32s ease-in-out;
    transition: all .32s ease-in-out;
}

.body-active{
    left: 260px !important;
        -webkit-transition: all .32s ease-in-out;
    -moz-transition: all .32s ease-in-out;
    -ms-transition: all .32s ease-in-out;
    -o-transition: all .32s ease-in-out;
    transition: all .32s ease-in-out;
}

div.page {
    width:100%; 
    height:100%;
    position:relative;
    top:0;
    left:0px;
    padding:4%;
    padding-top:100px;
    background:#f4f4f4;
        -webkit-transition: all .32s ease-in-out;
    -moz-transition: all .32s ease-in-out;
    -ms-transition: all .32s ease-in-out;
    -o-transition: all .32s ease-in-out;
    transition: all .32s ease-in-out;
}


#slideMenu {
    display:block;
    width:50px;
    height:50px;
    -o-border-radius: 100%; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%;    
    background:#666;
    position:absolute;
    top:20px;
    left:4%;
    font-size:24px;
    text-align:center;
    text-decoration:none;
    padding-top:7px;
    color:#fff;
    outline:none;  
        -webkit-transition: all .32s ease-in-out;
    -moz-transition: all .32s ease-in-out;
    -ms-transition: all .32s ease-in-out;
    -o-transition: all .32s ease-in-out;
    transition: all .32s ease-in-out;
 }

p {
    color:#555; 
    font-size:18px;
    font-weight:normal;
}

--------------- jQuery --------------

$(document).ready(function() {

    $("#slideMenu").click(function() {
    $(".page").toggleClass('body-active');
       $(".side-menu").toggleClass('nav-active'); 
    });

});

--------------- HTML --------------

<div class="side-menu">
   MENU
</div>

<div class="page">

    <div id="slideMenu"><i class="fa fa-bars"></i></div>

    <p>The Hon. Francis Gillette, in a speech in Hartford, Conn., in 1871, said that there was "in Connecticut, on an average, one liquor shop to every forty voters, and three to every Christian church. In this city, as stated in the _Hartford Times_, recently, we have five hundred liquor shops, and one million eight hundred and twenty-five thousand dollars were, last year, paid for intoxicating drinks. A cry, an appeal, came to me from the city, a few days since, after this wise: 'Our young men are going to destruction, and we want your influence, counsel, and prayers, to help save them.'"</p>

</div>

This is simple jQuery. when you click the nav toggle link, it adds css classes to the page and nav menu to slide them both to the left. This allows you to use the same toggle button to open and close the navigation.

I also threw in some CSS3 transitions to smooth it out.

score 0 · Answer 4 · answered Mar 31 '15 at 14:32

0

You can also achieve this without using jquery or javascript with the careful use of check boxes and labels.

As seen in this tutorial https://www.youtube.com/watch?v=d4P8s-mkMvs

answered Mar 31 '15 at 14:32

lil_bugga

81
2
14

Slide out Menu Sidebar

4 Answers4