వెబ్ పుటలలో నావిగేషన్ అనేది ఒక జాబితా, మరియు టాబ్డ్ నావిగేషన్ సమాంతర జాబితా లాగా ఉంటుంది. ఇది CSS తో హారిజాంటల్ టాబ్డ్ పేజీకి సంబంధించిన లింకులు సృష్టించడానికి చాలా సులభం, కానీ CSS 3 వాటిని మరింత NICER చూడండి చేయడానికి మాకు కొన్ని మరింత టూల్స్ ఇస్తుంది.
ఈ ట్యుటోరియల్ CSS ట్యాబ్డ్ మెనూను రూపొందించడానికి అవసరమైన HTML మరియు CSS ద్వారా మిమ్మల్ని తీసుకెళ్తుంది. అది ఎలా కనిపిస్తుందో చూడటానికి లింక్పై క్లిక్ చేయండి.
ఈ ట్యాబ్ చేసిన మెను ఉపయోగిస్తుందిచిత్రాలు లేవు, కేవలం HTML మరియు CSS 2 మరియు CSS 3. ఇది మరింత టాబ్లను జోడించడానికి లేదా వాటిని టెక్స్ట్ మార్చడానికి సులభంగా సవరించవచ్చు.
బ్రౌజర్ మద్దతు
ఈ టాబ్ మెనూ పని చేస్తుందిఅన్ని ప్రధాన బ్రౌజర్లు. ఇంటర్నెట్ ఎక్స్ప్లోరర్ గుండ్రని మూలలను చూపించదు, అయితే, ఇది ఫైర్ఫాక్స్, సఫారి, ఒపేరా మరియు క్రోమ్ వంటి ట్యాబ్లను చూపుతుంది.
మీ మెనూ జాబితా వ్రాయండి
అన్ని నావిగేషన్ మెనుల్లో మరియు టాబ్లు నిజంగా ఒక క్రమం లేని జాబితా. కాబట్టి మీరు చేయదలిచిన మొదటి విషయం ఏమిటంటే మీ టాబ్డ్ పేజీకి సంబంధించిన లింకులు వెళ్లాలనే దానికి అనుసంధానింపబడని లింకుల జాబితా రాయండి.
ఈ ట్యుటోరియల్ మీరు మీ HTML ను ఒక టెక్స్ట్ ఎడిటర్లో రాస్తున్నారని మరియు మీ వెబ్ పేజీలో మీ మెను కోసం HTML ను ఎక్కడ ఉంచాలో తెలుసుకున్నారని ఊహిస్తున్నారు.
మీ క్రమం లేని జాబితాను వ్రాయండి:
తరగతి = "tablist">CSS 3id = "ప్రస్తుత"> టాబ్లుకోసంమెనూలు
తరగతి = "tablist"మరియుid = "ప్రస్తుత".మొదటిది అవసరం. మీరు చాలు లేకపోతేtablistతరగతి మీ క్రమం లేని జాబితాలో, ట్యాబ్లు పనిచేయవు. రెండవ ఐచ్ఛికం. ఉంచుid = "ప్రస్తుత"ఏ ట్యాబ్లో మీరు ఆ పేజీలో హైలైట్ చెయ్యాలనుకుంటున్నారు. మేము సాధారణంగా ఉపయోగించే పేజీని హైలైట్ చేయడానికి దీనిని ఉపయోగిస్తారు, కానీ మీరు అతి ముఖ్యమైన ట్యాబ్ను హైలైట్ చేయడానికి దాన్ని ఉపయోగించవచ్చు. లేదా మీరు పూర్తిగా తొలగించవచ్చు.
మీ శైలి షీట్ను సవరించడం ప్రారంభించండి
మీరు బాహ్య శైలి షీట్ లేదా అంతర్గత శైలి షీట్ను ఉపయోగించవచ్చు. నమూనా మెను పేజీలో అంతర్గత శైలి షీట్ను ఉపయోగిస్తుంది
పత్రం.మొట్టమొదటిది మేము శైలి UL స్వయంగా చేస్తాము
మేము క్లాస్ ను వాడుతున్నాముtablist HTML లో. UL ట్యాగ్ స్టైలింగ్ కాకుండా, ఇది మీ పేజీలో అన్ని క్రమం లేని జాబితాలను శైలి చేస్తుంది, మీరు UL తరగతి శైలిని మాత్రమే కలిగి ఉండాలి.tablist కాబట్టి మీ CSS లో మొదటి ఎంట్రీ ఉండాలి:
.tablist {}
మేము ముగుస్తుండగా వంకర కలుపు బ్రేస్ (}) ను ముందుకు సాగించాలనుకుంటున్నాము, కనుక మనం తరువాత మర్చిపోవద్దు.
మేము ట్యాబ్ మెను జాబితా కోసం క్రమం లేని జాబితా ట్యాగ్ను ఉపయోగిస్తున్నప్పుడు, కానీ మేము ఏ బులెట్లు లేదా సంఖ్యలు చైతన్యవంతం కాకూడదనుకుంటున్నాము. కనుక మొదటి శైలి మీరు జోడించాలి.జాబితా శైలి: none; బ్రౌసర్కు ఇది ఒక జాబితాగా ఉన్నప్పుడు, ముందుగా నిర్ణయించిన శైలులు (బులెట్లు లేదా సంఖ్యల వంటివి) లేని జాబితాకు ఇది చెబుతుంది.
అప్పుడు, మీరు పూరించాలని మీరు కోరుకున్న స్థలానికి సరిపోలడానికి మీ జాబితా యొక్క ఎత్తును సెట్ చేయవచ్చు. మా ఎత్తు కోసం మేము 2 ని ఎంచుకున్నాము, అది ప్రామాణిక ఫాంట్ పరిమాణాన్ని రెండింతలు చేస్తుంది మరియు ట్యాబ్ యొక్క వచనం పైభాగంలో మరియు దిగువ సగం em ఇస్తుంది.ఎత్తు: 2em; కానీ మీరు మీ వెడల్పును మీకు కావలసిన పరిమాణంతో అమర్చవచ్చు. UL ట్యాగ్లు స్వయంచాలకంగా వెడల్పు 100% పడుతుంది, కాబట్టి మీరు ప్రస్తుత కంటైనర్ కంటే చిన్నది కాకూడదనుకుంటే, వెడల్పుని వదిలివేయవచ్చు.
చివరగా, మీ మాస్టర్ స్టైల్ షీట్ UL మరియు OL ట్యాగ్ల కోసం ప్రీసెట్లు కలిగి ఉండకపోతే, మీరు వాటిని ఉంచాలనుకుంటున్నారు. దీని అర్థం మీరు మీ UL లో సరిహద్దులు, అంచులు మరియు పాడింగ్లను ఆపివేయాలి. padding: 0; margin: 0; సరిహద్దు: none; మీరు ఇప్పటికే UL ట్యాగ్ని రీసెట్ చేస్తే, మీరు మీ డిజైన్తో సరిపోయే ఏదో అంచులు, పాడింగ్ లేదా సరిహద్దుని మార్చవచ్చు.
మీ చివరి .tablist తరగతి ఇలా ఉండాలి:
.tablist {list-style: none; ఎత్తు: 2em; padding: 0; margin: 0; సరిహద్దు: none; }
LI జాబితా అంశాలు సవరించడం
మీరు మీ క్రమం లేని జాబితాలో శైలిని చేసిన తర్వాత, దాని లోపల LI ట్యాగ్లను మీరు శైలి చేయాలి. లేకపోతే, వారు మీ ట్యాబ్లను సరిగ్గా ఉంచకుండా ఒక ప్రామాణిక జాబితా వలె మరియు ప్రతి కదలికను తరువాతి శ్రేణికి అమలు చేస్తారు.
మొదట, మీ శైలి లక్షణాన్ని సెటప్ చేయండి:
.tablist li {}
అప్పుడు మీరు మీ ట్యాబ్లను ఫ్లోట్ చేయాలనుకుంటున్నారు, తద్వారా అవి క్షితిజ సమాంతర విమానంలో వరుసలో ఉంటాయి. ఫ్లోట్: ఎడమ;
మరియు ట్యాబ్ల మధ్య కొన్ని మార్జిన్లను జోడించడానికి మర్చిపోవద్దు, కాబట్టి వారు కలిసి విలీనం చేయలేరు. మార్జిన్ కుడి: 0.13em;
మీ li శైలులు ఇలా ఉండాలి:
.tablist li {ఫ్లోట్: ఎడమ; మార్జిన్ కుడి: 0.13em; }
ట్యాబ్లను CSS 3 తో ట్యాబ్లను చూడండి
ఈ శైలిలో భారీ ట్రైనింగ్ చేయడానికి, మేము క్రమం లేని జాబితాలోని లింక్లను లక్ష్యంగా చేస్తున్నాము. బ్రౌజర్లు ఇతర ట్యాగ్ల కంటే వెబ్ పేజీలో మరింత చేస్తాయని గుర్తించాయి, కాబట్టి పాత బ్రౌజర్లను మీరు యాంకర్ ట్యాగ్ (లింక్లు) కు జోడించి ఉంటే హోవర్ రాష్ట్రాలు వంటి వాటిని అనుసరించడం సులభం. సో మొదటి మీ శైలి లక్షణాలు వ్రాయండి:
.tablist li a {} .tablist li a: hover {}
ఈ ట్యాబ్లు ఒక అప్లికేషన్ లో ట్యాబ్ల వలె వ్యవహరించాలి కనుక, టాబ్ యొక్క మొత్తం ప్రాంతం క్లిక్ చేయదగినది కావాలి, కేవలం లింక్ చేయబడిన టెక్స్ట్ మాత్రమే కాదు. ఇది చేయటానికి, మీరు దాని యొక్క సాధారణ ట్యాగ్ను "ఇన్లైన్" రాష్ట్రానికి బ్లాక్ ఎలిమెంట్గా మార్చాలి. ప్రదర్శన: బ్లాక్; (మీరు వ్యత్యాసం గురించి మరింత తెలుసుకోవడంలో ఆసక్తి ఉంటే, బ్లాక్-లెవెల్ వర్సెస్ ఇన్లైన్ ఎలిమెంట్స్ చదవండి.)
అప్పుడు, మీ ట్యాబ్లు ఒకదానితో సుష్టంగా ఉండటానికి బలవంతం చేయడానికి సులభమైన మార్గం, కానీ వచనం యొక్క వెడల్పుకు సరిపోయేలా వంచు అయితే కుడి మరియు ఎడమ పాడింగ్ను ఒకేలా చేస్తుంది. ఎగువ మరియు దిగువ 0 మరియు కుడివైపు మరియు కుడివైపు మరియు 1 ని ఎడమవైపు సెట్ చేయడానికి మేము పాడింగ్ కుదింపు ఆస్తిని ఉపయోగించాము. padding: 0 1em;
మేము లింక్ను తొలగించాలని కూడా ఎంచుకున్నాము, తద్వారా ట్యాబ్లు లింక్ల వలె తక్కువగా కనిపిస్తాయి.కానీ మీ ప్రేక్షకులు అయోమయానికి గురైనట్లయితే, ఈ పంక్తిని వదిలేయండి. లింక్-decoration: none;
ట్యాబ్ల చుట్టూ సన్నని అంచును ఉంచడం ద్వారా, వాటిని ట్యాబ్ల వలె చేస్తుంది. మేము నాలుగు అంచుల చుట్టూ సరిహద్దును ఉంచడానికి సరిహద్దు కర్రహ్యాసాన్ని ఉపయోగించాము సరిహద్దు: 0.06 ఎం ఘన # 000; ఆపై దిగువ నుండి తొలగించడానికి సరిహద్దు-దిగువ ఆస్తిని ఉపయోగించారు. సరిహద్దు-bottom: 0;
అప్పుడు మేము టాబ్ల ఫాంట్, రంగు మరియు నేపథ్య రంగులకు కొన్ని సర్దుబాటులను చేసాము. మీ సైట్కు సరిపోలే శైలులకు వీటిని సెట్ చేయండి. ఫాంట్: బోల్డ్ 0.88em / 2em ఏరియల్, జెనీవా, హెల్వెటికా, సాన్స్-సెరిఫ్; color: # 000; నేపథ్య రంగు: #ccc;
పైన ఉన్న అన్ని శైలులు సెలెక్టర్లో ఉండాలి.tablist li a, నియమం వారు సాధారణంగా యాంకర్ టాగ్లు ప్రభావితం తద్వారా. టాబ్లు మరింత క్లిక్ చేయదగినవిగా చేయడానికి, మీరు కొన్ని రాష్ట్ర నియమాన్ని జోడించాలి.tablist li a: hover.
మనం మౌస్ మీద ఉన్నప్పుడు టాబ్ పాప్ చేయడానికి టెక్స్ట్ మరియు నేపథ్యం యొక్క రంగును మార్చాలనుకుంటున్నాము. నేపధ్యం: # 3cf; రంగు: #fff;
మరియు లింక్ మేము లింక్ చేయకూడదనుకున్న బ్రౌసర్లకు మరొక రిమైండర్ని కూడా చేర్చుకున్నాము. టెక్స్ట్ అలంకరణ: none; ఇంకొక సాధారణ పద్దతి ట్యాబ్ పై మౌస్ మీద ఉన్నప్పుడు అండర్లైన్ను తిరిగి ప్రారంభించడమే. మీరు దీన్ని చేయాలనుకుంటే, దానిని మార్చండి టెక్స్ట్ అలంకరణ: అండర్లైన్;
కానీ CSS 3 ఎక్కడ ఉంది?
మీరు దృష్టి పెట్టారు ఉంటే, మీరు బహుశా శైలి షీట్లో ఉపయోగించిన ఏ CSS 3 శైలులు లేవు గమనించాము. ఇంటర్నెట్ ఎక్స్ప్లోరర్తో సహా, ఏ ఆధునిక బ్రౌజర్లో అయినా పనిచేయడం దీనికి తోడ్పడుతుంది. కానీ ఇది చదరపు పెట్టెల కంటే ట్యాబ్లు మరింతగా కనిపించదు. ఒక CSS 3 స్టైల్ కాల్ సరిహద్దు-వ్యాసార్థాన్ని జోడించడం ద్వారా (మరియు అది సంబంధిత బ్రౌజర్-నిర్దిష్ట కాల్స్) మీరు అంచులు గుండ్రంగా, మనీలా ఫోల్డర్లో మరిన్ని ట్యాబ్లలాగా చూడవచ్చు.
మీరు జోడించే శైలులు .tablist li a నియమం: -webkit-border-top-రైట్-వ్యాసార్థం: 0.50em; -webkit-border-top-ఎడమ వ్యాసార్థం: 0.50em; -moz సరిహద్దు వ్యాసార్థం-topright: 0.50em; -moz సరిహద్దు వ్యాసార్థం-topleft: 0.50em; border-top-రైట్-వ్యాసార్థం: 0.50em; border-top-ఎడమ వ్యాసార్థం: 0.50em;
ఇవి మేము వ్రాసిన తుది శైలి నియమాలు:
.tablist li {display: block; padding: 0 1em; టెక్స్ట్ అలంకరణ: none; సరిహద్దు: 0.06 ఎం ఘన # 000; సరిహద్దు-bottom: 0; ఫాంట్: బోల్డ్ 0.88em / 2em ఏరియల్, జెనీవా, హెల్వెటికా, సాన్స్-సెరిఫ్; color: # 000; నేపథ్య రంగు: #ccc; / * CSS 3 మూలకాలు * / వెబ్కిట్-సరిహద్దు-కుడి-కుడి-వ్యాసార్థం: 0.50 ఎం; -webkit-border-top-ఎడమ వ్యాసార్థం: 0.50em; -moz సరిహద్దు వ్యాసార్థం-topright: 0.50em; -moz సరిహద్దు వ్యాసార్థం-topleft: 0.50em; border-top-రైట్-వ్యాసార్థం: 0.50em; border-top-ఎడమ వ్యాసార్థం: 0.50em; } .tablist li a: hover {background: # 3cf; రంగు: #fff; టెక్స్ట్ అలంకరణ: none; }
ఈ శైలులతో, మీరు అన్ని ప్రధాన బ్రౌజర్లు మరియు CSS 3 కంప్లైంట్ బ్రౌజర్లు లో nice ముద్రించిన టాబ్లు కనిపిస్తోంది ఒక చేసిన మెను కలిగి. తదుపరి పేజీ మీరు మరింత అది దుస్తులు ధరించడానికి ఉపయోగించే మరొక ఎంపికను ఇస్తుంది.
ప్రస్తుత ట్యాబ్ను హైలైట్ చేయండి
మేము సృష్టించిన HTML లో, UL ఒక ID తో ఒక జాబితా మూలకం ఉండేది. ఇది ఒక LI ను మిగిలిన శైలి నుండి ఇవ్వడానికి మిమ్మల్ని అనుమతిస్తుంది. ప్రస్తుత టాబ్ కొన్ని మార్గాల్లో నిలబడటానికి అత్యంత సాధారణ పరిస్థితి. ఈ ఆలోచించడానికి మరో మార్గం మీరు లైవ్ లేని టాబ్లను బయటకు బూడిద కావలసిన ఉంది. Id ఎక్కడ వేర్వేరు పేజీలలో ఉన్నదో మీరు మార్చండి.
మేము # ప్రగతికి చెందిన ఒక ట్యాగ్ అలాగే # కరెంట్ A రెండింటినీ: హోవర్ స్టె రెండూ కొద్దిగా భిన్నంగా ఉంటాయి. మీరు రంగు, నేపథ్య రంగు, ఎత్తు, వెడల్పు మరియు ఆ మూలకాల పాడింగ్ కూడా మార్చవచ్చు. మీ రూపకల్పనలో ఏవైనా మార్పులు చేస్తాయి.
.tablist li # ప్రస్తుత {background-color: # 777; రంగు: # ff; } .tablist li # ప్రస్తుతము: హోవర్ {background: # 39C; }
మరియు మీరు పూర్తి చేసారు! మీరు మీ వెబ్సైట్ కోసం టాబ్ చేసిన మెనుని సృష్టించారు.
