This is my HTML code:
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;">
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
</ul>
</div>
And I want to show .menu on click on #showmenu sliding from left to right (with animate). On click again on #showmenu or anywhere in site page, .menu will hide (slide back to left).
I use JQuery 2.0.3
I've tried this, but it doesn't do what I want.
$(document).ready(function() {
$('#showmenu').toggle(
function() {
$('.menu').slideDown("fast");
},
function() {
$('.menu').slideUp("fast");
}
);
});
This question is related to
javascript
jquery
jquery-ui
jquery-effects
That .toggle() method was removed from jQuery in version 1.9. You can do this instead:
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').slideToggle("fast");
});
});
Demo: http://jsfiddle.net/APA2S/1/
...but as with the code in your question that would slide up or down. To slide left or right you can do the following:
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').toggle("slide");
});
});
Demo: http://jsfiddle.net/APA2S/2/
Noting that this requires jQuery-UI's slide effect, but you added that tag to your question so I assume that is OK.