jquery - Slide out Menu Sidebar -

jquery - Slide out Menu Sidebar -

i trying larn how create slide out menu. far have basic html , css. however, i'm not sure of best approach write jquery. @ present, slides out not slide back. or utilize 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 speech in hartford, conn., in 1871, said there "in connecticut, on average, 1 liquor shop every 40 voters, , 3 every christian church. in city, stated in _hartford times_, recently, have 5 hundred liquor shops, , 1 1000000 8 hundred , twenty-five one thousand dollars were, lastly year, paid intoxicating drinks. cry, appeal, came me city, few days since, after wise: 'our young men going destruction, , want influence, counsel, , prayers, 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 { 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>

$(document).ready(function() {

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

heres fiddle

jquery html css3 menu tabslideout