CSS Full Screen Overlay Navigation

byCodingFlicks -April 10, 2023

0

Full-screen overlay navigation is a user interface design technique that allows you to create a menu or navigation panel that slides from the side or bottom of the screen to cover the entire visible area of the interface. Today we've created a full-screen overlay navigation that uses the CSS clip-path property. You can get an idea of what the snippet will look like by watching the video demo below. Our website has many more code snippets like CSS Animation Examples, Full Responsive Website Design, JavaScript Projects, etc. To get them, click on the Load More button at the bottom of the homepage.

Video Demo:

I hope you have watched the video demo of the snippet. In this Project, the full-screen overlay navigation will be triggered by clicking on a menu icon or button situated in the top-right corner of the screen. When we click on the menu icon, the overlay navigation occupies the entire area of the screen. Here we used the CSS clip-path property where the "circle" function specifies that the clipping mask should be circular in shape. It creates a circular clipping mask that is positioned 45 pixels from the right edge and 45 pixels from the top of the element, with a radius of 25 pixels.

You May Also Like:

CSS Full Screen Overlay Navigation [ Source Code ]:

To create this snippet, create a new HTML file and CSS file. You can paste the code from the code box below into your files. If the code isn’t working, you can download it from the button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- codingflicks.com -->
   <head>
      <meta charset="utf-8">
      <title>How to create a Full-screen Overlay Navigation</title>
      <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <input type="checkbox" id="active">
      <label for="active" class="btn-area"><i class="fas fa-bars"></i></label>
      <div class="wrapper">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
      </div>
      <div class="content">
         <div class="text-content">
            Fullscreen <span>Navigation</span>
         </div>         
      </div>
   </body>
</html>

ADD CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Alfa Slab One', cursive;
  }
  .wrapper{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(-135deg, #ff0099, #493240);
    clip-path: circle(25px at calc(100% - 45px) 45px);
    transition: all 0.5s ease-in-out;
  }
  #active:checked ~ .wrapper{
    clip-path: circle(80%);
  }
  .btn-area{
    position: absolute;
    z-index: 2;
    right: 20px;
    top: 20px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(-135deg, #ff0099, #493240);
    transition: all 0.5s ease-in-out;
  }
  #active:checked ~ .btn-area{
    background: #fff;
    color: #262626;
  }
  #active:checked ~ .btn-area i:before{
    content: "\f00d";
  }
  .wrapper ul{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style: none;
    text-align: center;
  }
  .wrapper ul li{
    margin: 15px 0;
  }
  .wrapper ul li a{
    position: relative;
    line-height: 50px;
    transition: all 0.3s ease;
    color: none;
    text-decoration: none;
    font-size: 30px;
    font-weight: 500;
    padding: 5px 30px;
    color: #fff;    
  }
  .wrapper ul li a:hover{
    letter-spacing: 5px;
  }
  input[type="checkbox"]{
    display: none;
  }
  .content{
    position: absolute;
    text-align: center;
    width: 100%;
    color: #202020;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;    
  }
  .content .text-content {
	font-size: 85px;
	line-height: 1;
}
.content .text-content span {
	display: block;
	color: deepskyblue;
}

We hope the code is working for you. Our website has many useful snippets that you can use in your projects. If you like the content of our website, please share it with your friends. Thank you for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.