An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- Techcrunch
- Team Treehouse
- Abduzeedo
- Vandelay Design
- CSS Globe
- Line 25
- Android Dissected
- Android Headlines
- Dev To
- The Verge
Help Webnuz
Referal links:
Fullscreen Overlay Responsive Navigation Menu Using HTML & CSS
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
Original Link: https://dev.to/foolishdeveloper/fullscreen-overlay-responsive-navigation-menu-using-html-css-37g5
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To