Output

Sorry Friends This preview is not support for Blog

open ☰

Input

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: 'Lato', sans-serif;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div><br><br><br>
<span style="float:right;margin-right:20px;font-size:40px;font-weight:bolder;cursor:pointer" onclick="openNav()"> open ☰</span>

HTML source code

Kumar Lakshmanan

Header on toggle Button

Output

Sorry Friends This preview is not support for Blog

Input

Top Stories

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Best PDF books for web designing and developing

St.Mary's HSS | My School

Make the Loader Using HTML & CSS

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

Header on toggle Button

Output

Sorry Friends This preview is not support for Blog

Input

Top Stories

You may like these posts

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Best PDF books for web designing and developing

St.Mary's HSS | My School

Make the Loader Using HTML & CSS

Total Pageviews

Contact Form

Footer Menu Widget