कैसे करें - मेनू आइकन
CSS के साथ मेनू आइकन बनाने का तरीका जानें।
मेनू आइकन कैसे बनाएं
यदि आप किसी आइकन लाइब्रेरी का उपयोग नहीं कर रहे हैं, तो आप CSS के साथ एक बुनियादी मेनू आइकन बना सकते हैं:
मेनू चिह्न:
एनिमेटेड मेनू आइकन (उस पर क्लिक करें):
चरण 1) HTML जोड़ें:
उदाहरण
<div></div>
<div></div>
<div></div>
चरण 2) सीएसएस जोड़ें:
उदाहरण
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
उदाहरण समझाया गया
और संपत्ति प्रत्येक बार की चौड़ाई और ऊंचाई निर्दिष्ट करती है width।height
हमने एक काला जोड़ा है background-color, और ऊपर और नीचे margin
का उपयोग प्रत्येक बार के बीच कुछ दूरी बनाने के लिए किया जाता है।
एनिमेटेड आइकन
मेनू आइकन को "रद्द करें/निकालें" आइकन में बदलने के लिए सीएसएस और जावास्क्रिप्ट का उपयोग करें जब इसे क्लिक किया जाता है:
चरण 1) HTML जोड़ें:
उदाहरण
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>
चरण 2) सीएसएस जोड़ें:
उदाहरण
.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) ;
}
चरण 3) जावास्क्रिप्ट जोड़ें:
उदाहरण
function myFunction(x) {
x.classList.toggle("change");
}
उदाहरण समझाया गया
HTML और CSS: हम पहले की तरह ही शैलियों का उपयोग करते हैं, केवल इस बार, हम प्रत्येक <div> तत्व के चारों ओर एक कंटेनर तत्व लपेटते हैं और हम प्रत्येक के लिए एक वर्ग नाम निर्दिष्ट करते हैं।
जब उपयोगकर्ता माउस को divs (बार) पर ले जाता है तो कंटेनर तत्व का उपयोग पॉइंटर प्रतीक दिखाने के लिए किया जाता है। जब इसे क्लिक किया जाता है, तो यह एक जावास्क्रिप्ट फ़ंक्शन निष्पादित करेगा जो इसमें एक नया वर्ग नाम जोड़ता है, जो प्रत्येक क्षैतिज पट्टी की शैलियों को बदल देगा: पहली और आखिरी बार को "x" अक्षर में बदल दिया जाता है और घुमाया जाता है। बीच में पट्टी फीकी पड़ जाती है और अदृश्य हो जाती है।