Hey coders, let's learn today how to make a overlay navigation menu using HTML, CSS & Javascript. You can refer to my video below on the tutorial and project demo.



Full Code:
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html>
<title>Overlay Navigation Menu using HTML,CSS,JS | CodingPorium</title>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
body {
  font-family: poppins, sans-serif;
  background:cyan;
}
.center{
text-align: center;
}
.bars{
  position: absolute;
  top: 45%;
  padding:10px;
  color:white;
  background:orange;
  font-size:30px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  cursor:pointer;
  border:none;
  border-radius:10px;
  transition:0.3s;
}
.bars:hover{
  color:orange;
  background:white;
}
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
 background: linear-gradient(-135deg, #696EFF, #F8ACFF);
  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;
  font-family: poppins;
  color: white;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color:black;
}

.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="fullNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Testimonials</a>
    <a href="#">Contact</a>
  </div>
</div>

<div class="center">
<button class="bars" onclick="openNav()"><i class="fas fa-bars"></i> </button>
</div>

<script>
function openNav() {
  document.getElementById("fullNav").style.width = "100%";
}

function closeNav() {
  document.getElementById("fullNav").style.width = "0%";
}
</script>
     
</body>
</html>
 

Thanks for reading and I hope you enjoyed this project. Till the next one, goodbye!
Tags

Post a Comment

Post a Comment

Previous Post Next Post