वर्टिकल ड्रॉपडाउन मेन्यू कैसे बनाएं

विषयसूची:

वर्टिकल ड्रॉपडाउन मेन्यू कैसे बनाएं
वर्टिकल ड्रॉपडाउन मेन्यू कैसे बनाएं

वीडियो: वर्टिकल ड्रॉपडाउन मेन्यू कैसे बनाएं

वीडियो: वर्टिकल ड्रॉपडाउन मेन्यू कैसे बनाएं
वीडियो: ड्रॉपडाउन के साथ साइड नेविगेशन | एचटीएमएल और सीएसएस || जेडीबीसीओडीई 2024, मई
Anonim

लंबवत ड्रॉपडाउन मेनू बहुत आसान है - यह वेब पेज पर जगह बचाता है, जबकि साथ ही साइट को आसानी से नेविगेट करने में मदद करता है। CSS - कैस्केडिंग स्टाइल शीट्स पर आधारित ड्रॉपडाउन मेनू बनाने का प्रयास करें। यदि आप अभी तक CSS कोड बनाने के विशेषज्ञ नहीं हैं, तो Purecssmenu.com सेवा का उपयोग करें। आपको एक मेनू प्रकार का चयन करना होगा, उसकी उपस्थिति को अनुकूलित करना होगा, और फिर उसे अपनी साइट पर अनुकूलित करना होगा। सेवा स्वयं आवश्यक कोड उत्पन्न करेगी, जिसे आप अपनी साइट की फ़ाइलों में सम्मिलित करते हैं।

वर्टिकल ड्रॉपडाउन मेन्यू कैसे बनाएं
वर्टिकल ड्रॉपडाउन मेन्यू कैसे बनाएं

अनुदेश

चरण 1

Purecssmenu.com वेबसाइट पर रजिस्टर करें, अन्यथा आप बनाए गए मेनू को डाउनलोड नहीं कर पाएंगे। पेज के बाईं ओर टेम्प्लेट बटन पर क्लिक करें। नीचे आपको ड्रॉप-डाउन मेनू टेम्प्लेट वाली कई छोटी विंडो दिखाई देंगी, जिन पर क्लिक करने से पूर्वावलोकन विंडो में दाईं ओर एक पूर्वावलोकन लोड होगा। एक टेम्प्लेट चुनें जो आपकी साइट के अनुकूल हो

चरण दो

मेनू के फ़ॉन्ट और रंग को अनुकूलित करें: पैरामीटर्स टैब का उपयोग करें। फ़ॉन्ट फ़ील्ड में, फ़ॉन्ट, फ़ॉन्ट आकार, यदि आवश्यक हो, रेखांकित और बोल्ड का चयन करें। रंग फ़ील्ड में, मेनू पृष्ठभूमि, फ़ॉन्ट रंग, और फ़ॉन्ट होवर और पृष्ठभूमि होवर रंग सेट करें

चरण 3

मेनू आइटम प्रबंधित करने के लिए आइटम टैब खोलें। यदि आप रीसायकल बिन साफ़ करें बटन पर क्लिक करते हैं, तो नमूना आइटम साफ़ हो जाते हैं और आप अपना स्वयं का बना सकते हैं। ऐसा करने के लिए, आइटम जोड़ें प्लस बटन दबाएं - आइटम मेनू के अंत में जोड़ा जाएगा। अगला आइटम जोड़ें बटन का उपयोग वर्तमान में चयनित समय के बाद किसी आइटम को जोड़ने के लिए किया जाता है। Subitem जोड़ें बटन चयन के लिए एक उप-मेनू आइटम बनाता है। तदनुसार, किसी आइटम को हटाने के लिए, आइटम निकालें बटन का उपयोग करें

चरण 4

साइट के नीचे आइटम पैरामीटर्स फ़ील्ड पर ध्यान दें। टेक्स्ट लाइन में, लिंक लाइन में मेनू आइटम का नाम निर्दिष्ट करें - उस पेज का url जिस पर यह आइटम ले जाएगा। टिप लाइन में, आप आइटम का विवरण छोड़ सकते हैं, जो आपके लिंक पर होवर करने पर दिखाया जाएगा। लक्ष्य रेखा का उपयोग उस पृष्ठ को खोलने का तरीका निर्धारित करने के लिए किया जाता है जिस पर लिंक जाता है। इस लाइन पर _self पैरामीटर पेज को उसी ब्राउज़र विंडो में खोलता है जिसमें वर्तमान में है

चरण 5

मेनू की स्थापना समाप्त करने के बाद, इसे डाउनलोड करें - पृष्ठ के नीचे दाईं ओर डाउनलोड बटन पर क्लिक करें (यह फ़ंक्शन साइट पर पंजीकरण के बाद उपलब्ध है)। अपनी हार्ड ड्राइव पर एक फ़ोल्डर चुनें जहां संग्रह फ़ाइल सहेजी जाएगी। इसे अनपैक करें। आपको अपनी साइट की CSS टेम्पलेट फ़ाइल में आवश्यक कोड को Purecssmenu.html फ़ाइल से कॉपी करना होगा। Purecssmenu.html फ़ाइल को टेक्स्ट एडिटर से खोलें और और टैग के बीच के कोड को अपनी साइट के CSS टेम्प्लेट में कॉपी करें (इस फ़ाइल में.css एक्सटेंशन है और यह file.css जैसा कुछ दिखता है)। अब कोड को अपनी साइट टेम्पलेट (थीम) फ़ाइल में पेस्ट करें - Purecssmenu.html से कोड टिप्पणियों के बीच और नियमित मेनू कोड के बजाय। ऐसा करने के लिए, आपको प्रोग्रामिंग से कम से कम थोड़ा परिचित होना चाहिए। कोड को सही फ़ाइल में पेस्ट करना और सहेजना सुनिश्चित करें।

सिफारिश की: