How to create menu icon using HTML and CSS (Menu icon कैसे बनाये ?)

आज के इस article में सीखेंगे menu icon किए बनाते है? इसके लिए आपको HTML और CSS की थोड़ी बहुत जानकारी होनी चाहिए।

इस code के माधयम से menu icon बना सकते है :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}
</style>
</head>
<body>

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

<script>
function myFunction(x) {
  x.classList.toggle("change");
}
</script>

</body>
</html>

HTML

Preview

Refrence – https://www.w3schools.com/howto/howto_css_menu_icon.asp#gsc.tab=0

Leave a comment Cancel reply