One interesting feature of my site is that when you click on a certain button in the navigation bar, a small grey tab drops down from the top to provide information about the site. The code I used for this animation is as follows:
var aboutMenu = function(){
$(".aboutButton").click(function(){
$("body").animate({top: "42px"}, 200);
$(".about").animate({top: "0px"}, 200);
});
}
$(document).ready(aboutMenu);
The concept behind this code is to move the entire body of the website and its content down by 42 pixels. Meanwhile, the content within the "about" class moves down to ensure it is visible on the screen. However, there's an issue when clicking on the "About" button - only the gray tab moves down while the rest of the body stays put. This causes the tab to block access to the rest of the navigation bar.
Additional relevant code can be found below:
HTML:
<div class = "about">
<p align = "center">placeholder text</p>
</div>
and the actual link:
<li> <a class = "aboutButton">About this website</a></li>
CSS:
.about{
background-color: gray;
top: -42px;
height: 42px;
position: fixed;
}
.about p{
color: white;
}
.aboutButton{
cursor: pointer;
}