एक कदम दर कदम गाइड
चाहे आपका नेविगेशन मेनू शीर्ष पर एक क्षैतिज पंक्ति या पक्ष के नीचे एक लंबवत पंक्ति है, यह अभी भी एक सूची है। वेब नेविगेशन को डिज़ाइन करते समय, यह भूलना अक्सर आसान होता है कि नेविगेशन मेनू केवल लिंक का एक गौरवशाली समूह है। लेकिन यदि आप एक्सएचटीएमएल + सीएसएस का उपयोग करके अपने नेविगेशन को प्रोग्राम करते हैं, तो आप एक मेनू बना सकते हैं जो डाउनलोड करने के लिए छोटा है (एक्सएचटीएमएल) और कस्टमाइज़ करना आसान है (सीएसएस)।
शुरू करना
नेविगेशन के लिए एक सूची डिजाइन करना शुरू करने के लिए, आपको एक सूची का उपयोग करने की आवश्यकता है।
यह एक मानक अनियंत्रित सूची हो सकती है जिसे नेविगेशन के रूप में पहचाना गया है:
<एनएवी>
- होम
- उत्पाद
- सेवाएं
- हमसे संपर्क करें
यदि आप एचटीएमएल पर बारीकी से देखते हैं, तो आप देखेंगे कि "होम" लिंक में आपके पास एक आईडी भी है। यह आपको एक ऐसा मेनू बनाने की अनुमति देगा जो आपके पाठकों के लिए वर्तमान स्थान की पहचान करेगा। यहां तक कि यदि आप अभी अपनी साइट पर उस प्रकार के दृश्य क्यू रखने की योजना नहीं बनाते हैं, तो आप उस जानकारी को शामिल कर सकते हैं। यदि आप बाद में क्यू जोड़ने का फैसला करते हैं, तो आपकी साइट तैयार करने के लिए आपके पास कम कोडिंग होगी।
किसी भी सीएसएस स्टाइल के बिना, यह एक्सएचटीएमएल मेनू एक मानक unordered सूची की तरह दिखता है। गोलियां हैं और सूची आइटम थोड़ा इंडेंट हैं। चूंकि मैं प्लेसहोल्डर लिंक का उपयोग कर रहा हूं, अधिकांश ब्राउज़र्स लिंक को क्लिक करने योग्य (रेखांकित और नीले रंग में) प्रदर्शित नहीं करेंगे। यदि आप उपरोक्त HTML में किसी वेब पेज में पेस्ट करते हैं, तो आपका नेविगेशन इस तरह दिखेगा:
- होम
- उत्पाद
- सेवाएं
- हमसे संपर्क करें
यह बहुत उबाऊ है और मेनू की तरह दिखता नहीं है। लेकिन सूची में जोड़े गए कुछ सीएसएस शैलियों के साथ, आप एक मेनू बना सकते हैं जो आपको गर्व करता है।
लंबवत नेविगेशन मेनू
एक ऊर्ध्वाधर नेविगेशन मेनू लिखना बहुत आसान है क्योंकि यह सामान्य सूची के समान ही प्रदर्शित होता है: ऊपर और नीचे।
सूची आइटम पृष्ठ के नीचे लंबवत प्रदर्शित होते हैं।
जब मैं मेन्यू स्टाइल कर रहा हूं, तो मैं बाहर से शुरू करना चाहता हूं और काम करना चाहता हूं। इसके द्वारा, मेरा मतलब है कि मैं पहली बार उल # नेविगेशन को स्टाइल करता हूं और फिर ली तत्वों और फिर लिंक आदि पर जाता हूं। इसलिए इस मेनू के लिए, सबसे पहले आप मेनू की चौड़ाई को परिभाषित करते हैं। इससे यह सुनिश्चित होगा कि मेनू आइटम लंबे समय तक भी हैं, फिर भी वे शेष लेआउट को धक्का नहीं देंगे या क्षैतिज स्क्रॉलिंग का कारण बनेंगे।
उल # नेविगेशन {चौड़ाई: 12em; }
एक बार जब मुझे चौड़ाई सेट मिल जाए, तो मैं सूची आइटम के साथ खेल सकता हूं। यह मुझे चीजों को सेट करने की अनुमति देता है (गोलियों से छुटकारा पाने के लिए), पृष्ठभूमि रंग, सीमाएं, पाठ संरेखण, और मार्जिन।
उल # नेविगेशन ली {
सूची-शैली: कोई नहीं;
पृष्ठभूमि रंग: # 039;
सीमा-शीर्ष: ठोस 1 पीएक्स # 039;
पाठ-संरेखण: बाएं;
मार्जिन: 0;
}एक बार जब आप सूची आइटम के लिए मूल बातें सेट कर लेते हैं तो आप लिंक क्षेत्र में मेनू को कैसे दिखते हैं, इसके साथ खेलना शुरू कर सकते हैं। पहली शैली यूएल # नेविगेशन LI ए और फिर ए: लिंक, ए: विज़िट किया गया, ए: होवर, और ए: सक्रिय (यदि आप उन्हें चाहते हैं)। लिंक के लिए, मैं लिंक को ब्लॉक तत्व बनाना चाहता हूं (डिफ़ॉल्ट इनलाइन के बजाए)। यह उन्हें एलआई की पूरी जगह लेने के लिए मजबूर करता है- और वे एक अनुच्छेद की तरह अधिक कार्य करते हैं, जो मेनू बटन के रूप में शैली को आसान बनाता है। दूसरी चीज जो मैं हमेशा करता हूं वह अंडरलाइन (टेक्स्ट-सजावट: कोई नहीं;) को हटा देती है, क्योंकि यह बटन मुझे बटन की तरह दिखता है।
लेकिन निश्चित रूप से, आपका डिजाइन अलग हो सकता है।
उल # नेविगेशन ली एक {
प्रदर्शन क्षेत्र;
पाठ-सजावट: कोई नहीं;
पैडिंग: .25em;
सीमा-तल: ठोस 1 पीएक्स # 3 9 एफ;
सीमा-दाएं: ठोस 1 पीएक्स # 3 9 एफ;
}ध्यान दें कि प्रदर्शन के साथ: ब्लॉक; लिंक पर सेट करें, मेनू आइटम का पूरा बॉक्स क्लिक करने योग्य है, केवल अक्षरों पर नहीं। यह उपयोगिता के लिए भी अच्छा है। यदि आप डिफ़ॉल्ट नीले, लाल और बैंगनी से अलग होना चाहते हैं तो लिंक रंग (लिंक, विज़िट, होवर और सक्रिय) सेट करना सुनिश्चित करें।
ए: लिंक, ए: विज़िट {रंग: # एफएफएफ; }
ए: होवर, ए: सक्रिय {रंग: # 000; }मैं पृष्ठभूमि रंग को बदलकर होवर राज्य को थोड़ा अधिक ध्यान देना पसंद करता हूं।
ए: होवर {पृष्ठभूमि-रंग: # एफएफएफ; }
यदि आप लंबवत मेनू के अधिक उदाहरण चाहते हैं, तो नीचे दी गई सूची से परामर्श लें।
- एक स्टाइल वर्टिकल मेनू
- एक मूल वर्टिकल मेनू टेम्पलेट
- आप के साथ एक स्टाइल वर्टिकल मेनू यहाँ हैं
- आप के साथ एक मूल वर्टिकल मेनू टेम्पलेट यहाँ हैं
क्षैतिज नेविगेशन मेनू
क्षैतिज नेविगेशन मेनू बनाना लंबवत नेविगेशन मेनू से थोड़ा अधिक कठिन है क्योंकि आपको इस तथ्य को ऑफ़सेट करना होगा कि HTML सूचियां लंबवत प्रदर्शित करना पसंद करती हैं। क्षैतिज मेनू के साथ, पहले अपनी नेविगेशन मेनू सूची बनाएं:
<एनएवी>
- होम
- उत्पाद
- सेवाएं
- हमसे संपर्क करें
एक क्षैतिज मेनू बनाने के लिए, वही काम करें जैसा आपने लंबवत मेनू के साथ किया था। बाहर से शुरू करें और काम करें। चूंकि मैं अपने नेविगेशन को बाएं कोने में शुरू करना चाहता हूं, इसलिए मैंने इसे 0 बाएं हाशिए और पैडिंग के साथ सेट किया है, और मैं इसे बाईं ओर तैरता हूं। आपको चौड़ाई निर्धारित करने की आदत भी मिलनी चाहिए ताकि आपका मेनू आपके इरादे से कम या ज्यादा जगह न ले। क्षैतिज मेनू के लिए, यह आमतौर पर डिजाइन की पूरी चौड़ाई है। मैंने इसे पढ़ने में आसान बनाने के लिए पूरी सूची में एक पृष्ठभूमि रंग भी जोड़ा।
उल # नेविगेशन {
बाईंओर तैरना;
मार्जिन: 0;
पैडिंग: 0;
चौड़ाई: 100%;
पृष्ठभूमि रंग: # 039;
}लेकिन क्षैतिज नेविगेशन मेनू का रहस्य सूची वस्तुओं में है। सूची आइटम आम तौर पर ब्लॉक तत्व होते हैं, जिसका अर्थ है कि उनके पास पहले और बाद में एक नई लाइन रखी जाएगी। डिस्प्ले को ब्लॉक से इनलाइन में स्विच करके, आप सूची तत्वों को एक दूसरे के आगे क्षैतिज रूप से लाइन करने के लिए मजबूर करते हैं।
उल # नेविगेशन ली {प्रदर्शन: इनलाइन; }
मैंने वही रंगों और टेक्स्ट सजावट के साथ, जैसे ही मैंने उन्हें ऊर्ध्वाधर नेविगेशन मेनू में व्यवहार किया था, वैसे ही लिंक का इलाज किया। मैंने बटन को चित्रित करने के लिए शीर्ष सीमा को जोड़ा जब वे ढके हुए होते हैं। एकमात्र चीज जिसे मैंने हटाया वह डिस्प्ले था: ब्लॉक; क्योंकि यह क्षैतिज मेनू में नई लाइनों को वापस और नष्ट कर देगा।
उल # नेविगेशन ली एक {
पाठ-सजावट: कोई नहीं;
पैडिंग: .25em 1em;
सीमा-तल: ठोस 1 पीएक्स # 3 9 एफ;
सीमा-शीर्ष: ठोस 1 पीएक्स # 3 9 एफ;
सीमा-दाएं: ठोस 1 पीएक्स # 3 9 एफ;
}
ए: लिंक, ए: विज़िट {रंग: # एफएफएफ; }
उल # नेविगेशन ली ए: होवर {
पृष्ठभूमि रंग: # एफएफएफ;
रंग: # 000;
}आप यहां स्थान की जानकारी हैं
एचटीएमएल का एक और पहलू आपूर्तिकर्ता पहचानकर्ता है। यदि आप अपने उपयोगकर्ताओं के वर्तमान स्थान को इंगित करने के लिए अपने मेनू को संशोधित करना चाहते हैं, तो बस एक अलग पृष्ठभूमि रंग या अन्य शैली को परिभाषित करने के लिए इस आईडी का उपयोग करें। उस पृष्ठ विशेषता को अन्य पृष्ठों पर सही मेनू आइटम पर ले जाएं ताकि वर्तमान पृष्ठ हमेशा हाइलाइट किया जा सके।
उल # नेविगेशन ली # आप एक {पृष्ठभूमि रंग: # 09 एफ; }
यदि आप इन शैलियों को अपने पृष्ठ पर एक साथ रखते हैं, तो आप एक क्षैतिज या लंबवत मेनू बार बना सकते हैं जो आपकी साइट के साथ काम करता है लेकिन डाउनलोड करने में तेज़ है और भविष्य में अपडेट करना बहुत आसान है। एक्सएचटीएमएल + सीएसएस का उपयोग करके आपकी सूचियां डिज़ाइन के लिए एक बहुत ही शक्तिशाली टूल में बदल जाती हैं।
यदि आप क्षैतिज मेनू के अधिक उदाहरण चाहते हैं, तो निम्न से परामर्श लें।
- एक स्टाइल क्षैतिज मेनू
- एक मूल क्षैतिज मेनू टेम्पलेट
- आप के साथ एक स्टाइल क्षैतिज मेनू यहाँ हैं
- आप के साथ एक मूल क्षैतिज मेनू टेम्पलेट यहाँ हैं