चरण-दर-चरण गाइड
तपाईंको नेभिगेसन मेनु शीर्ष मा तेर्सो पङ्क्ति वा छेउमा पङ्क्तिबद्ध ठाडो पङ्क्ति हो भने, यो अझै अझै एउटा सूची हो। वेब नेभिगेसन डिजाइन गर्दा, प्राय: प्राय: भूल गर्न सजिलो छ कि नेभिगेसन मेनु केवल लिङ्कहरूको एक महिमित समूह हो। तर यदि तपाइँ XHTML + CSS को प्रयोग गरेर आफ्नो नेभिगेसन प्रोग्राम गर्नुहुन्छ भने, तपाइँ एक सानो फाइल (XHTML) डाउनलोड गर्न र सजिलो गर्न (सीएसएस) सजिलै मेनु बनाउन सक्नुहुन्छ।
सुरु गर्दै
नेविगेसनको लागि एक सूची डिजाइन गर्न शुरू गर्न, तपाईंलाई एक सूची प्रयोग गर्न आवश्यक छ।
यो एउटा मानक अनअर्डर गरिएको सूची हो जुन नेभिगेसनको रुपमा पहिचान गरिएको छ:
यदि तपाईं एचटीएमएलमा नजिक जान्नुहुन्छ भने, तपाइँले "गृह" लिङ्कमा तपाइँलाई पनि पहिचानको पहिचानको बारेमा जानकारी दिनुहुनेछ। यसले तपाईंलाई एक मेनु सिर्जना गर्न अनुमति दिन्छ जुन तपाईंको पाठकहरूका लागि हालको स्थान पहिचान गर्दछ। यद्यपि यदि तपाइँ अहिले आफ्नो साइटमा त्यस प्रकारको भिजुअल क्यू राख्ने योजना छैन भने, तपाइँ त्यस जानकारी समावेश गर्न सक्नुहुनेछ। यदि तपाइँ पछि क्यू थप्न निर्णय गर्नुहुन्छ, तपाइँसँग तपाइँको साइट तयार गर्न कम कोडिङ हुनेछ।
कुनै पनि सीएसएस स्टाइल बिना, यो एक्सएचटीएमएल मेनु एक मानक अङ्कित सूची जस्तो देखिन्छ। त्यहाँ गोलेटहरू छन् र सूची वस्तुहरू थोडा इन्डेन्टेड छन्। किनभने म प्लेसहोल्डर लिङ्कहरू प्रयोग गरिरहेको छु, धेरै ब्राउजरले क्लिक गर्न योग्य (रेखांकित र निलो) लिङ्कहरू प्रदर्शन गर्दैन। यदि तपाईंले माथिको HTML मा वेब पेजमा टाँस्नु हुन्छ भने, तपाइँको नेभिगेसन यस्तो देखिन्छ:
- घर
- उत्पादनहरू
- सेवाहरू
- हामीलाई सम्पर्क गर्नुहोस
यो सुन्दर उबाऊ छ र एक मेनु जस्तो देखिन्छन। तर केहि सीएसएस शैलीले सूचीमा थपेको छ, तपाईले एउटा मेनु सिर्जना गर्न सक्नुहुन्छ जुन गर्व गर्दछ।
ठाडो नेभिगेसन मेनु
एक ठाडो नेविगेशन मेनु धेरै लेख्न सजिलो छ किनभने यो सामान्य सूचीको रूपमा देखा पर्दछ: माथि र तल।
सूची वस्तुहरूले ठाडो रूपमा पृष्ठ तल देखाउँछन्।
जब म मेनु स्टाइल गर्दै छु, म बाहिर सुरू गर्न चाहन्छु र काम गर्छु। यसबाट, मैले भनेको हो कि मैले पहिले उल # नेभिगेसन स्टाइल र त्यसपछि लि तत्वहरू र त्यस लिङ्कहरू आदिमा जानुहोस्। यस मेनुको लागि, पहिले तपाईं मेनुको चौडाइ परिभाषित गर्नुहुन्छ। यसले यो सुनिश्चित गर्नेछ कि मेनु वस्तुहरू लामो भए तापनि तिनीहरू लेआउटको बायाँ धकेल्न वा क्षैतिज स्क्रॉल गर्ने छैनन्।
ul # navigation {width: 12em; }
एक पटक चौडाइ सेट पाउनु भएपछि, म सूची वस्तुहरूसँग प्ले गर्न सक्छु। यसले मलाई चीजहरू (गोलेटहरूबाट छुटकारा पाउन), पृष्ठभूमि रङहरू, सीमानाहरू, पाठ पङ्क्तिबद्ध र मार्जिनहरू सेट गर्न दिन्छ।
ul # navigation li {
सूची शैली: कुनै पनि होइन;
पृष्ठभूमि रंग: # 03 9;
सीमाना-शीर्ष: ठोस 1px # 03 9;
पाठ-पङ्क्तिबद्ध: बायाँ;
मार्जिन: 0;
}
जब तपाइँ सूची वस्तुहरूको लागि आधारभूत सेट गर्नुभए पछि तपाई मेनु लिङ्क क्षेत्रमा कसरी हेर्नुहुन्छ भनेर प्ले गर्न सुरु गर्न सक्नुहुन्छ। पहिलो शैली यूएल # नेभिगेशन लि ए ए र त्यसपछि ए: लिङ्क, ए: भ्रमण भयो, ए: होभर, र ए: सक्रिय (यदि तपाईं चाहनुहुन्छ भने)। लिङ्कहरूको लागि, म लिङ्कहरू एक ब्लक तत्व (डिफल्ट इन-लाइनको सट्टा) बनाउन चाहन्छु। यो उनीहरूलाई लिफ्टको सम्पूर्ण ठाउँ लिनको लागि बलियो बनाउँछ र उनीहरूले अनुच्छेद जस्तै काम गर्दछ, जसले तिनीहरूलाई मेनु बटनको रूपमा सजिलो बनाउँदछ। अर्को कुरा म सधैं गर्छु, रेखांकन (पाठ सजावट: कुनै पनि;), यसका रूपमा बटनले मलाई बटनहरू जस्तै अधिक देखिन्छ।
तर निस्सन्देह, तपाइँको डिजाइन फरक हुन सक्छ।
ul # navigation li a {
प्रदर्शन: ब्लक;
पाठ सजावट: कुनै पनि होइन;
padding: .25em;
सीमा-तल: ठोस 1px # 3 9;
सीमाना-दायाँ: ठोस 1px # 3 9;
}
ध्यान दिनुहोस् कि प्रदर्शन संग: ब्लक; लिङ्कहरू सेट गर्नुहोस्, मेनु वस्तुको सम्पूर्ण बाकसमा क्लिक योग्य छैन, केवल अक्षरहरू मात्र। यो उपयोगिताको लागि पनि राम्रो छ। यदि तपाइँ तिनीहरू पूर्वनिर्धारित नीलो, रातो र बैंगनीबाट फरक हुनुपर्दछ भने लिङ्क रङ (लिंक, भ्रमण, होभर र सक्रिय) सेट गर्न निश्चित गर्नुहोस्।
a: लिंक, a: भ्रमण गरिएको {रंग: #fff; }
a: होवर, एक: सक्रिय {color: # 000; }
म पनि पृष्ठभूमि रङ परिवर्तन गरेर होभर राज्यलाई अझ बढी ध्यान दिन चाहन्छु।
a: होवर {पृष्ठभूमि रंग: #fff; }
यदि तपाईं ऊर्ध्वाधर मेनुका थप उदाहरणहरू चाहनुहुन्छ भने, तल सूचीमा परामर्श गर्नुहोस्।
- एक स्टाइल गरियो ऊर्ध्वाधर मेनु
- एक आधारभूत ठाडो मेनु टेम्प्लेट
- तपाईंसँग यहाँ एक स्टाइल गरिएको ठाडो मेनु
- तपाईं यहाँ हुनुहुन्छ एक आधारभूत ठाडो मेनु टेम्प्लेट
तेर्सो नेभिगेसन मेनु
क्षैतिज नेविगेसन मेनू सिर्जना गर्दै ठाडो नेविगेशन मेनु भन्दा कम र अधिक कठिन छ किनभने तपाईले तथ्यलाई अफसेट गर्नु पर्छ कि एचटीएमएल सूचीहरूले ठाडो रूपमा प्रदर्शन गर्न मनपर्छ। क्षैतिज मेनुको रूपमा, पहिले तपाइँको नेभिगेसन मेनु सूची सिर्जना गर्नुहोस्:
क्षैतिज मेनु सिर्जना गर्न, ठाडो मेनुको साथ जस्तै काम गर्नुभयो। बाहिरबाट सुरू गर्नुहोस् र काम गर्नुहोस्। जब म मेरो नेभिगेसन बायाँ कोनेमा सुरू गर्न चाहानुहुन्छ, मैले 0 बायाँ मार्जिन र प्याडिंगको साथ सेट गरें, र म यसलाई बायाँ तिर फर्काउँछु। तपाईंले चौडाई सेट गर्ने आदतमा पनि प्राप्त गर्नु पर्छ ताकि तपाईंको मेनु तपाईको इराक भन्दा बढी वा कम स्थान लिँदैन। तेर्सो मेनूको लागि, यो सामान्यतया डिजाइनको पूर्ण चौडाइ हो। मैले यो सजिलो पढ्न सजिलो सूचीमा पृष्ठभूमि रङ थप्थे।
ul # navigation {
फ्लोट: बायाँ;
मार्जिन: 0;
padding: 0;
चौडाई: 100%;
पृष्ठभूमि रंग: # 03 9;
}
तर क्षैतिज नेभिगेसन मेनुमा गोप्य सूची वस्तुहरूमा छ। सूची वस्तुहरू सामान्यतया तत्वहरू ब्लक हुन्छन्, जसको अर्थ छ कि उनीहरूलाई प्रत्येकका अघि र पछि राखिएको नयाँलाइन हुनेछ। ब्लकबाट प्रदर्शनलाई इनलाइनमा स्विच गरेर, तपाइँ सूची तत्त्वहरूलाई एक अर्का रूपमा एकअर्काको पछि लिङ्क गर्न बल दिनुहुन्छ।
ul # navigation li {display: inline; }
मैले त्यहि लिङ्कहरूको व्यवहार गरे जस्तै मैले तिनीहरूलाई ऊर्ध्वाधर नेभिगेसन मेनुमा समान रंग र पाठ सजावटको साथ व्यवहार गरेँ। मैले शीर्ष सीमा थपेपछि ती बटनहरू तोड्नको लागि उनीहरूलाई घुमाईयो। मैले हटाउने एकमात्र चीज प्रदर्शन थियो: ब्लक; जस्तै कि नयाँलाइनहरू फिर्ता आउँदछ र तेर्सो मेनुलाई नष्ट गर्नेछ।
ul # navigation li a {
पाठ सजावट: कुनै पनि होइन;
padding: .25em 1em;
सीमा-तल: ठोस 1px # 3 9;
सीमाना-शीर्ष: ठोस 1px # 3 9;
सीमाना-दायाँ: ठोस 1px # 3 9;
}
a: लिंक, a: भ्रमण गरिएको {रंग: #fff; }
ul # navigation li a: hover {
पृष्ठभूमि रंग: #fff;
रंग: # 000;
}
तपाईं यहाँ स्थान जानकारी हुनुहुन्छ
HTML को अर्को पहलू youarehere पहिचानकर्ता हो। यदि तपाइँ आफ्नो मेनुको हालको स्थान संकेत गर्न आफ्नो मेनु परिमार्जन गर्न चाहनुहुन्छ भने, केवल यो आईडी प्रयोग गर्नुहोस् कि फरक पृष्ठभूमि रङ परिभाषित गर्न वा अन्य शैली। त्यो आइडी विशेषतालाई अन्य पृष्ठहरूमा सही मेनु वस्तुमा सार्नुहोस् ताकि हालको पृष्ठ संधै हाइलाइट गरिएको छ।
ul # navigation li # youherehere {पृष्ठभूमि रंग: # 09f; }
यदि तपाइँ यी शैलीहरू तपाईंको पृष्ठमा सँगै राख्नुहुन्छ भने, तपाइँ तेर्सो वा ठाडो मेनु पट्टी सिर्जना गर्न सक्नुहुन्छ जुन तपाईंको साइटसँग काम गर्दछ तर भविष्यमा अद्यावधिक गर्न सजिलो छ। XHTML + CSS प्रयोग गरेर तपाईंको सूचीहरू डिजाइनको लागि एक धेरै शक्तिशाली उपकरणमा बदल्दछ।
यदि तपाइँ तेर्सो मेनूको थप उदाहरणहरू चाहनुहुन्छ भने, तल परामर्श गर्नुहोस्।
- एक स्टाइल गरिएको तेर्सो मेनू
- एक आधारभूत तेर्सो मेनु टेम्प्लेट
- तपाईंसँग यहाँ स्टाइल गरिएको क्षैतिज मेनु
- तपाईं यहाँ हुनुहुन्छ साथ एक आधारभूत तेर्सो मेनु टेम्प्लेट