JQuery के साथ एक अकॉर्डियन के रूप में साइट के लिए कार्यक्षेत्र मेनू

मेनू, तुम्हें पता है के रूप में - साइट का एक अभिन्न हिस्सा। दिलचस्प नेविगेट ऑनलाइन संसाधन ब्याज आगंतुकों के लिए सक्षम है। इसके अलावा, किसी भी मेनू का एक महत्वपूर्ण संपत्ति - अपने सघनता। एक साधारण ऊर्ध्वाधर मेनू आसानी से HTML और सीएसएस का उपयोग कर बनाया। लेकिन हम आगे जाना: हमें jQuery की मदद से मेनू- "अकॉर्डियन" बनाने के लिए जानें।

एक मेनू- "अकॉर्डियन" बनाएँ

एक अकॉर्डियन के रूप में एक ऊर्ध्वाधर मेनू क्या है? यह एक ड्रॉप-डाउन सूची है, जो एक आसान नेविगेट करने के लिए बनाता है और एक स्टाइलिश साइट देता है। मेनू, इस तरह से प्रदर्शन किया, आप उप आइटम का एक बहुत चालू करने के लिए अनुमति देता है। उन्हें तक पहुंच तब होता है जब आप इच्छित आइटम पर माउस क्लिक करें। किसी ने कह सकते हैं कि यह jQuery के उपयोग के बिना इस फैशन में एक सरल मेनू बनाने के लिए संभव है। हाँ, यह है। लेकिन इस वस्तु स्मार्ट फ़ोन या टेबलेट के मालिकों के लिए बहुत उपयोगी नहीं होगा। के एक ऊर्ध्वाधर मेनू बनाने के लिए, सभी को अपील करते हैं। फिर, रंग एक नेविगेशन स्टाइल बदल रहा है, यह संभव किसी भी साइट के डिजाइन को समायोजित करने के लिए किया जाएगा।

एचटीएमएल कोड

तो, हमारे ऊर्ध्वाधर मेनू बनाने के लिए, आप पहली बार एचटीएमएल कोड डायल करना होगा, जो निम्नलिखित लाइनों में शामिल होंगे:

Accord_menu.html नामक एक फ़ाइल में इस कोड को सेव करें।

आप देख सकते हैं, हम एक बिना क्रम वाली सूची बनाई है। यह 3 मुख्य बिंदुओं के होते हैं:

- तस्वीरें;

- फिल्मों;

- किताबें।

प्रत्येक आइटम में कुछ पैराग्राफ है। # कहाँ हैं, तो आप लिंक जोड़ने के लिए की आवश्यकता होगी। अब यह शैली का वर्णन करने के लिए महत्वपूर्ण है। यह सब अपने इंटरनेट संसाधन के रूप पर निर्भर करता है। साइट इसकी डिजाइन में सौहार्दपूर्वक एकीकृत करना चाहिए के लिए कार्यक्षेत्र मेनू।

सीएसएस-कोड

शैलियों के साथ आप के लिए मुश्किल नहीं होना चाहिए। हम इस उदाहरण में एक ढाल भरने का उपयोग करता है केवल यह है कि ध्यान दें। यहाँ सीएसएस-कोड है:

रंग सीएसएस फ़ाइल में निर्दिष्ट किया जाता, आकार मार्कर बाईं ओर की सूची में आइटमों से निकाल दिए जाते हैं। यह कैसे प्रत्येक आइटम और सब-मेनू में व्यवहार करने के लिए जब आप उस पर होवर निर्धारित। उदाहरण के लिए:

# E1fee2 - यह पीला हरे रंग उप।

# C4f0f7 -golubovaty छाया उप जब आप उन्हें पर होवर करें।

प्रदर्शन संपत्ति आवश्यक गद्दी और आकार को समायोजित करने ब्लॉक मूल्य पूछना। रंग, आकार, फ़ॉन्ट प्रकार, स्थान - सब कुछ के रूप में सीएसएस फ़ाइल में वर्णन किया गया है। , यह कॉल उदाहरण के लिए, accordionmenu_my1.css।

jQuery मेनू सुधार कनेक्ट

आपको याद होगा कि, हमारा लक्ष्य - एक ऊर्ध्वाधर मेनू jQuery बनाने के लिए। आप इस तकनीक से परिचित नहीं हैं, तो चिंता न करें। हम Google डेटा संग्रह स्थान का उपयोग करें और JQuery स्क्रिप्ट कनेक्ट। यह इसे और अधिक आकर्षक मेनू कर देगा। jQuery हाइपरटेक्स्ट मार्कअप HTML और जावास्क्रिप्ट की बातचीत के आधार पर एक जावास्क्रिप्ट पुस्तकालय है। jQuery आप सामग्री और तत्वों की विशेषताओं का उपयोग करने की अनुमति देता है।

तो, एचटीएमएल फ़ाइल के शरीर में आवश्यक स्क्रिप्ट को जोड़ने और 2 चर के भंडारण के लिए नियम निर्धारित, घुड़दौड़ तत्वों के अलावा। कोड योगदान, एक एक माउस क्लिक होती है जिस पर के उद्घाटन अवसर पर अन्य टैब बंद। यह इस प्रकार से दिखाई देता है:

सभी परिवर्तन सहेजें, देखो क्या यह ब्राउज़र मेनू में की तरह दिखता है। यही कारण है कि की एक आम परिणाम है: एक परिणाम के रूप में, हम एक आकर्षक मेनू है कि आप हमेशा बदल सकते हैं, उनकी प्राथमिकताओं के आधार पर आ गए हैं। और jQuery, सीएसएस के क्षेत्र में नए ज्ञान प्राप्त करने के लिए, आप साइट के अद्वितीय तत्व पैदा करेगा अपने कौशल में सुधार।