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=".11.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js">
</script>
</body
</html>
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./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js">
</script>
</body
</html>
- Add HTML too or create a jsfiddle demo – Tushar Commented Sep 26, 2015 at 17:23
- @PetrCihlar Check out my answer boss... Doesn't use much variables... – Praveen Kumar Purushothaman Commented Sep 26, 2015 at 17:52
- 1 Yeah, its very good, but I used another.. but thanks a lot bro :) I will give you a point – David Stančík Commented Sep 26, 2015 at 17:54
5 Answers
Reset to default 2Just use fadeToggle():
$(function () {
$(".showMenu").click(function () {
$(this).next(".menu").fadeToggle(400);
});
});<script src="https://ajax.googleapis./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./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);
});
};
$('button').click(function() {
$('.menu').slideToggle();
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="menu" style="display:none;">
<ul>
<li>menu 1</li>
<li>menu1</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</div>HTML 5 data tags can be the solutions. Have a look at my fiddle
$('.showMenu').click(function() {
var active = $('.menu').data('active');
if(active === 'N') {
$('.showMenu').html('Hide Menu');
$('.menu').fadeIn(100);
$('.menu').data('active', 'Y');
} else {
$('.showMenu').html('Show Menu');
$('.menu').fadeOut(100);
$('.menu').data('active', 'N');
}
});<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="showMenu">Show Menu</button>
<div class="menu" data-active="N" style="display: none;">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>You could use the fadeToggle function:
$(document).ready(function() {
$('icon').click(function() {
$('dropdown element').fadeToggle(400);
});
});
An example can be found here: https://www.w3schools./jquery/eff_fadetoggle.asp