1. Tutorials
  2. Creating a Fullscreen Overlay Menu Bar using HTML and CSS Tutorial

Creating a Fullscreen Overlay Menu Bar using HTML and CSS Tutorial

Submitted by oretnom23 on Thursday, March 2, 2023 - 16:52.

In this tutorial, we will tackle about creating a simple Fullscreen Overlay Navigation Menu using only HTML and CSS. The tutorial's main purpose is to provide the students and beginners with a reference for understanding how to build a useful component of the website such as the Overlay Navigation Menu without using any Library or JS scripts. Here, I will be providing a simple web application's web page source code scripts to demonstrate the goal of this tutorial.

What is a Fullscreen Overlay Navigation Menu?

The Fullscreen Overlay Navigation Menu is a type of website or web application navigation menu design where the menu is shown in front of the whole page screen. It is commonly used for websites where most of the visitors are using mobile devices, tablets, or some other smaller screen devices. This navigation menu design commonly comes with a navigation menu button or menu button to show and hide it.

How can we create a Fullscreen Overlay Navigation Menu using HTML and CSS only?

Fullscreen Overlay Navigation Menu can be achieved even without using any other library or JS scripts. With the help of the HTML checkbox input, we can trigger the display and hide the functionality of the menu bar. Then we can simply create our desired design of the Overlay Navigation Menu using some CSS properties and pseudo-elements. Check out the sample web application scripts that I created and provided below to understand more about how to create a Fullscreen Overlay Navigation Menu using HTML and CSS.

Sample Web App Page

The script below is a simple web application page that contains a simple fullscreen overlaying navigation menu that can be triggered to show/hide by the floating menu button. The navigation menu and buttons also contain a simple transition.

Creating the Interface

The script below is the HTML file script of the web page which contains the elements that are relevant to this demonstration such as the static page content and the navigation menus.

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>JS - Sortable List Items</title>
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
  11.     <link rel="stylesheet" href="style.css">
  12. </head>
  14.     <!-- Fullscreen Overlay Menu Bar Container -->
  15.     <div class="ovelay-menu-container">
  16.         <input type="checkbox" id="overlay-menu-check">
  17.         <div class="overlay-menu-wrapper">
  18.             <div class="overlay-menus">
  19.                 <ul>
  20.                     <li>
  21.                         <a href="#">Home</a>
  22.                     </li>
  23.                     <li>
  24.                         <a href="#">Pricing</a>
  25.                     </li>
  26.                     <li>
  27.                         <a href="#">Gallery</a>
  28.                     </li>
  29.                     <li>
  30.                         <a href="#">About Us</a>
  31.                     </li>
  32.                     <li>
  33.                         <a href="#">Contact Us</a>
  34.                     </li>
  35.                 </ul>
  36.             </div>
  37.         </div>
  38.         <div class="overlay-menu-btn">
  39.             <label for="overlay-menu-check">
  40.                 <span class="material-symbols-outlined show">menu</span>
  41.                 <span class="material-symbols-outlined close">close</span>
  42.             </label>
  43.         </div>
  44.     </div>
  45.     <!-- End of Fullscreen Overlay Menu Bar Container -->
  46.     <main>
  47.         <section>
  48.             <h1 class="text-center page-title"><b>Click the Floating Navigation Menu Button to Open the Fullscreen Overlay Navigation Menu Bar</b></h1>
  49.         </section>
  50.     </main>
  51. </body>
  52. </html>

Default Stylesheet

By default, we will be using the following CSS script as the design web page content.

  1. @import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
  2. body *{
  3.     font-family: 'Rubik', sans-serif;
  4. }
  5. /**
  6. Page Design
  7. */
  8. body,
  9. html{
  10.     height: 100%;
  11.     width: 100%;
  12.     margin: 0;
  13.     padding: 0;
  14. }
  15. body{
  16.     background-color: #B9F3E4;
  17. }
  18. main{
  19.     height: 100%;
  20.     width: 100%;
  21.     display: flex;
  22.     flex-direction: column;
  23.     justify-content: center;
  24.     align-items: center;
  25. }
  26. section{
  27.     width:760px;
  28.     margin: auto;
  29.     padding: 1em 2em;
  30.     text-align: center;
  31. }
  32. @media (max-width: 760px) {
  33.     section{
  34.         width:100%;
  35.     }
  36. }
  37. .page-title{
  38.     color: #fff;
  39.     text-shadow: 1px 1px 3px #000;
  40.     font-size: 35px;
  41. }

The script above will output the following image

Fullscreen Overlay Menu Bar using HTML and CSS

Designing the Navigation Menu

