सीएसएस र कुनै छविहरूको साथ ट्याब्ड नेभिगेसन कसरी बनाउने?

01 को 06

सीएसएस र कुनै छविहरूको साथ ट्याब्ड नेभिगेसन कसरी बनाउने?

वेब पृष्ठहरूमा नेभिगेसन सूचीको एक रूप हो, र ट्याब गरिएको नेभिगेसन क्षैतिज सूची जस्तो छ। CSS सँग तेर्सो ट्याबब्याड नेविगेसन सिर्जना गर्न यो सजिलो छ, तर सीएसएस 3 ले हामीलाई अझ राम्रो हेर्न लगाउन केहि थोरै उपकरण दिन्छ।

यस ट्यूटोरियलले CSS ट्याब्लेट मेनु सिर्जना गर्न आवश्यक HTML र CSS मार्फत ल्याउनेछ। यो लिंकमा क्लिक गर्नुहोस् यो कसरी हेर्ने भनेर हेर्नको लागि।

यो ट्याब गरिएको मेनुले कुनै तस्बिरहरू , केवल HTML र CSS 2 र CSS 3. प्रयोग गर्दछ। यो थप ट्याब थप गर्न वा पाठ परिवर्तन गर्न सजिलै सम्पादन गर्न सकिन्छ।

ब्राउजर समर्थन

यो ट्याब मेनु सबै प्रमुख ब्राउजरमा काम गर्नेछ। इन्टरनेट अन्वेषकले गोल्ड कोनेहरू देखाउने छैन, तर अन्यथा, यसले फायरफक्स, सफारी, ओपेरा, र क्रोम जस्ता ट्याबहरू देखाउनेछ।

02 को 06

तपाईंको मेनु सूची लेख्नुहोस्

सबै नेभिगेसन मेनु र ट्याबहरू वास्तवमा केवल एक अङ्कित सूची हो। त्यसोभए पहिलो कुरा तपाईं गर्न चाहानुहुन्छ लिङ्कहरूको अङ्कित सूची लेख्नु हुन्छ जहाँ तपाइँ तपाइँको ट्याब्लेट नेभिगेसन जाने चाहानुहुन्छ।

यो ट्यूटोरियल मानिन्छ कि तपाई आफ्नो एचटीएमटी टेक्स्ट सम्पादकमा लेख्नुहुन्छ र तपाईले तपाइँको वेब पृष्ठमा तपाइँको मेनुको लागि एचटीएमएल राख्न कहाँ जान्नुहुन्छ।

तपाईंको अङ्कित सूची लेख्नुहोस्:

• class = "tablist">
  • CSS 3
  • id = "current"> ट्याबहरू
  • लागि
  • मेनु

  तपाईले सोचेको छ कि कोडले दुई चीजहरू कल गर्दछ: class = "tablist" र id = "current"। पहिलो आवश्यक छ । यदि तपाईंले आफ्नो अङ्कित सूचीमा ट्याबसूची सूची राख्नुभएन भने, ट्याबले काम गर्दैन। दोस्रो वैकल्पिक छ। कुनै पनि ट्याबमा तपाईलाई पृष्ठमा हाइलाइट गर्न चाहानु भएको आईडीमा "वर्तमान" राख्नुहोस्। म यो सामान्यतया यो प्रयोग गर्ने पृष्ठलाई हाइलाइट गर्न प्रयोग गर्दछ, तर तपाईं यसको महत्त्वपूर्ण ट्याबलाई हाइलाइट गर्न यसको प्रयोग गर्न सक्नुहुनेछ। अथवा तपाईं यसलाई पुरा गर्न सक्नुहुनेछ।

03 को 06

तपाईंको शैली पाना सम्पादन शुरू गर्नुहोस्

तपाईं बाह्य शैली पाना वा आन्तरिक शैली पानाको प्रयोग गर्न सक्नुहुनेछ। नमूना मेनु पृष्ठले कागजातको आन्तरिक शैली पाना प्रयोग गर्दछ।

पहिलो हामी आफ्नै यूएल शैलीमा लानुपर्छौं

