Menu Icon In Hindi

मेनू आइकन कैसे बनाएं यदि आप किसी आइकन लाइब्रेरी का उपयोग नहीं कर रहे हैं, तो आप CSS के साथ एक basic menu icon बना सकते हैं:

4 minute read

How To - Menu Icon

CSS के साथ menu icon बनाने का तरीका जानें।

मेनू आइकन कैसे बनाएं

यदि आप किसी आइकन लाइब्रेरी का उपयोग नहीं कर रहे हैं, तो आप CSS के साथ एक basic menu icon बना सकते हैं:

Step 1) Add HTML:

Example


<div></div>
<div></div>
<div></div>

Copy Code

Step 2) Add CSS:

Example


div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

Copy Code

Example Explained

Width और height property प्रत्येक बार की width और height specify करती है।

हमने background-color black add किया है , और margin का उपयोग प्रत्येक बार के बीच ऊपर और नीचे कुछ दूरी बनाने के लिए किया जाता है।

Animated Icon

जब menu icon क्लिक किया जाता है तब इसे "cancel/remove" icon में बदलने के लिए CSS और JavaScript का उपयोग करें:

Step 1) Add HTML:

Example


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

Copy Code

Step 2) Add CSS:

Example


.container {
  display: inline-block;
  cursor: pointer;
}

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

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}

Copy Code

Step 3) Add JavaScript:

Example


function myFunction(x) {
  x.classList.toggle("change");
}

Copy Code

Complete Example


<!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 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

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

<p>Click on the Menu Icon to transform it to "X":</p>
<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>

Copy Code

Example Explained

HTML और CSS: हम पहले की तरह ही styles का उपयोग करते हैं, केवल इस बार, हम प्रत्येक <div> element के चारों ओर एक container element लेते हैं और हम प्रत्येक के लिए एक class name specify करते हैं।

जब उपयोगकर्ता माउस को divs (बार) पर ले जाता है तो container element का उपयोग pointer symbol दिखाने के लिए किया जाता है। जब इसे क्लिक किया जाता है, तो यह एक JavaScript function execute करेगा जो इसमें एक नया class name जोड़ता है, जो प्रत्येक horizontal bar की styles को बदल देगा: पहली और आखिरी बार को "x" अक्षर में बदल दिया जाता है और transforme किया जाता है। बीच में पट्टी फीकी पड़ जाती है और अदृश्य हो जाती है।