如何创建：菜单图标

学习如何使用 CSS 创建菜单图标。

如果您没有使用图标库，您可以使用 CSS 创建一个基本的菜单图标：

菜单图标：

स्वयं को प्रयोग करें

动画菜单图标（点击它）：

स्वयं को प्रयोग करें

如何创建菜单图标

पहला कदम - HTML जोड़ें:

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

दूसरा कदम - CSS जोड़ें:

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

स्वयं को प्रयोग करें

उदाहरण स्पष्टीकरण:

width और height गुण निर्दिष्ट करते हैं कि प्रत्येक लाइन की चौड़ाई और ऊंचाई क्या होगी।

हमने काले पृष्ठभूमि रंग और ऊपर-नीचे बाह्य-छेद को जोड़ा है, ताकि प्रत्येक लाइन के बीच की जगह बनाई हो।

एनिमेशन चिह्न

CSS और JavaScript का उपयोग करके, क्लिक किए जाने पर मेन्यू चिह्न को "रद्द/हटाएं" चिह्न में बदलें:

पहला कदम - HTML जोड़ें:

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

दूसरा कदम - CSS जोड़ें:

.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);
}

तीसरा कदम - जेसक्रिप्ट जोड़ें:

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

स्वयं को प्रयोग करें

उदाहरण स्पष्टीकरण:

HTML और CSS: हमने पहले के समान शैली का उपयोग किया है, लेकिन इस बार हर <div> एलीमेंट को एक कंटेनर एलीमेंट में बंधा है और हर एलीमेंट को एक क्लास नाम निर्दिष्ट किया है।

कंटेनर एलीमेंट का उपयोग किया जाता है कि जब उपयोगकर्ता माउस को divs (लाइन) पर ले जाए तो एक संकेतांक प्रदर्शित करे। जब यह क्लिक किया जाता है तो यह एक जेसक्रिप्ट फ़ंक्शन का आरंभ करता है जो इसे एक नई क्लास नाम जोड़ता है जो प्रत्येक लवनीय लाइन के शैली को बदलता है: पहली और अंतिम लाइन एक्स अक्षर के रूप में बदलकर रूपांतरित और घुमाता है। मध्य की लाइन धीरे-धीरे फीकी होती है और अदृश्य हो जाती है।