लंबवत नेविगेशन मेनू बनाने के लिए लिंक का उपयोग करना

चाहे आपकी वेबसाइट का नेविगेशन मेनू शीर्ष पर एक क्षैतिज पंक्ति हो या नीचे की ओर एक लंबवत पंक्ति हो, यह केवल एक सूची है। डिजाइन करते समय वेब नेविगेशन, नेविगेशन मेनू लिंक का एक समूह है। जब आप XHTML+CSS का उपयोग करके अपने नेविगेशन को प्रोग्राम करते हैं, तो आप एक ऐसा मेनू बना सकते हैं जो डाउनलोड करने के लिए छोटा हो (XHTML) और अनुकूलित करने में आसान (CSS)।

शुरू करना

नेविगेशन के लिए एक सूची तैयार करने के लिए, आपको एक सूची का उपयोग करने की आवश्यकता है। यह एक मानक अनियंत्रित सूची हो सकती है जिसे नेविगेशन के रूप में पहचाना गया है। उदाहरण के लिए:

• घर
• उत्पादों
• सेवाएं
• संपर्क करें

एचटीएमएल को देखते समय, होम लिंक की एक आईडी होती है।

आप यहाँ हैं

यह आपको एक मेनू बनाने की अनुमति देता है जो आपके पाठकों के लिए वर्तमान स्थान की पहचान करता है। यहां तक ​​कि अगर आप अभी अपनी साइट पर उस प्रकार के विज़ुअल क्यू की योजना नहीं बनाते हैं, तो भी आप उस जानकारी को शामिल कर सकते हैं। यदि आप बाद में संकेत जोड़ने का निर्णय लेते हैं, तो आपकी साइट तैयार करने के लिए आपके पास कम कोडिंग होगी।

कोई भी बिना

सीएसएस स्टाइलिंग, यह एक्सएचटीएमएल मेनू एक मानक अनियंत्रित सूची की तरह दिखता है। बुलेट हैं, और सूची आइटम थोड़े इंडेंटेड हैं। उपयोग करते समय प्लेसहोल्डर लिंक, अधिकांश ब्राउज़र लिंक को क्लिक करने योग्य (रेखांकित और नीले रंग में) प्रदर्शित नहीं करते हैं। जब आप HTML को वेब पेज में पेस्ट करते हैं, तो आपका नेविगेशन इस तरह दिखता है:

• घर
• उत्पादों
• सेवाएं
• संपर्क करें

यह एक मेनू की तरह ज्यादा नहीं दिखता है। हालांकि, सूची में जोड़े गए कुछ सीएसएस शैलियों के साथ, आप एक ऐसा मेनू बना सकते हैं जो आपको गौरवान्वित करे।

यदि आप लंबवत मेनू के अधिक उदाहरण चाहते हैं, तो निम्न के लिए वेब खोज करें:

• एक स्टाइल वाला लंबवत मेनू
• एक बुनियादी लंबवत मेनू टेम्पलेट
• आपके साथ एक स्टाइल वर्टिकल मेनू यहाँ है
• आपके साथ एक बुनियादी लंबवत मेनू टेम्पलेट यहाँ है

लंबवत नेविगेशन मेनू

एक लंबवत नेविगेशन मेनू लिखना आसान है क्योंकि यह सामान्य सूची के समान ही प्रदर्शित होता है: ऊपर और नीचे। सूची आइटम पृष्ठ के नीचे लंबवत प्रदर्शित होते हैं।

मेनू को स्टाइल करते समय, बाहर से शुरू करें और अंदर काम करें। सबसे पहले, नेविगेशन को स्टाइल करें:

उल#नेविगेशन

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

उल#नेविगेशन {चौड़ाई: 12em; }

चौड़ाई निर्धारित करने के बाद, सूची आइटम पर काम करें। यह आपको बैकग्राउंड कलर, बॉर्डर, टेक्स्ट अलाइनमेंट और मार्जिन जैसी चीजें सेट करने की अनुमति देता है।

उल#नेविगेशन ली {
सूची-शैली: कोई नहीं;
पृष्ठभूमि-रंग: #039;
बॉर्डर-टॉप: सॉलिड 1px #039;
पाठ-संरेखण: बाएँ;
मार्जिन: 0;
} 

सूची आइटम के लिए मूल बातें सेट करने के बाद, लिंक क्षेत्र में मेनू कैसा दिखता है, इस पर काम करें। नेविगेशन की पहली शैली:

उल#नेविगेशन एलआई ए

फिर, निम्नलिखित स्टाइल करें:

एक लिंक
ए: का दौरा किया
ए: होवर
ए: सक्रिय

लिंक के लिए, लिंक को एक ब्लॉक तत्व बनाएं (डिफ़ॉल्ट इन-लाइन के बजाय)। यह लिंक को LI के पूरे स्थान पर कब्जा करने के लिए बाध्य करता है, और एक पैराग्राफ की तरह कार्य करता है, जिससे लिंक को मेनू बटन के रूप में स्टाइल करना आसान हो जाता है। फिर, निम्नलिखित को हटा दें:

