Menu
I have very basic:
// jQuery Document
var main = function() {
/* Push the body and the nav over by 285px over */
$('#share').click(function() {
$('.menu').animate({
right: "0px"
}, 200);
$('body').animate({
right: "285px"
}, 200);
});
/* Then push them back */
$('html').click(function() {
$('.menu').animate({
right: "-285px"
}, 200);
$('body').animate({
right: "0px"
}, 200);
});
};
$(document).ready(main);
And, I want to do something like this.. If user clicks on menu icon (#share), menu will appear, if menu is visible and user clicks again, it will disappear..How to SIMPLY do it?? i want to do it just as simple as possible... please help me :)
And yeah... I wrote something like if html. click.. then close the menu.. There should be the name of the menu icon (#share)
there is menus css:
.menu {
background-color: #373737;
right: -285px;
height: 100%;
position: fixed;
width: 285px;
}
and html:
<!DOCTYPE html>
<html>
<head>
<title>Minecraft</title>
<link href="styles_m.css" rel="stylesheet" type="text/css">
</head
<body>
<div class="menu">
</div>
<div id="header">
<div id="main">
<a href="minecraft.html"><img src="my_logo.png"></a>
</div>
<div id="share">
<img name="menu" src="my_menu.png">
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js">
</script>
</body
</html>
465
Just use fadeToggle():
$(function () {
$(".showMenu").click(function () {
$(this).next(".menu").fadeToggle(400);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="showMenu">Show Menu</button>
<div class="menu" style="display: none;">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>Or if you wanna make it slide right, you can use animations:
Just use animate():
$(function () {
$(".showMenu").click(function () {
if ($(this).next(".menu").css("left") != "0px")
$(this).next(".menu").animate({
left: 0
}, 1000);
else
$(this).next(".menu").animate({
left: -250
}, 1000);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="showMenu">Show Menu</button>
<div class="menu" style="position: relative; left: -250px;">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>You can also use a variable control to know when to show/hide the element (jsFiddle):
var control = false;
var main = function() {
$('#share').click(function() {
if( control === true ){
$('.menu').animate({
right: "-285px"
}, 200);
$('body').animate({
right: "0px"
}, 200);
control = false;
return;
}
control = true;
$('.menu').animate({ right: "0px" }, 200);
$('body').animate({ right: "285px" }, 200);
});
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
