Skip to main content

Full Screen Overlay Responsive Navigation Bar | Rustcode

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

"full-screen overlay responsive navigation bar" is very popular in website development nowadays because this menu (navigation bar) produces a different kind of effect on visitors. It looks very attractive, it is easy to implement and easy to manage. This helps in maintaining the responsiveness of the website.

Initially, three bars appear to make this navigation and all menu options will be hidden. When you click on those bars a JavaScript function will be executed and all hidden options will appear on the display with special effects and a "close button" will show on the right top of the display that will help you to restore this navigation bar. 

 You can read other articles on our website "How to create a side navigation bar". Also, if you want to learn different types of navigation bars, you can follow our series on navigation bars.



01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Full Screen Overlay Responsive Navigation Bar | Rustcode</title>
  <link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>

  Main content.

</body>
</html>


02. HTML

We are also including an image in the blog card design. You can download that image from here. 

<body>
  <div class="container">
    <span class="menu-icon" onclick="openMenu()">&#9776;</span>
    <img src="bg.jpg" class="image" />
  </div>
  <div class="menu-container" id="navbar">
    <span class="closebtn" onclick="closeMenu()">&times;</span>
    <div class="menu-content">
      <a href="#">HOME</a>
      <a href="#">PRICE</a>
      <a href="#">ABOUT</a>
      <a href="#">LOGIN</a>
    </div>
  </div>
  <script type="text/javascript" src="script.js"></script>
</body>



03. CSS

body {
  margin: 0px;
  padding: 0px;
}

.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: 0px;
  left: 0px;
  z-index: 1;
  background: rgba(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: .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;
}



04. JAVASCRIPT

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


05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.




06. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download the source code, you can download from here and change this according to your need.




Comments

Post a Comment