Here's a unique request - I'm trying to create an effect where a div slides up from the bottom of the screen when someone clicks on an image. To give you a better idea, think of the Windows desktop: when you click on the start menu icon, instead of the menu popping up from below, the entire menu bar slides up revealing the full div.
Currently, with my limited knowledge of JS and jQuery from codecademy, I am using the slideUp function. However, this is causing the div to slide down and out of view instead of up as intended. The goal is for the div to slide up when the button is clicked, and if the button is clicked again (or anywhere outside the div), it should slide back down, leaving the top 60px visible just like before.
Take a look at my code:
$('#start').click(function() {
$('#nav').slideUp('slow');
});
HTML:
<div id="nav" class="nav">
<img id="start" src="img/btn_start.png">
</div>
CSS:
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
font-family: Helvetica;
}
.nav {
width: 100%;
min-width: 100%;
height: 500px;
background: #000;
color: #fff;
position: absolute;
bottom: -440px;
text-align: center;
padding: 5px;
box-sizing: border-box;
overflow: auto;
}
.nav ul li {
display: inline;
}
.nav li {
padding: 20px;
margin-top: 80px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#start {
float: left;
}
I appreciate your help in making this work smoothly without any hiccups!