Hamburger Menu Animation कैसे बनाए ?
Hamburger Menu Animation एक तरह का Menu होता है जिसमे आमतौर पर Website की जरूरी links होती है। यह ज्यादातर मोबाईल में इस्तमाल होता है।
यह हमेशा 3 lines का बना होता है। यह 3 lines एक तरह से Burger लगते है, इसलिए इसे Hamburger बोलते है। 3 lines पर click करते ही Animation दिखता है, फिर Menu दिखता है जिसमे links होते है।
हम इसे Javascript की मदद से बना सकते है। अगर तुरंत इससे बनाना चाहते है तो हमने नीचे इसकी Google Drive link दी है।
Link: https://drive.google.com/drive/folders/1L9R3Cm6aJBdUmocD6kDf2j-qLFwpMSkX
Hamburger Icon बनाए।
आपको एक container में तीन Divs बनाने है और बीच में margin देनी है। थोड़ी सी height और width दे। फिर इसे Display Flex बनाए और इसमें Flex direction column करदे।
Navigation Menu बनाए।
इसमें आपको navigation Menu बनाना है। जिसमे links होंगे जैसे home,about आदि। फिर इसकी height, width, 0 करदे।
इसी के अंदर ul बनाए और ul के अंदर li बनाए। जिसने links list की तरह show होंगे।
आपको एक Class बनानी होगी जिसमे height, width बढ़ी होगी। Height आप उसमे अपने हिसाब से तय कर सकते है।
Javascript file बनाए।
इसमें आप Hamburger div, ul, और Navigation Menu को जोड़ ले get element की मदद से, और उसका variable बनाए।
इसके बाद Hamburger में AddEventlistener लगाए। Click, और Function लिखे। उस Function में आपको Toggle इस्तमाल करना है।
Toggle का मतलब है, की जो Navigation Menu है, Hamburger Click करने पर, उसमे एक Class add होगी। फिर Click करने पर वो Class हट जाएगी।
हमने बताया था कि, एक class और बनाए जिसमे height width लिखे। अभी Nav जो है, उसकी height width 0 लेकिन जब मैं उसे toggle करूंगा तब वो class add हो जायेगी। Class Add होने से Navigation Menu की height, width बढ़ जाएगी और फिर Click करने पर 0 हो जायेगी। साथी ही साथ ul को हम display भी कर देंगे। लेकिन पहले ul hidden होना चाहिए फिर उसे click करने के बाद show करे।
ध्यान रहे कि ul पहले से hidden होना चाहिए नही तो वो screen पर ही रह जायेगा।
इसका code कुछ ऐसे है। nav.classlist.toggle('nheight')
इससे nheight class, nav में add हो जाएगी और फिर click करने पर हट जाएगी।
इसे आप हमारे इस English Video में भी समझ सकते है। इसमें हमने Animation की मदद से सबकुछ बताया है।
Youtube Video:https://youtu.be/rgg88RyZDpc
इस Post को पढ़ने के लिए धन्यवाद :)
टिप्पणियाँ
एक टिप्पणी भेजें