06 पैकी 01
CSS आणि No Images सह टॅब्ड नेव्हिगेशन कसे तयार करावे
वेब पृष्ठांवर नेव्हिगेशन सूचीचा एक प्रकार आहे आणि टॅब केलेली नेव्हिगेशन क्षैतिज सूचीप्रमाणे आहे. CSS सह आडवे टॅबबद नेव्हिगेशन तयार करणे हे अगदी सोपे आहे, परंतु CSS 3 आपल्याला आणखी चांगले साधने देते जेणेकरून ते अगदी छान दिसण्यास मदत करतील.
हे ट्यूटोरियल आपल्याला CSS टॅबबर्ड मेनू तयार करण्यासाठी आवश्यक HTML आणि CSS द्वारे घेऊन जाईल. तो कसा दिसेल ते पाहण्यासाठी त्यावर क्लिक करा.
हे टॅब मेनू कोणत्याही प्रतिमा वापरत नाही , केवळ एचटीएमएल व सीएसएस 2 आणि सीएसएस 3. अधिक टॅब्ज जोडण्यासाठी किंवा त्यात मजकूर बदलण्यासाठी सहजपणे संपादित केले जाऊ शकते.
ब्राउझर समर्थन
हा टॅब मेनू सर्व प्रमुख ब्राउझरमध्ये कार्य करेल. इंटरनेट एक्सप्लोरर गोलाकार कोप दर्शविणार नाही परंतु अन्यथा तो फायरफॉक्स, सफारी, ओपेरा आणि क्रोम सारख्या टॅब्ज दर्शवेल.
06 पैकी 02
आपली मेनू लिहा
सर्व नेव्हिगेशन मेन्यूज आणि टॅब्स खरोखरच एक unordered यादी आहेत. तर पहिली गोष्ट जिथे आपण टॅब्ड नेव्हिगेशनला जाण्याची इच्छा आहे त्या लिंकची एकसारखी यादी लिहा नाही.
हे ट्यूटोरियल गृहीत धरून आहे की आपण आपल्या HTML ला टेक्स्ट एडिटरमध्ये लिहित आहात आणि आपल्याला माहित आहे की आपल्या वेब पृष्ठावर आपल्या मेनूसाठी एचटीएमएल कुठे ठेवावे.
आपल्या अशासारख्या अक्रमांकित यादी लिहा:
- class = "tablist">
- सीएसएस 3
- id = "current"> टॅब
- च्या साठी
- मेनू
आपण लक्षात येईल की कोड दोन गोष्टींचा उल्लेख करतो: class = "tablist" आणि id = "current". प्रथम आवश्यक आहे . आपण आपल्या अक्रमांकित यादीत टॅब्लिस्ट वर्ग ठेवले नाहीत तर, टॅब्ज कार्य करणार नाही. दुसरा पर्यायी आहे. आपण त्या पृष्ठावरील कोणते टॅब हायलाइट करावे हे आयडी = "वर्तमान" ठेवा. मी सामान्यतः याचा वापर पृष्ठावर हायलाइट करण्यासाठी करतो, परंतु आपण ते सर्वात महत्वाचे टॅब हायलाइट करण्यासाठी वापरू शकता. किंवा आपण ती पूर्णपणे काढू शकता
06 पैकी 03
आपली शैली पत्रक संपादित करणे प्रारंभ करा
आपण एकतर बाह्य शैली पत्रक किंवा अंतर्गत शैली पत्रक वापरू शकता नमुना मेनू पृष्ठ दस्तऐवजाच्या
मध्ये अंतर्गत शैली पत्रक वापरते.प्रथम आम्ही यूएल स्वतःची शैली करीन
इथेच आम्ही क्लास टॅब्लिस्ट वापरतो .HTML मध्ये UL टॅगला शैली न टाकता, जे आपल्या पृष्ठावर सर्व अ-सूचीकृत सूचनेची शैली करेल, आपल्याला फक्त UL क्लासची शैली पाहिजे. tablist त्यामुळे आपल्या सीएसएस मध्ये प्रथम नोंद खालील असावी:
.tablist {}मला शेवटच्या वेळेस कुरळे करणे (}} घालणे आवडते, म्हणून मी हे नंतर विसरू शकत नाही.
आम्ही टॅब मेनू सूचीसाठी एक अनारोडांकित सूची टॅग वापरत असताना, परंतु आम्हाला कोणत्याही बुलेट्स किंवा संख्या जिवंत नाहीत. म्हणून आपण जो पहिला शैली जोडला पाहिजे तो आहे. सूची-शैली: काहीही नाही; हे ब्राउझरला सांगते की ही सूची आहे, ती एक पूर्व-निर्धारित शैली नसलेली एक यादी आहे (जसे बुलेट किंवा संख्या).
नंतर, आपण आपल्या यादीची उंची ते आपण भरू इच्छित असलेल्या जागेशी जुळण्यासाठी सेट करू शकता. मी माझ्या उंचीसाठी 2 नाम निवडले, कारण ते मानक फॉन्ट आकारात दुप्पट आहे आणि टॅबच्या मजकुरापेक्षा वरील आणि निम्म्यापेक्षा अर्धा आहे. उंची: 2 एएम; परंतु आपण आपली रूंदी ते आकार जेणेकरून आपल्याला आवडेल ते सेट करू शकता उल टॅग्ज आपोआप 100% रूंदीचा घेईल, म्हणजे जोपर्यंत आपण तो वर्तमान कंटेनरपेक्षा लहान असणार नाही तोपर्यंत आपण रुंदी बाहेर सोडू शकता.
अखेरीस, आपल्या मास्टर शैली पत्रकात UL आणि OL टॅग्जसाठी प्रिसेट्स नसल्यास, आपण त्यांना ठेवू इच्छित असाल. याचा अर्थ आपण आपल्या उलवर सीमा, मार्जिन आणि पॅडिंग बंद करणे आवश्यक आहे. पॅडिंग: 0; समास: 0; सीमा: काहीही नाही; आपण आधीपासूनच UL टॅग रीसेट केला असेल तर, आपण आपल्या डिझाइनसह फिट असणारी काहीतरी मार्जिन्स, पॅडिंग किंवा बॉर्डर बदलू शकता
आपले अंतिम .टीब्लीिस्ट वर्ग हे दिसले पाहिजे:
.tablist {list-style: none; उंची: 2 एएम; पॅडिंग: 0; समास: 0; सीमा: काहीही नाही; }04 पैकी 06
LI सूची आयटम संपादित करणे
एकदा आपण आपली अमर्यादित सूची शैली केल्यानंतर, आपल्याला त्याच्या आत LI टॅग करणे आवश्यक आहे. अन्यथा, ते आपले टॅब योग्यरित्या ठेवल्याशिवाय ते पुढील सूचीवर एक मानक सूची आणि प्रत्येक हलाप्रमाणे कार्य करतील
प्रथम, आपली शैली गुणधर्म सेट करा:
.tablist li {}नंतर आपण आपले टॅब फ्लोट करू इच्छित आहात जेणेकरून ते क्षैतिज विमानावर जोडले जातील फ्लोट: डावे;
आणि टॅब दरम्यान काही मार्जिन जोडण्याचे विसरू नका, जेणेकरून ते एकत्र विलीन होणार नाहीत. समास-उजवीकडे: 0.13em;
आपल्या ली शैली असे दिसले पाहिजे:
.tablist li {float: left; समास-उजवीकडे: 0.13em; }06 ते 05
टॅब 3 सीएसएस 3 सह टॅब्स प्रमाणे पहा
या शैली पत्रकात जास्तीत जास्त उचल करण्यासाठी, मी अ-सूचीबद्ध सूचीमधील दुवे लक्ष्यित करीत आहे. अन्य टॅगपेक्षा वेब पृष्ठावर दुवे अधिक करतात हे ब्राऊजर ओळखतात, ज्यामुळे आपण जुन्या ब्राऊझर्सला अँकर टॅग (दुवे) वर जोडलेले असल्यास हॉवर राज्यांसारख्या गोष्टींचे अनुपालन करणे अधिक सोपे होते. तर प्रथम आपली शैली गुणधर्म लिहा:
.tablist li a {} .tablist li a: hover {}कारण या टॅब्जने एखाद्या अनुप्रयोगामध्ये टॅब्सप्रमाणे कार्य केले पाहिजे, आपण फक्त दुवा असलेला मजकूर नव्हे तर टॅबवरील संपूर्ण क्षेत्र क्लिक करण्यायोग्य करू इच्छित आहात. हे करण्यासाठी, आपल्याला ए टॅगला सामान्य " इनलाइन " स्थितीत एका ब्लॉक घटकामध्ये रुपांतरीत करावे लागेल. प्रदर्शन: ब्लॉक; (फरकबद्दल अधिक जाणून घेण्यात आपल्याला स्वारस्य असल्यास, ब्लॉक-स्तर वि. इनलाइन घटक वाचा.)
नंतर, आपल्या टॅब एकमेकांना सममित असण्यास प्रवृत्त करण्याचा एक सोपा मार्ग आहे, परंतु मजकूराच्या रुंदीला फिट करण्यासाठी अद्याप वाकड दाब आणि डावा पॅडिंग समान बनवणे आहे. मी वर आणि खालच्या वरून 0 पर्यंत डावीकडे आणि 1em वर डावीकडे पॅडिंग लघुलिपी गुणधर्म वापरला. पॅडिंग: 0 1em;
मी लिंक खाली रेखाटण्याचाही पर्याय निवडला, जेणेकरून टॅब्ज दुवेसारखे दिसू लागतील. परंतु जर आपले प्रेक्षक कदाचित गोंधळले असतील तर हे ओळ सोडून द्या. दुवा-सजावट: काहीही नाही;
टॅब्जच्या सभोवती एक पातळ सीमा ठेवून, ते टॅब्जसारखे दिसतात. मी सीमावर्ती लांबी असलेला मालमत्ता वापरतो ज्याने सीमेच्या चार बाजूंच्या सीमारेखास ठेवणे: 0.06 इंच घन # 000; आणि नंतर तळापासून काढून टाकण्यासाठी सीमा-तळातील मालमत्तेचा वापर केला. सीमा-तळ: 0;
नंतर मी टॅब्जच्या फॉन्ट, रंग आणि पार्श्वभूमी रंगाचे काही समायोजन केले. हे आपल्या साइटशी जुळणार्या शैलींवर सेट करा फॉन्ट: ठळक 0.88EM / 2 एएम एरियल, गिनवे, हेल्व्हटिका, सेन्स-सेरिफ; रंग: # 000; पार्श्वभूमी-रंग: # सीसीसी;
वरील सर्व शैली निवडक मध्येच असणे आवश्यक आहे .Tabist li a, नियम म्हणजे ते सर्वसाधारणपणे अँकर टॅगला प्रभावित करतील. नंतर टॅब अधिक क्लिक करण्यायोग्य बनवण्यासाठी, आपण काही राज्य नियम जोडावे .tablist li a: hover
मी जेव्हा माउस त्यावर क्लिक करतो तेव्हा टॅब पॉप बनविण्यासाठी मी मजकूर आणि पार्श्वभूमीचा रंग बदलू इच्छितो. पार्श्वभूमी: # 3cf; रंग: #fff;
आणि मला ब्राउझरमध्ये आणखी एक स्मरणपत्र समाविष्ट केले जे मला इच्छितो की दुवा अधोरेखित नाही. टेक्स्ट-सजावट: काहीही नाही; आणखी एक सामान्य पद्धत म्हणजे खालील टॅबवर जेव्हा आपण माउस असतो तेव्हा रेखांकित करा. आपण हे करू इच्छित असल्यास, ते मजकूर-सजावटमध्ये बदला: अधोरेखित करा;
पण सीएसएस 3 कोठे आहे?
आपण लक्ष देत असल्यास, आपण असे लक्षात आले असेल की शैली पत्रकामध्ये वापरलेली कोणतीही CSS 3 शैली नसावी. इंटरनेट एक्सप्लोररसह, कोणत्याही आधुनिक ब्राऊजरमध्ये काम करण्याचा हा फायदा आहे. परंतु हे टॅब्लेट चौरस बॉक्सपेक्षा अधिक कशासारखे दिसत नाहीत. एक CSS 3 शैली कॉल सीमा-त्रिज्या (आणि ते संबंधित ब्राउझर-विशिष्ट कॉल्स) जोडून आपण किनाऱ्यावर फेरफटका मारू शकता, एक मनिला फोल्डरवरील टॅबप्रमाणे अधिक पाहण्यासाठी.
आपण .tablist वर जो शैली जोडायला हवी ती नियम अशी आहेत: - वेबकिट-सीमा-शीर्ष उजवे त्रिज्या: 0.50 चे; -webkit-border-top-left-radius: 0.50em; -मोझ-सीमा-त्रिज्येची-सर्वोच्च: 0.50 एएम; -मोझ-सीमा-त्रिज्येचे-तेलफूट: 0.50 चे; सीमा-शीर्ष-उजवा-त्रिज्या: 0.50 नाम; सीमा-शीर्ष-डावा-त्रिज्या: 0.50 महिना;
हे मी लिहिले अंतिम शैली नियम आहेत:
.tablist li {display: block; पॅडिंग: 0 1em; टेक्स्ट-सजावट: काहीही नाही; सीमा: 0.06 मऊ # 000; सीमा-तळ: 0; फॉन्ट: ठळक 0.88EM / 2 एएम एरियल, गिनवे, हेल्व्हटिका, सेन्स-सेरिफ; रंग: # 000; पार्श्वभूमी-रंग: # सीसीसी; / * CSS 3 घटक * / webkit-border-top-right-radius: 0.50 नाम; -webkit-border-top-left-radius: 0.50em; -मोझ-सीमा-त्रिज्येची-सर्वोच्च: 0.50 एएम; -मोझ-सीमा-त्रिज्येचे-तेलफूट: 0.50 चे; सीमा-शीर्ष-उजवा-त्रिज्या: 0.50 नाम; सीमा-शीर्ष-डावा-त्रिज्या: 0.50 महिना; } .tablist li a: hover {background: # 3cf; रंग: #fff; टेक्स्ट-सजावट: काहीही नाही; }या शैलींसह, आपल्याकडे एक टॅब्ड मेनू आहे जो सर्व प्रमुख ब्राउझरमध्ये कार्य करतो आणि CSS 3 अनुरूप ब्राउझरमध्ये छान छापील टॅबप्रमाणे दिसते. पुढील पृष्ठ आपल्याला आणखी एक पर्याय देते ज्याचा वापर आपण त्यास आणखी वाढवण्यासाठी करू शकता.
06 06 पैकी
वर्तमान टॅब हायलाइट करा
मी बनवलेल्या एचटीएमएलमध्ये, 'आयएल' मध्ये ID सह एक सूची घटक होता. हे आपल्याला इतरांपासून एक LI ला वेगळ शैली देण्याची परवानगी देते. सर्वात सामान्य परिस्थिती म्हणजे सध्याच्या टॅबला काही मार्गांनी बाहेर काढावे. याचा विचार करण्याचा आणखी एक मार्ग म्हणजे आपण जी टॅब नसलेली राखाडी करू इच्छिता आपण वेगवेगळ्या पृष्ठांवर कुठे आहे ते बदलू शकता.
I #turrent ए टैग तसेच #current A: hover sta दोन्ही शैली आहे जेणेकरून दोन्ही थोडा वेगळं असेल. आपण त्या रंगाचा रंग, पार्श्वभूमी रंग, उंची, रुंदी आणि पॅडिंग देखील बदलू शकता. जे काही बदल आपल्या डिझाइनमध्ये अर्थपूर्ण बनवा.
.tablist li # current a {background-color: # 777; रंग: #fff; } .tablist li # current a: hover {background: # 39C; }आणि आपण पूर्ण केले! आपण नुकतीच आपल्या वेबसाइटसाठी एक टॅब केलेले मेनू तयार केले आहे.