रेखांकन, पाठ-सजावट: कोई नहीं; जैसा

यह बटन को बटन की तरह अधिक दिखता है। आपका डिज़ाइन अलग हो सकता है।

उल#नेविगेशन ली ए {
प्रदर्शन क्षेत्र;
पाठ-सजावट: कोई नहीं;
गद्दी: .25em;
बॉर्डर-बॉटम: सॉलिड 1px #39f;
सीमा-दाएं: ठोस 1px #39f;
}

उसके साथ प्रदर्शन क्षेत्र; लिंक पर सेट, मेनू आइटम का पूरा बॉक्स क्लिक करने योग्य है, केवल अक्षर ही नहीं। यह उपयोगिता के लिए भी अच्छा है। यदि आप चाहते हैं कि लिंक डिफ़ॉल्ट नीले, लाल और बैंगनी रंग से भिन्न हों, तो लिंक रंग (लिंक, विज़िट, होवर और सक्रिय) सेट करें।

ए: लिंक, ए: विज़िट किया गया {रंग: #fff; }
ए: होवर, ए: सक्रिय {रंग: #000; }

आप बैकग्राउंड का रंग बदलकर होवर की स्थिति पर भी थोड़ा ध्यान दे सकते हैं।

ए: होवर {पृष्ठभूमि-रंग: #fff; }

क्षैतिज नेविगेशन मेनू

क्षैतिज नेविगेशन मेनू बनाना लंबवत नेविगेशन मेनू की तुलना में थोड़ा अधिक कठिन है क्योंकि आपको इस तथ्य को ऑफसेट करना होगा कि HTML सूचियां लंबवत प्रदर्शित करना पसंद करती हैं। क्षैतिज मेनू की तरह, नेविगेशन मेनू सूची बनाएं:

• घर
• उत्पादों
• सेवाएं
• संपर्क करें

एक क्षैतिज मेनू बनाने के लिए, उसी तरह काम करें जैसे आपने लंबवत मेनू के साथ किया था। बाहर से शुरू करें और अंदर काम करें। बाएं कोने में नेविगेशन शुरू करने के लिए, इसे 0 बाएं मार्जिन और पैडिंग के साथ सेट करें, और इसे बाईं ओर तैरें।

चौड़ाई निर्धारित करने की आदत डालें ताकि आपका मेनू आपकी इच्छा से अधिक या कम जगह न ले। क्षैतिज मेनू के लिए, यह आमतौर पर डिज़ाइन की पूरी चौड़ाई होती है। आप भी जोड़ सकते हैं एक पृष्ठभूमि रंग सूची में पढ़ने के लिए आसान बनाने के लिए।

उल#नेविगेशन {
बाईंओर तैरना;
मार्जिन: 0;
पैडिंग: 0;
चौड़ाई: 100%;
पृष्ठभूमि-रंग: #039;
}

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

उल # नेविगेशन ली {डिस्प्ले: इनलाइन; }

लिंक को ठीक उसी रंग और टेक्स्ट सजावट के साथ लंबवत नेविगेशन मेनू की तरह व्यवहार करें। जब उपयोगकर्ता किसी बटन पर होवर करता है तो बटनों को चित्रित करने के लिए एक शीर्ष सीमा जोड़ें। फिर, हटा दें प्रदर्शन क्षेत्र; क्योंकि यह न्यूलाइन को वापस रखता है और क्षैतिज मेनू को नष्ट कर देता है।

आप यहाँ हैं स्थान की जानकारी

HTML का एक अन्य पहलू यह पहचानकर्ता है:

आप यहाँ हैं

यदि आप अपने उपयोगकर्ताओं के वर्तमान स्थान को इंगित करने के लिए अपने मेनू को संशोधित करना चाहते हैं, तो इस आईडी का उपयोग किसी भिन्न पृष्ठभूमि रंग या किसी अन्य शैली को परिभाषित करने के लिए करें। उस विशेषता आईडी को अन्य पृष्ठों पर सही मेनू आइटम पर ले जाएं ताकि वर्तमान पृष्ठ हमेशा हाइलाइट हो।

यदि आप इन शैलियों को अपने पृष्ठ पर एक साथ रखते हैं, तो आप एक क्षैतिज या लंबवत मेनू बार बना सकते हैं जो आपकी साइट के साथ काम करता है और डाउनलोड करने में तेज़ और अपडेट करने में आसान है। XHTML+CSS का उपयोग करने से आपकी सूचियाँ डिज़ाइन के लिए एक शक्तिशाली टूल में बदल जाती हैं।

यदि आप क्षैतिज मेनू के अधिक उदाहरण चाहते हैं, तो निम्न के लिए वेब पर खोजें:

• एक स्टाइल क्षैतिज मेनू
• एक बुनियादी क्षैतिज मेनू टेम्पलेट
• आपके साथ एक स्टाइल क्षैतिज मेनू यहाँ है
• आपके साथ एक बुनियादी क्षैतिज मेनू टेम्पलेट यहाँ है