This content originally appeared on DEV Community and was authored by Mystery Code
In this article, I am going to show you how to create a full-screen navigation menu bar. Here on the homepage I have used an image and there is a button in the corner which when clicked will open the menu. The background of the entire menu bar has been blackened and made light and transparent. As a result, the background image can be seen vaguely. A hover effect has been added to each menu. When you click on that menu or move the mouse, the background of the menus will be pink. This has greatly enhanced the beauty of the menus. To cancel this menu bar, if you click on the 'x' at the top, the menu will be hidden again.
Below you can watch the video tutorial to know the complete step by step. Here you can find out which programming code has been used to create which element.
You can download the required source code by clicking on the download button above. In addition, I have given below the necessary source codes, you can copy them from there.
HTML Code:
<div id="myNav" class="overlay">
<!--overlay close button-->
<a href="#" class="closebtn" onclick="closeNav()">×</a>
<!--overlay content -->
<div class="overlay-content">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!--overlay Open button-->
<div class="navMenu" onclick="openNav()">☰ </div>
<div class="myPage">
</div>
CSS Code:
body{
margin: 0;
padding: 0;
}
.myPage{
width: 100%;
height: 720px;
background-size: cover;
background-image: url("image.jfif");
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: 'open sans';
}
/* Nav button */
.navMenu{
position: absolute;
width: 40px;
height: 40px;
top: 30px;
right: 30px;
font-size: 50px;
font-weight: 500;
cursor: pointer;
}
/* overlay (background) */
.overlay{
height: 0%;
width: 100%;
position: fixed;
z-index: 9999999;
left: 0;
top: 0;
background-color: rgb(51,51,51);
background-color: rgba(0,0,0,0.9);
overflow-y: hidden;
transform: 0.5s;
} /* Hight and Width depends on how you want to reveal the overlay ( see Js code ) */
/* Close Button */
.closebtn{
position: absolute;
top: 30px;
right: 30px;
color: rgb(255,255,255);
text-decoration: none;
font-weight: bold;
font-size: 60px;
}
/* Position the content inside the overlay */
.overlay-content{
position: relative;
top: 15%;
margin: 20px;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay-content li{
margin: 7px;
padding: 10px;
}
.overlay-content li a{
color: #fff;
font-size: 30px;
font-family: sans-serif;
margin: 30px;
font-weight: bold;
text-decoration: none;
}
/* Menu Hover Effect */
.overlay-content a:hover,
.overlay-content a:focus{
color: rgb(255,255,255) !important;
background: rgb(236,51,181);
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transform: translateX(-98%) translateY(-25%) rotate(45deg);
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 20px;
}
JavaScript Code:
/* Open */
function openNav(){
document.getElementById("myNav").style.height = "100%";
}
// close
function closeNav(){
document.getElementById("myNav").style.height = "0%";
}
If you like the video tutorial, be sure to like the video and comment on it
This content originally appeared on DEV Community and was authored by Mystery Code
Mystery Code | Sciencx (2021-04-25T14:23:19+00:00) Fullscreen Overlay Responsive Navigation Menu Using HTML & CSS. Retrieved from https://www.scien.cx/2021/04/25/fullscreen-overlay-responsive-navigation-menu-using-html-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.