सीएसएस सूचियों का उपयोग कर वर्टिकल नेविगेशन मेन्यू बनाना

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

शुरू करना

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

यदि आप एचटीएमएल पर बारीकी से देखते हैं, तो आप देखेंगे कि "होम" लिंक में भी एक आईडी है

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

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

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

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

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

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

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

उल # नेविगेशन और फिर आगे बढ़ें

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

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

एक बार जब मुझे चौड़ाई सेट मिल जाए, तो मैं सूची आइटम के साथ खेल सकता हूं। यह मुझे चीजों को सेट करने की अनुमति देता है (गोलियों से छुटकारा पाने के लिए), पृष्ठभूमि रंग, सीमाएं, पाठ संरेखण, और मार्जिन।

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

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

उल # नेविगेशन LI एऔर फिर

एक लिंक,

एक: का दौरा किया,

एक: मंडराना, तथा

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

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 एफ; }

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

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

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