Menu Icon कैसे create करे - ldkalink
Menu Icon create कैसे करे: इस आर्टिकल में हम HTML, CSS और JavaScript का उपयोग करके एक menu icon कैसे बनाते है इसके बारे में बात करने वाले है।
इसमें हम दो तरह के मेनू आइकॉन के बारे में बात करने वाले है जिसमे पहला एक सिंपल मेनू आइकॉन बनाएंगे और दूसरा एक animated menu icon बनाएंगे जो क्लिक करने पर यह एनीमेशन के रूप में दिखाई देगा।
simple menu icon बनाने के लिए HTML, CSS का उपयोग किया जायेगा वही animated menu icon के लिए HTML, CSS और JavaScript का उपयोग किया जायेगा, इससे पहले html का basic syntax को लिखे और फिर इसमें निचे दिए गए कोड को ऐड करे।
 |
| Menu Icon कैसे create करे |
Menu Icon कैसे Create करे
Step 1) Add HTML Code
निचे दिए गए HTML Code को body सेक्शन के अंदर पेस्ट करे।
<body>
<div></div><div></div><div></div>
</body>
Step 2) Add CSS Code
निचे दिए गए CSS Code को head सेक्शन में style के अंदर पेस्ट करे।
<head>
<style>div {width: 35 px;height: 5 px;background-color: black;margin:6 px;</style>
</head>
इसे save करके देखे इसमें तीन लाइन का एक मेनू आइकॉन शो होगा है अब इसमें उसे किये गए कोड्स के बारे में थोड़ा समझ लेते है।
Used Code को विस्तार से जाने:
- width: यह प्रत्येक बार की लम्बाई को दर्शाता है।
- height: यह प्रत्येक बार की हाइट को दर्शाता है।
- background-color: यह प्रत्येक बार की कलर को दर्शाता है।
- margin: यह प्रत्येक बार के ऊपर निचे जगह छोड़ने के लिए किया जाता है।
Animated Menu Icon कैसे Create करे
इसमें JavaScript का उपयोग मेनू icon को चेंज करने के लिए ऐड किया जाता जब कोई यूजर इस आइकॉन का क्लीक करता है तो यह एक एनीमेशन के रूप में दिखाई देगा।
Step 1) Add HTML Code
<div class="container" onclick="myFunction(this)"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
Step 2) Add CSS Code
.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 {transform: translate(0, 11px) rotate(-45deg);}/* Fade out the second bar */.change .bar2 {opacity: 0;}/* Rotate last bar */.change .bar3 {transform: translate(0, -11px) rotate(45deg);}
Step 3) Add JavaScript Code
इस जावास्क्रिप्ट कोड को </body> के जस्ट ऊपर पेस्ट करे।
function myFunction(x) {x.classList.toggle("change");}
इसमें HTML और CSS को पहले के तरह ही उपयोग किया गया है लेकिन इसमें <div> एलिमेंट container के अंदर लिखते है और इसमें प्रत्येक बार के लिए एक class डिफाइन करते है class इसलिए दिया जाता है क्यों की इस पर CSS add करना होता है।
यहाँ container एलिमेंट्स एक उपयोग पॉइंटर सिंबल को दिखाई के लिए किया गया है जब किसी यूजर द्वारा माउस को divs के ऊपर यानि बार्स पर ले जा कर इस पर क्लिक करते है तो जावास्क्रिप्ट अपना काम शुरू कर देता है।
जावास्क्रिप्ट प्रत्येक बार की स्टाइल को बदल देता है इसमें पहली और लास्ट वाले बार को "X" अक्षर में घुमा देता बीच वाले बार को अदृस्य कर दिया जाता है।