Hello Friends, Today in this post, we’ll learn How To Create a Full-screen Overlay Navigation | Html5 CSS3 & Javascript. recently I have shared a Cool Hover Animation on Social Media Icons | HTML & CSS, but our today’s topic is Full-screen Overlay Navigation using HTML & CSS | JavaScript.

In this article, we will learn how to create a creative navigation menu, If Are you Looking for creative ways to design your navigation menus? Then you Have Come to the Right Place because In this article I’ll like to share inspiration on fullscreen overlay styles and effects with you.

Use this Full-screen Navigation menu in your next project where you want to show a full-screen navigation menu. Fullscreen Overlay Menu is the most popular and interesting for modern web design. A responsive menu that takes up the entire screen when expanded.

The menu usually activated by clicking or touching the hamburger button. A fullscreen overlay menu gives you the power to overlay and animate one screen on top of another. It can simulate modal windows, dropdown navigation menus, and other on-screen prompts, all without leaving your current screen.

So in this post, I will create a Fullscreen Overlay Navigation Menu to find inspiration for your web design project. And now I’m going to create an attractive but easy fullscreen overlay navigation menu using Html5 CSS3 & Javascript. As you all already know full-page navigation menu, that replaces the current content by pushing it off the screen.

A website menu is a list of linked items that help in navigating between the different pages or sections of a website. Use this hamburger menu to fullscreen overlay navigation menu in your next web project.

Play Video

You will like these Articles / Tutorials / Recipes

Responsive Sidebar Menu with Submenu using HTML, CSS & Bootstrap 4.

Responsive Navbar with Search Box in HTML CSS & JS.

Cool Menu Border Animation Hover Effect.

Fullscreen Overlay Responsive Navigation Menu.

Firstly, on the webpage, there is only the menu button on the top right corner and when you click on that button then the background flow from that corner then shows the navigation links. There is also a background animation when you hover on a particular menu item.

This design is fully created on only HTML, CSS, & JavaScript.
Typically activated by a hamburger button, the fullscreen menu is in its simplest form, an overlay that covers the entirety of the screen giving you lots of space for your menu items.

It is typically used by, but not restricted to, sites with limited space as an effective replacement for the mega-menu. If you’re all looking for some interactive Menu design, this Article has a good source of fullscreen overlay effects that you can explore, I have published this tutorial on how to create a full-width tiled menu with CSS.

If you’re feeling difficult to understand what I am discussing. You can watch a full video tutorial on this article (Fullscreen Overlay Responsive Navigation Menu | Html5 CSS3 & Javascript). In the Post, you will see the fullscreen overlay animation and I hope you’ve understood the basic codes behind creating this Article.

As you know I will use JavaScript in this article. If you like this article and want to get source codes. You can easily get the source codes of this article. To get the source codes you just need to scroll move down. You can use this post in your HTML pages, websites, and projects.

To create a clickable button and activate the fullscreen overlay screen, I’ve used JavaScript. If you know JavaScript, then you can use JavaScript on this program you can use other things, and if you don’t know JavaScript doesn’t worry I will help you with this.

We can take this program to the next level by using advanced JavaScript features. To create this program Firstly, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes into your file.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
  background: RGBA(29, 20, 35, 1);
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
}
main{
  padding:60px 15px;
  text-align: center;
  max-width:100%;
}
h1{
  font-size:2.5em;
  font-weight: 300;
  color:rgba(255,255,255,0.9);
  margin:0 0 10px;
}
aside{
  position: fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:linear-gradient(200deg, #27156e, #6a2a88, #9f4981);
  opacity: 0;
  visibility: hidden;
  -webkit-transition:all .5s ease;
  z-index:2;
}
.open{
  opacity: 1;
  visibility: visible;
}

nav{
  text-align: center;
  height:95vh;
  display: flex;
  -webkit-box-orient: :vertical;
  -webkit-box-direction:normal;
  flex-direction:column;
  -webkit-box-pack:center;
  justify-content:center;
}
 
nav ul{
  margin:0;
  padding:0;
  list-style: none;
}

nav ul li{
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  flex:1;
  line-height:20vh;
}
nav ul li a{
  font-size:1.5em;
  -webkit-transition:all 0.5s ease;
  transition:all 0.5s ease;
  display:block;
  text-decoration: none;
  color:rgba(255,255,255,0.5);
}
nav ul li a:hover{
  color:rgba(255,255,255,0.9);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
nav ul li a:hover:before{
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
nav ul li a:before{
  content:'';
  position: absolute;
  width:50%;
  height:2px;
  bottom:0;
  left:25%;
  background:white;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition:all 0.3s ease-in-out 0s;
  transition:all 0.3s ease-in-out 0s;
}
button{
  padding:15px 40px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.4);
  color:white;
  cursor: pointer;
  border-radius: 8px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
button:hover{
  border:1px solid white;
}
button:focus{
  outline:none;
}
.close{
  position: fixed;
  top:40px;
  right:60px;
  color:white;
  z-index:3;
  cursor: pointer;
}
.close span,
.close span:before,
.close span:after{
  border-radius: 4px;
  height:5px;
  width:35px;
  background:white;
  position: absolute;
  display: block;
  content:'';
}
.close span{
  background:transparent;
}
.close span:before{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.close span:after{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.outer-close{
  position: absolute;
  right:0;
  top:0;
  width:85px;
  height:85px;
  cursor: pointer;
}
@media screen and (min-width:600px){
  h1{
    font-size:3em;
  }
  nav ul li a{
    font-size:3em;
  }
}

How To Create a Full-screen Overlay Navigation.

You will like these Articles / Tutorials / Recipes

HTML

CSS

One thought on “How To Create a Full-screen Overlay Navigation.”

Leave a Reply Cancel reply

Responsive Food And Restaurant Website Using Bootstrap 5 | Bootstrap 5 Responsive Website Design

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

Responsive Food And Restaurant Website Using Bootstrap 5 | Bootstrap 5 Responsive Website Design

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)