How To Design - Full Screen Menu
Learn how to create a Responsive Scroll to Shrink Menu with HTML, CSS, and JavaScript.
How To Create a Responsive Scroll To Shrink Menu
Step 1) Add HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Full Screen Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/favicon.png" type="image/png" sizes="16x16">
<link href="https://fonts.googleapis.com/css?family=Play:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<div class="flex-container">
<div class="logo-block">
<a href="#"><img src="logo.png" alt="Site logo" /></a>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="mobile-menu">
<img src="menu.svg" alt="Menu Bar" id="menuBar">
</div>
</div>
</div>
</header>
<div class="container">
<section>
<h2>This example shows <span>how to shrink a navigation bar</span> when the user starts to scroll the page.</h2>
<h3>✔ Scroll Down the page to see the effect.</h3>
<h3>✔ Scroll to the Top to remove the effect.</h3>
</section>
</div>
</body>
</html>Step 2) Add CSS:
/*
This is a Responsive Scroll to Shrink Menu using HTML, CSS, and JavaScript. You can freely use it in your project.
It is made with ♥ by Learn Computer Academy. Visit our website: www.learncomputer.in
*/
/* Normalization */
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Play', sans-serif;
font-size: 16px;
color: #000;
line-height: 1.3;
background-color: #fff;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
display: inline-block;
}
.container {
max-width: 75%;
margin: 0 auto;
}
/* Header Start */
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #e91e63;
padding: 40px 0;
margin: 0;
transition: all .5s ease-in-out;
}
header .flex-container {
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo-block {
width: 180px;
}
header .logo-block img {
width: 100%;
height: auto;
}
header nav {
padding: 0;
margin: 0;
}
header nav ul {
display: flex;
justify-content: space-between;
}
header nav ul li {
padding: 0;
margin: 0 0 0 30px;
}
header nav ul li:nth-child(1){
margin: 0;
}
header nav ul li a {
font-size: 18px;
color: #fff;
line-height: 1.2;
padding: 0;
margin: 0;
}
/* Header when it is shrinked */
header.shrink {
background-color: #3f51b5;
padding: 20px 0;
}
/* Mobile menu : It is hidden by default */
.mobile-menu {
display: none;
}
.mobile-menu #menuBar {
width: 20px;
}
section {
padding: 100px 5%;
background-color: #eee;
margin-top: 200px;
}
section h2 {
font-size: 40px;
color: #000;
line-height: 1.5;
font-weight: 400;
padding: 0;
margin: 0 0 30px 0;
}
section h2 span {
color: #e91e63;
font-weight: 700;
}
section h3 {
font-size: 30px;
color: #555;
font-weight: 400;
padding: 0;
margin: 0 0 30px 0;
}
@media only screen and (max-width: 768px) {
header .flex-container {
flex-direction: column;
}
header nav {
width: 100%;
margin-top: 30px;
}
}
@media only screen and (max-width: 600px) {
header .flex-container {
flex-direction: row;
}
header nav {
display: none;
}
.mobile-menu {
display: block;
}
section {
padding: 30px 5%;
background-color: #eee;
margin-top: 150px;
}
section h2 {
font-size: 24px;
color: #000;
line-height: 1.5;
font-weight: 400;
padding: 0;
margin: 0 0 30px 0;
}
section h3 {
font-size: 20px;
color: #555;
font-weight: 400;
padding: 0;
margin: 0 0 30px 0;
}
}
Step 3) Add JavaScript
<script>
//Get the Header Element
let header = document.querySelector('header');
//scrollFunction will be trigger when page will scroll
window.onscroll = function() {
scrollFunction();
}
function scrollFunction() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
//Add Class
header.classList.add('shrink');
} else {
//Remove Class
header.classList.remove('shrink');
}
}
</script>