यो हामी जहाँ कक्षा ट्याबलिस्ट प्रयोग गर्छौं। HTML मा। यूएल ट्यागलाई स्टाइल गर्नुको सट्टा, जुन तपाईको पृष्ठमा सबै अङ्कित सूचीहरू शैली गर्नुपर्नेछ, तपाईले शैली मात्र UL कक्षामा शैली गर्नु पर्छ। ट्याबलिस्ट त्यसैले तपाइँको सीएसएसमा पहिलो प्रविष्टि हुनुपर्छ:

.tablist {}

म अन्तिम घुमाउरो घुमाउने क्रेस (}) भित्र राख्न चाहन्छु, त्यसैले मैले पछि यसलाई बिर्सनु हुँदैन।

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

त्यसोभए, तपाईंले स्पेसलाई भर्नु भएको स्पेस मेल गर्न आफ्नो सूचीको उचाइ सेट गर्न सक्नुहुन्छ। मैले मेरो उचाइको लागि 2em चुनेको छु, किनकि त्यो मानक फन्ट आकार दुबै हो, र ट्याबको पाठ माथि र तल आधा एक मिनेट दिन्छ। उचाई: 2em; तर तपाईं आफ्नो चौडाई जो पनि चाहानुहुन्छ जुन सेट गर्न सक्नुहुन्छ। UL ट्यागहरू स्वचालित रूपमा चौडाइको 100% ले उठाउँछन्, त्यसैले जबसम्म तपाई यसलाई हालको कन्टेनर भन्दा सानो हुनुहुन्न, तपाइँ चौडाइ बाहिर छोड्न सक्नुहुनेछ।

अन्तमा, यदि तपाईंको मास्टर शैली पानामा UL र OL ट्यागहरूको लागि प्रिसेटहरू छैनन् भने, तपाइँ तिनीहरूलाई इन्टर गर्न चाहानुहुन्छ। यसको अर्थ तपाईंले आफ्नो उल मा किनाराहरू, सीमाहरू, र प्याडिङ बन्द गर्नुपर्छ। padding: 0; मार्जिन: 0; किनारा: कुनै पनि होइन; यदि तपाईले पहिले नै UL ट्याग रिसेट गर्नुभयो भने, तपाईं आफ्नो डिजाईनसँग मेल खाने कुरामा मार्जिन, प्याडिङ, वा बोर्डर परिवर्तन गर्न सक्नुहुनेछ।

तपाईंको अन्तिम .ट्याबलिस्ट वर्गलाई यो हेर्नुपर्दछ:

.ट्याबसूची {सूची शैली: कुनै पनि होइन; उचाई: 2em; padding: 0; मार्जिन: 0; किनारा: कुनै पनि होइन; }

04 को 06

LI सूची वस्तुहरू सम्पादन गर्दै

एकपटक तपाईंले आफ्नो अङ्कित सूची स्टाइल गरेपछि, तपाइँले भित्र लिप ट्यागहरू शैली गर्न आवश्यक छ। अन्यथा, तिनीहरू मानक सूची जस्तो कार्य गर्नेछ र अर्को ट्याबमा प्रत्येक ट्याब सही रूपमा राख्ने बिना प्रत्येक कदम चाल्नेछ।

पहिलो, तपाईंको शैलीको सम्पत्ति सेट अप गर्नुहोस्:

.tablist li {}

त्यसपछि तपाइँ आफ्नो ट्याबहरू फ्याट गर्न चाहनुहुन्छ ताकि तिनीहरू क्षैतिज विमानमा पङ्क्तिबद्ध गर्नुहोस्। फ्लोट: बायाँ;

र ट्याबहरू बीच केहि मार्जिन थप्न नबिर्सनुहोस्, त्यसैले तिनीहरू एकसाथ मर्ज गर्दैनन्। मार्जिन-दायाँ: 0.13em;

तपाईंको ली शैलीहरू यो जस्तै हुनुपर्छ:

.tablist li {फ्लोट: बायाँ; मार्जिन-दायाँ: 0.13em; }

05 को 06

ट्याब्स जस्तै सीएसएस 3 सँग ट्याब लगाउनुहोस्

