Menu
So I'm trying to make a navigation bar with when you click on a button / span, there appears a div, from the top, to just below the navigation bar. But, when I click 'Homer', First nothing happens, but the second time I click, then it appears WITH ANOTHER EFFECT, which I didn't use anywhere. [I don't know the effect's name, but the div appears from it's own left top corner.]
This is what I want that's going to happen:
When I click on 'Homer' in the navigation bar, a div comes from off the body to on the body. The div has to move to 0px under the navigation bar, so no space between the navigation bar's bottom, and the div(hidden-homer)'s top. When I click again on Homer, the div(hidden-homer) has to go off the screen again, so moving up.
In JSFiddle, it doesn't work at all...
So 2 problems:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="jquery.js"></script>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<div id="nav">
<span>Homer</span>
<span>Marge</span>
<span>Bart</span>
<span>Lisa</span>
<span>Maggie</span>
</div>
<div id="hidden-homer" class="hidden">
<h1>Homer</h1>
<p>Text</p>
</div>
<div id="hidden-marge" class="hidden">
<h1>Marge</h1>
<p>Text</p>
</div>
<div id="hidden-bart" class="hidden">
<h1>Bart</h1>
<p>Text</p>
</div>
<div id="hidden-lisa" class="hidden">
<h1>Lisa</h1>
<p>Text</p>
</div>
<div id="hidden-maggie" class="hidden">
<h1>Maggie</h1>
<p>Text</p>
</div>
<div id="intro">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/The_Simpsons_Logo.svg/300px-The_Simpsons_Logo.svg.png">
</div>
jQuery:
<script>
var main = function() {
$('#nav span:nth-child(1)').click(function() {
$('#hidden-homer').toggle(function() {
$(this).animate({top: '70px'}, 100);
}, function() {
$(this).animate({top: '-70px'}, 100);
});
});
};
$(document).ready(main);
</script>
CSS:
body {
background-color: #0040FF;
padding: 0px;
margin: 0px;
}
a {
outline: none;
}
#nav {
height: 70px;
line-height: 70px;
background-color: #FFBF00;
font-size: 0px;
text-decoration: none;
width: 100%;
text-align: center;
font-family: sans-serif;
margin-bottom: none;
z-index: 1;
}
#nav span {
display: inline-block;
font-size: 35px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
border-right: 3px solid #0040FF;
height: 70px;
cursor: pointer;
color: #0040FF;
text-decoration: none;
font-weight: bold;
}
#nav span:first-child {
border-left: 3px solid #0040FF;
}
#nav span:hover {
background-color: #0040FF;
color: #FFBF00;
}
.hidden {
width: 100%;
height: 200px;
padding-left: 30px;
background-color: #1C1C1C;
color: red;
font-size: 10px;
top: -250px;
position: absolute;
z-index: -1;
border: 2px solid black;
}
img {
height: 200px;
width: 400px;
transform: rotate(10deg);
}
648
Use a variable to keep track of which direction the DIV has to move each time you click on the element in the nav bar.
var up = true;
$("#nav span:nth-child(1)").click(function() {
$("#hidden-homer").animate({
top: up ? "-70px" : "70px"
}, 100);
up = !up;
});
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