The following script is the CSS code for the design of the navigation menu's container/wrapper, list, and anchors. Using this, the navigation menu won't be visible yet on the page load.

  1. /**
  2. Overlay Menu Style
  3. **/
  4. .overlay-menu-wrapper{
  5.     position: fixed;
  6.     top:50px;
  7.     left: 0;
  8.     width: 0;
  9.     height: 0;
  10.     background: #000000da;
  11.     display: flex;
  12.     align-items: center;
  13.     justify-content: center;
  14.     flex-direction: column;
  15.     overflow: hidden;
  16.     transition: height .3s ease-in-out, width .3s ease-in-out, top .3s ease-in-out;
  17. }
  18.  
  19. .overlay-menus{
  20.     width: 300px;
  21.     transform: scale(0);
  22.     transition: transform .3s ease-in-out .3s;
  23. }
  24. .overlay-menus ul{
  25.     display: flex;
  26.     width: 100%;
  27.     padding: .5em 1em;
  28.     flex-direction: column;
  29.     align-items: center;
  30. }
  31. .overlay-menus ul>li{
  32.     width: 100%;
  33.     list-style: none;
  34.     text-align: center;
  35.     padding: .5em 1em;
  36. }
  37. .overlay-menus ul>li>a{
  38.     text-decoration: none;
  39.     font-size: 25px;
  40.     color:#fff;
  41.     font-weight: 600;
  42. }
  43. .overlay-menus ul>li,
  44. .overlay-menus ul>li>a{
  45.     transition: all .2s ease-in-out;
  46. }
  47. .overlay-menus ul>li:hover{
  48.     transform: scale(1.5);
  49. }
  50. .overlay-menus ul>li:hover a{
  51.     color: #B9F3E4;
  52. }
  53. @media (max-width:460px) {
  54.     .overlay-menus{
  55.         width: 100%;
  56.     }
  57.    
  58. }

If you wish to check the design of the overlay navigation menu, you can temporarily add the following CSS script and remove it after your customization or before continuing to the next step of this tutorial.

  1. .overlay-menu-wrapper{
  2.     top: 0;
  3.     width: 100%;
  4.     height: 100%;
  5. }
  6. .overlay-menus {
  7.     transform: scale(1);
  8. }

The script above will output the following image

Fullscreen Overlay Menu Bar using HTML and CSS

Designing the Navigation Menu Button

Next, the script below is the CSS script for the design of the floating navigation button and hides the checkbox that will be used for triggering the menu to show/hide.

  1. /**
  2. Overlay Menu Button Style
  3. **/
  4. .overlay-menu-btn{
  5.     position: fixed;
  6.     top:50px;
  7.     left:0;
  8.     border-top-right-radius: 50px;
  9.     border-bottom-right-radius: 50px;
  10.     background-color: #000;
  11.     display: flex;
  12.     justify-content: end;
  13.     padding: .5em 1em;
  14. }
  15. .overlay-menu-btn>label{
  16.     color: #fff;
  17.     cursor: pointer;
  18.     width: 100%;
  19.     transition: all .2s ease ;
  20. }
  21. .overlay-menu-btn:hover>label{
  22.     padding: 1em .5em;
  23. }
  24. input#overlay-menu-check,
  25. .overlay-menu-btn>label>.close{
  26.     display: none;
  27. }

The script above will output the following image

Fullscreen Overlay Menu Bar using HTML and CSS

Creating the Menu Show/Hide Functionality

Finally, the following script is used for making the floating menu button functional whereas it will display or hide the fullscreen overlay navigation menu.

  1.     /*
  2.     If Overlay Fullscreen menu is shown
  3.     */
  4.    
  5.     input#overlay-menu-check:checked ~ .overlay-menu-wrapper{
  6.         width: 100%;
  7.         height: 100%;
  8.         overflow-y: auto;
  9.         top:0;
  10.     }
  11.    
  12.     input#overlay-menu-check:checked ~ .overlay-menu-wrapper .overlay-menus{
  13.         transform: scale(1);
  14.     }
  15.     input#overlay-menu-check:checked ~ .overlay-menu-btn{
  16.         background-color: #fff;
  17.     }
  18.     input#overlay-menu-check:checked ~ .overlay-menu-btn>label{
  19.         color: #000;
  20.     }
  21.     input#overlay-menu-check:checked ~ .overlay-menu-btn>label>span.material-symbols-outlined{
  22.         content:'close';
  23.     }
  24.     input#overlay-menu-check:checked ~ .overlay-menu-btn>label>.show{
  25.         display: none;
  26.     }
  27.     input#overlay-menu-check:checked ~ .overlay-menu-btn>label>.close{
  28.         display: block;
  29.     }

The script above will output the following image

Fullscreen Overlay Menu Bar using HTML and CSS

Overall, the script above will result in the following:

Fullscreen Overlay Menu Bar using HTML and CSS

There you go! I have also provided the source code zip file of the web application that I created for this tutorial on this site. It is free to download. To download it, just click the download button located below this tutorial's content.

I hope this Creating a Fullscreen Overlay Menu Bar using HTML and CSS Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Happy Coding =)

Tags
HTML
css
HTML and CSS Tutorial
CSS Tutorial
Overlay Menu
Fullscreen Overlay Menu
CSS Overlay Element
Menu Bar
Navigation Menu

Add new comment

About text formats
  • 750 views