यस शैली पानामा धेरै भारी लिफ्ट गर्न को लागी, म अङ्कित सूची भित्र लिंकहरू लक्षित गर्दैछु। ब्राउजरहरूले पहिचान गर्दछन् कि अन्य लिङ्कहरू वेब ट्यागमा अन्य ट्यागमा बढी हुन्छन्, त्यसैले पुरानो ब्राउजरहरू होभर स्टेटहरू जस्तै चीजहरूको पालन गर्न सजिलो छ भने तपाईंले तिनीहरूलाई लङ्कन (लिंकहरू) मा संलग्न गर्नुहुन्छ। त्यसैले पहिले तपाईंको शैली गुणहरू लेख्नुहोस्:

.tablist li a {} .tablist li a: hover {}

किनकि यी ट्याबहरूले अनुप्रयोगमा ट्याबहरू जस्तै कार्य गर्नु पर्छ, तपाइँ ट्याबको सम्पूर्ण क्षेत्र क्लिक गर्न सकिने, चाहिएको लिङ्क गरिएको टेक्स्ट मात्र चाहानुहुन्छ। यो गर्नका लागि, तपाईले "normal" inline "state बाट एक ब्ल्याक तत्वमा ए ट्याग परिवर्तन गर्नुपर्दछ। प्रदर्शन: ब्लक; (यदि तपाईं फरक बारेमा जान्न चाहानुहुन्छ भने, ब्लक-लेवल को इनलाइन तत्वहरू पढ्नुहोस्।)

त्यसपछि, तपाईंको ट्याबहरूलाई एकअर्कासँग सममित हुन बलियो बनाउन एक सरल तरिका हो, तर पाठको चौडाइ फिट गर्न फ्लेक्सले दाँया र बायाँ प्याडिङ पनि बनाएको छ। मैले प्याडिंग आर्थक सम्पत्ति प्रयोग गरी शीर्ष र तल 0 र दायाँ र बायाँ 1em सम्म सेट गर्न प्रयोग गर्यो। padding: 0 1em;

मैले लिङ्क रेखांकनहरू हटाउन पनि रोजेका थियौं, ताकि ट्याबहरू लिङ्क जस्तो कम देखिन्छ। तर यदि तपाईका श्रोताहरूले त्यसमा उलझन सक्छ भने यो लाइन छोड्नुहोस्। लिङ्क सजावट: कुनै पनि होइन;

ट्याबहरूको वरिपरि पतली सिमाना राखेर, यसले तिनीहरूलाई ट्याबको रूपमा देखाउँछ। मैले सीमा पारित सम्पत्ति प्रयोग गरेको चारवटा पक्षहरू वरिपरि सीमा सीमा राख्न: 0.06em ठोस # 000; र त्यसपछि सीमा-तल सम्पत्ति प्रयोग गरी यसलाई तल हटाउन। border-bottom: 0;

त्यसपछि मैले ट्याबहरूको फन्ट, रङ र पृष्ठभूमिको रंगमा केही समायोजन गरे। यी साइटहरूसँग मेल खाने जुन तपाईंको साइटसँग मेल खान्छ। फन्ट: बोल्ड 0.88 एम / 2 एम अरिअल, जेनेभा, हेलभेटिका, सेन्स-सेरिफ; रंग: # 000; पृष्ठभूमि रंग: #ccc;

माथिका सबै शैलीहरू चयनकर्तामा जानुपर्छ .tablist li a, नियम ताकि तिनीहरू सामान्य रूपमा लङ्कन ट्यागलाई प्रभाव पार्छ। त्यसपछि ट्याबहरू थप क्लिक गर्न मिल्दैन, तपाइँले केही राज्य नियम थप गर्नुपर्छ।

मैले ट्याब पप बनाउनको लागि पाठ र पृष्ठभूमिको रङ परिवर्तन गर्न मनपर्छ जब तपाईं यो माथि माउस गर्नुहुन्छ। पृष्ठभूमि: # 3cf; रंग: #fff;

र मैले ब्राउजरहरूमा अर्को अनुस्मारक समावेश गरेको छु जुन म लिंक गर्न चाहँदैन। पाठ सजावट: कुनै पनि होइन; अर्को साधारण तरिकामा ट्याबमा माउस हुँदा रेखालाई फर्काउँछ। यदि तपाइँ त्यसो गर्न चाहनुहुन्छ भने, पाठ-सजावटमा यसलाई परिवर्तन गर्नुहोस्: रेखांकित;

तर सीएसएस 3 कहाँ छ?

यदि तपाइँ ध्यान दिइरहनुभएको छ भने, तपाईंले सम्भव छ कि शैली पानामा प्रयोग गरिएका कुनै पनि सीएसएस 3 शैलीहरू छैनन्। योसँग कुनै पनि आधुनिक ब्राउजरमा काम गर्ने फाईदा छ, इन्टरनेट एक्सप्लोरर सहित। तर यसले ट्याबहरू बक्स बक्स भन्दा बढी जस्तो देखिन्छ। एक CSS 3 शैली कल सीमाना-रेडियस थप्दा (र यो सम्बद्ध ब्राउजर-विशेष कलहरू) तपाइँ किन किनाराहरू म्यानिला फोल्डरमा ट्याबहरू जस्तै हेर्नको किनाराहरू बनाउन सक्नुहुन्छ।

तपाईले यो नियमलाई .tablist मा एक नियममा थप गर्नु पर्छ: - वेब-सीमा-शीर्ष-दायाँ-रेडियस: 0.50em; -webkit-border-top-left-radius: 0.50em; -मोज-सीमा-रेडियस-टाइटाइट: 0.50em; -मोज-सीमा-रेडियस-टुप्पल: 0.50em; किनारा-शीर्ष-दायाँ-रेडियस: 0.50em; सीमा-शीर्ष-बाँया-त्रिज्या: 0.50em;

यी अन्तिम शैली नियमहरू मैले लेखे:

.tablist li a {display: block; padding: 0 1em; पाठ सजावट: कुनै पनि होइन; सीमा: 0.06em ठोस # 000; border-bottom: 0; फन्ट: बोल्ड 0.88 एम / 2 एम अरिअल, जेनेभा, हेलभेटिका, सेन्स-सेरिफ; रंग: # 000; पृष्ठभूमि रंग: #ccc; / * सीएसएस 3 तत्व * / वेबकिट-सीमा-शीर्ष-दायाँ-त्रिज्या: 0.50em; -webkit-border-top-left-radius: 0.50em; -मोज-सीमा-रेडियस-टाइटाइट: 0.50em; -मोज-सीमा-रेडियस-टुप्पल: 0.50em; किनारा-शीर्ष-दायाँ-रेडियस: 0.50em; सीमा-शीर्ष-बाँया-त्रिज्या: 0.50em; } .tablist li a: hover {background: # 3cf; रंग: #fff; पाठ सजावट: कुनै पनि होइन; }

यी शैलीहरूसँग, तपाइँसँग ट्याब गरिएको मेनु भएको छ जुन सबै प्रमुख ब्राउजरमा कार्य गर्दछ र सीएसएस 3 अनुकुल ब्राउजरमा राम्रो छापिएका ट्याबहरू देखिन्छ। अर्को पृष्ठले तपाइँलाई अझ बढि ड्रेस अप गर्न प्रयोग गर्न एक विकल्प प्रदान गर्दछ।

06 को 06

हालको ट्याब हाइलाइट गर्नुहोस्

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

म #current ए ट्याग दुवै शैली र #current ए: होवर sta ताकि ताकि दुवै थोडा फरक हो शैली। तपाईं त्यस तत्वको रङ, पृष्ठभूमि रङ, उचाइ उचाइ, चौडाइ र चौडाइ परिवर्तन गर्न सक्नुहुनेछ। जो पनि परिवर्तनहरू तपाईंको डिजाइनमा अर्थ बनाउँदछ।

.tablist li # वर्तमान एक {पृष्ठभूमि रंग: # 777; रंग: #fff; } .tablist li # हाल को एक: होवर {पृष्ठभूमि: # 3C; }

र तपाईंले गर्नुभयो! तपाईंले आफ्नो वेबसाइटको लागि ट्याब गरिएको मेनु सिर्जना गर्नुभयो।