How To Make CSS Navigation Menu With Dark Overlay

Hi folks. I come back with new menu after a long period of posting about menu experiment, cause of making new theme for SoftGlad. Today I brought you a Simple Overlay Navigation Menu (SONM) in which will stand out once muse click on it and it cover everything on the page except menu with dark overlay. This menu simply coded without implementing JS. Just with Pure CSS3.

Live Demo

The HTML

The HTML structure is consist of input label and unordered list. Since this is a navigation menu, it’s the perfect place to implement the HTML5 “nav” element. There is simple UL with four link. You can add more link how much you want to show. A label is added with id="toggle-nav-label" once it click by mouse it show the overlay menu.

<nav id="menu">
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav"></label>
<div crlass="box">
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Works</a></li>
  <li><a href="#">Contacts</a></li>
  </ul>
</div>
</nav>

Now you got the HTML snippet but you could find any style in it yet, so just jump to style sheet section below to stylify the menu and it's components with pure and simple CSS.

The CSS

The following Style sheet is used simple codes without using any rock material. We have added transition effect which will bring the menu in a fade effect means animation. Width and Height is 100% size to fit the entire web page. In every cases we use prefix properties in transition effect to support most browsers. 

#menu .box {
  position: fixed;
  text-align: center;
  overflow: hidden;
  z-index: -1;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background: rgba(0,0,0,0.8);
  -webkit-transition: all 0.3s ease-in-out; 
  -moz-transition: all 0.3s ease-in-out; 
  -o-transition: all 0.3s ease-in-out; 
  transition: all 0.3s ease-in-out;
}

Now it's time to give style to the  #menu ul and we added transform effect scale 2 which show the menu once we click on label id="toggle-nav-label" in zoom in animation.

#menu ul {
  position: relative;
  top: 20%;
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
  -webkit-transition: all 0.3s ease-in-out; 
  -moz-transition: all 0.3s ease-in-out; 
  -o-transition: all 0.3s ease-in-out; 
  transition: all 0.3s ease-in-out;
}

Now we going to modify unordered list and it's links to make the menu appearing in a awesome font, size, border color etc.,  Again, here we used transition effect to animate is border. The font is simplified with oswald, you may have to change you own font if available.

#menu li { 
  display: inline-block; 
  margin: 20px;
}

#menu li a {
  padding: 20px 15px;
  border: 1px solid transparent;
  text-decoration: none;
  font: 500 25px oswald;
  color: #fff;
  -webkit-transition: all 0.2s ease-in-out; 
  -moz-transition: all 0.2s ease-in-out; 
  -o-transition: all 0.2s ease-in-out; 
  transition: all 0.2s ease-in-out;
}

#menu li a:hover { 
  border-color: #fff;
)

Just customize the look of the toggle button on the corner side and there checked ~ attributes once we click on the button its show the menu from opacity 0 to 1.

#toggle-nav-label {
  color: rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.2);  text-align: center;
  line-height: 30px;
  font-size: 16px;
  display: block;
  cursor: pointer;
  position: relative;
  z-index: 500;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background-image: url("navicon.png");
  background-position: -5px -4px;
}

#toggle-nav { display: none; }

#toggle-nav:checked ~ .box { 
  opacity: 1; 
  z-index: 400;
}

#toggle-nav:checked ~ .box ul {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

I hope you had fun with this overlay menu. If you are using blogger, then you may add the HTML code in anywhere of your web page and copy-paste all CSS code before ]]</b:skin>

SHARE

Tweet