full-screen-overlay-responsive-navigation-bar-html-css-and-javascript

Full Screen Overlay Responsive Navigation Bar Using Html, Css and Javascript

The full-screen overlay responsive navigation bar is a modern and interactive menu style that enhances user experience. This type of navigation bar is widely used in website development because it provides a sleek effect, is easy to implement, and maintains the responsiveness of the website.

Initially, a hamburger menu icon appears on the screen. When clicked, a JavaScript function is triggered, revealing hidden menu options with smooth effects. A close button appears at the top right corner, allowing users to restore the navigation bar.

Read Also:

01. HTML Structure

The following HTML code provides the basic structure of the full-screen overlay responsive navigation bar. We have also included an image in this navigation bar design for just background. You can download the image from this link.

<!DOCTYPE html>
<html>
<head>
    <title>Full Screen Overlay Navigation Bar</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <span class="menu-icon" onclick="openMenu()">☰</span>
        <img src="bg.jpg" class="image"/>
    </div>

    <div class="menu-container" id="navbar">
        <span class="closebtn" onclick="closeMenu()">×</span>
        <div class="menu-content">
            <a href="#">HOME</a>
            <a href="#">PRICE</a>
            <a href="#">ABOUT</a>
            <a href="#">LOGIN</a>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Code Explanation:

Container Div: Holds the hamburger menu icon (☰) and contains an image (bg.jpg) displayed on the page.
Hamburger Menu Icon: Click triggers the openMenu() function to open the navigation menu.
Menu Container (menu-container): Holds the menu items (links: HOME, PRICE, ABOUT, LOGIN) and is initially hidden. It appears when openMenu() is triggered.
Close Button: Click triggers the closeMenu() function to close the menu.
JavaScript (script.js): Controls the menu's visibility by toggling it using the openMenu() and closeMenu() functions.

Read Also:

02. CSS Styling

The following CSS code styles the navigation bar and ensures a smooth transition effect.

body {
    margin: 0;
    padding: 0;
}

.container .image {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

.container .menu-icon {
    position: absolute;
    color: white;
    font-size: 30px;
    left: 42px;
    top: 24px;
    cursor: pointer;
    z-index: 1;
}

.menu-container {
    height: 0%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    transition: 1s ease-in-out;
}

.menu-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.menu-content a {
    padding: 16px;
    text-decoration: none;
    font-size: 18px;
    color: white;
    display: block;
    font-family: sans-serif;
    transition: 0.3s ease-in-out;
}

.menu-content a:hover {
    background-color: #1b998b;
}

.menu-container .closebtn {
    position: absolute;
    top: 36px;
    right: 48px;
    font-size: 30px;
    color: white;
    z-index: 1;
    cursor: pointer;
}

Code Explanation:

Global Styles (body): Removes default margin and padding from the page with margin: 0px; and padding: 0px;.
Image Container (.container .image): Makes the image fill the entire viewport with position: absolute;, width: 100vw;, and height: 100vh;.
Hamburger Menu Icon (.container .menu-icon): Positions the menu icon at the top-left corner using position: absolute;, with a white color, font size of 30px, and a cursor pointer for interaction.
Menu Container (.menu-container): Initially hidden with height: 0%, expands to full height upon activation. It uses position: fixed; to stay fixed at the top of the page with a semi-transparent black background.
Menu Content (.menu-content): Centers the menu items vertically and horizontally, using position: relative; and top: 25%;. It also adds spacing and ensures menu items align properly.
Menu Links (.menu-content a): Styles the links inside the menu with padding, font size of 18px, white color, and a transition effect for smooth hover changes. On hover, the background color changes to #1b998b.
Close Button (.menu-container .closebtn): Positions the close button in the top-right corner with position: absolute;, and gives it a cursor pointer. It also has a font size of 30px and a white color.

Output:

Read Also:

Output:

03. JavaScript Functionality

The following JavaScript functions handle the opening and closing of the overlay navigation menu.

function openMenu() {
    document.getElementById("navbar").style.height = "100%";
}

function closeMenu() {
    document.getElementById("navbar").style.height = "0%";
}

Code Explanation:

closeMenu() Function:
- Targets the element with the ID navbar using document.getElementById("navbar").
- Sets the height of the menu to "0%", effectively hiding the navigation menu.
openMenu() Function:
- Targets the element with the ID navbar using document.getElementById("navbar").
- Sets the height of the menu to "100%", making the navigation menu fully visible.

Read Also:

04. Output Preview

Once implemented, the navigation bar will appear as follows:

Initially, a hamburger menu icon is displayed.
Clicking the menu icon opens the full-screen navigation.
Menu options appear with smooth transitions.
A close button restores the screen to its original state.

Read Also:

YouTube Video

Here, we are attaching a YouTube video from our channel to help you better understand this article and create a more refined web user interface. We have a wide range of videos on our YouTube channel covering user interface design and web development. You can also explore more about web development there.

After reading this article and watching the YouTube video, if you want to download the source code, you can download it from here and modify it according to your needs.

Read Also: