Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to hide a navigation menu on scroll down with CSS and JavaScript?
We had already seen how to create a slide−down navigation bar when we scroll down here. In this article, we will learn how to hide the Navigation menu on scroll down using CSS and JavaScript.
A navigation bar contains the list of elements present in your website; including the links to navigate through the website. It usually the first pit-stop for the users visiting the website who seek guidance to walk through the website.
In CSS
#navlist{top:0;}
In JavaScript
document.getElementById("navlist").style.top = "-60px";
document.getElementById("navlist").style.top = "0";
To hide a navigation menu after scrolling, you need to use HTML, CSS, and JavaScript. This kind of sliding navbar looks attractive on a site by using javascript you can easily make the navigation bar slidable when the user scrolls down.
In this example we are creating a webpage displaying “hideable navigation bar” on scrolling down the page. A menu with 4 options is pop up into the current page.
Example.html
Create an HTML file in which we will define the structure (view) of the page. In this example Using the HTML code we are creating the current page with required text, a slidable navigation bar and empty navigation Links for the menu.
<body>
<!-- heading -->
<article>
<h1 style="color: rgb(0, 128, 85)">Tutorialspoint Easy to Learn</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea impedit a harum illo excepturi consectetur quisquam, voluptatum, distinctio sit eius et dolore quae eos optio dolorum. Esse pariatur similique voluptates?
</p>
</article>
<!-- Navbar items -->
<div id="navlist">
<a href="#">Home</a>
<a href="#">Tutorials</a>
<a href="#">AboutUs</a>
<a href="#">Contact Us</a>
</div>
<!-- for creating scroll -->
<div class="scrollable" style="padding: 15px 15px 4500px"></div>
Example.css
Add css style to give background and hover effect on the slidable navigation bar for a better look. In this example we are styling the link of navigation bar if we hover on the link background color will be change.
<style>
/* styling article tag component */
article {
position: fixed;
margin-left: 10px;
margin-top: 15px;
}
/* styling navlist */
#navlist {
background-color: #0074d9;
position: fixed;
left: 45%;
top: 0;
width: auto;
display: block;
transition: top 0.3s;
}
/* styling navlist anchor element */
#navlist a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 13px;
}
/* hover effect of navlist anchor element */
#navlist a:hover {
background-color: white;
color: black;
}
/*media query */
@media screen and (max-width: 600px) {
#navlist {
background-color: #0074d9;
position: fixed;
left: 30%;
top: -70px;
width: auto;
display: block;
transition: top 0.3s;
}
}
</style>
Example.js
Using JavaScript, we can perform validation and handle event on the page. In this example we are adding the scrolling effect, if the page will be scrolled more than or equal to 20 then the slidable navigation bar will hidden from the page. If the scrolled become less than 20 then the slidable navigaton bar will be visible on the page.
<script>
// When the user scrolls down then
// slide down the navbar
window.onscroll = function() {
scroll();
};
function scroll() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
document.getElementById("navlist").style.top = "-60px";
} else {
document.getElementById("navlist").style.top = "0";
}
}
</script>
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>
Slide Down a Navigation Bar on Scroll using HTML CSS and JavaScript
</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
/* styling article tag component */
article {
position: fixed;
margin-left: 10px;
margin-top: 15px;
}
/* styling navlist */
#navlist {
background-color: #0074d9;
position: fixed;
left: 45%;
top: 0;
width: auto;
display: block;
transition: top 0.3s;
}
/* styling navlist anchor element */
#navlist a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 13px;
}
/* hover effect of navlist anchor element */
#navlist a:hover {
background-color: white;
color: black;
}
/*media query */
@media screen and (max-width: 600px) {
#navlist {
background-color: #0074d9;
position: fixed;
left: 30%;
top: -70px;
width: auto;
display: block;
transition: top 0.3s;
}
}
</style>
</head>
<body>
<!-- heading -->
<article>
<h1 style="color: rgb(0, 128, 85)">Tutorialspoint Easy to Learn</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea impedit a harum illo excepturi consectetur quisquam, voluptatum, distinctio sit eius et dolore quae eos optio dolorum. Esse pariatur similique voluptates?
</p>
</article>
<!-- Navbar items -->
<div id="navlist">
<a href="#">Home</a>
<a href="#">Tutorials</a>
<a href="#">AboutUs</a>
<a href="#">Contact Us</a>
</div>
<!-- for creating scroll -->
<div class="scrollable" style="padding: 15px 15px 4500px"></div>
<script>
// When the user scrolls down then
// slide down the navbar
window.onscroll = function() {
scroll();
};
function scroll() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
document.getElementById("navlist").style.top = "-60px";
} else {
document.getElementById("navlist").style.top = "0";
}
}
</script>
</body>
</html>
4K+ Views
