CSS జాబితాలు ఉపయోగించి లంబ నావిగేషన్ మెనూలు సృష్టిస్తోంది

మీ నావిగేషన్ మెను ఎగువ అంతటా లేదా నిలువు వరుస పక్కన ఒక సమాంతర వరుస అయినా, ఇది ఇప్పటికీ జాబితాగా ఉంది. వెబ్ నావిగేషన్ రూపకల్పన చేసేటప్పుడు, నావిగేషన్ మెనూ కేవలం ఒక ముక్తుడైన లింకుల సమూహం అని మర్చిపోవడాన్ని చాలా సులభం. కానీ మీరు XHTML + CSS ను ఉపయోగించి మీ పేజీకి సంబంధించిన లింకులు ప్రోగ్రామ్ చేస్తే, మీరు (XHTML) డౌన్లోడ్ చేసుకోగలిగే మెనూను సృష్టించవచ్చు మరియు అనుకూలీకరించడానికి సులభంగా (CSS).

మొదలు అవుతున్న

పేజీకి సంబంధించిన లింకులు కోసం జాబితాను రూపొందించడానికి, మీరు జాబితాను ఉపయోగించాలి. ఇది ప్రామాణిక క్రమం లేని జాబితా కావచ్చు, ఇది నావిగేషన్గా గుర్తించబడింది:

మీరు HTML వద్ద దగ్గరగా చూస్తే, మీరు "హోమ్" లింక్ కూడా ఒక ID కలిగి గమనించవచ్చు

నువ్వు ఇక్కడ ఉన్నావు. ఇది మీ పాఠకుల కోసం ప్రస్తుత స్థానాన్ని గుర్తించే మెనూని సృష్టించడానికి మిమ్మల్ని అనుమతిస్తుంది. ఇప్పుడే మీ సైట్లో దృశ్య క్యూ యొక్క రకాన్ని కలిగి ఉండకపోయినా, ఆ సమాచారాన్ని మీరు చేర్చవచ్చు. మీరు తర్వాత క్యూను జోడించాలని నిర్ణయించుకుంటే, మీ సైట్ని సిద్ధం చేయడానికి తక్కువ కోడింగ్ ఉంటుంది.

ఏ CSS స్టైలింగ్ లేకుండా, ఈ XHTML మెను ప్రామాణిక క్రమం లేని జాబితా కనిపిస్తుంది. బులెట్లు ఉన్నాయి మరియు జాబితా అంశాలు కొద్దిగా ఇండెంట్ ఉంటాయి. నేను ప్లేస్హోల్డర్ లింకులను ఉపయోగిస్తున్నందున, చాలా బ్రౌజర్లు క్లిక్ చేయదగిన లింకులు (అండర్లైన్ మరియు నీలి రంగులో) కనపడవు. ఎగువ HTML లో మీరు వెబ్ పేజీలో పేస్ట్ చేస్తే, మీ నావిగేషన్ ఇలా ఉంటుంది:

• హోమ్
• ఉత్పత్తులు
• సేవలు
• మమ్మల్ని సంప్రదించండి

ఇది అందంగా బోరింగ్ మరియు మెనూ వలె కనిపించడం లేదు. కానీ కొన్ని CSS శైలులతో జాబితాకు జోడించబడి, మీరు గర్వపడేలా చేసే మెనూని సృష్టించవచ్చు.

నిలువు నావిగేషన్ మెను

ఒక నిలువు నావిగేషన్ మెను రాయడం చాలా సులభం ఎందుకంటే ఇది ఒక సాధారణ జాబితాలో అదే విధంగా ప్రదర్శిస్తుంది: అప్ మరియు డౌన్. జాబితా అంశాలు నిలువుగా పేజీని ప్రదర్శిస్తాయి.

నేను మెనూలను స్టైలింగ్ చేసినప్పుడు, నేను వెలుపల ప్రారంభించి, పని చేస్తాను. దీని ద్వారా నేను మొదటి శైలిని అర్థం చేసుకుంటాను

ఉల్ # పేజీకి సంబంధించిన లింకులు ఆపై తరలించడానికి

li మూలకాలు మరియు తరువాత లింక్లు మొదలైనవి. ఈ మెనూ కొరకు, మొదటి మీరు మెను వెడల్పును నిర్వచించాలి. ఇది మెను అంశాలు పొడవుగా ఉన్నా, వారు మిగిలిన లేఅవుట్ను పుష్కలంగా పుష్ లేదా హారిజాంటల్ స్క్రోలింగ్ చేయలేదని ఇది నిర్ధారిస్తుంది.

ul # నావిగేషన్ {width: 12em; }

నేను వెడల్పు సెట్ వచ్చింది ఒకసారి, నేను జాబితా అంశాలను ప్లే చేసుకోవచ్చు. ఇది (బులెట్లు వదిలించుకోవటం), నేపథ్య రంగులు, సరిహద్దులు, వచన అమరిక మరియు అంచులు వంటి వాటిని సెట్ చేయడానికి నాకు ఇది అనుమతిస్తుంది.

ul # navigation li {జాబితా శైలి: none;నేపథ్య రంగు: # 039;సరిహద్దు-టాప్: ఘన 1px # 039;టెక్స్ట్-సమలేఖనం: ఎడమ;మార్జిన్: 0;}

మీరు జాబితా అంశాల కోసం బేసిక్స్ను సెట్ చేసిన తర్వాత మీరు లింక్ ప్రాంతంలోని మెను ఎలా కనిపిస్తుందో ఆడుకోవచ్చు. మొదటి శైలి

UL # నావిగేషన్ LI Aఆపై

ఒక లింక్,

ఒక: సందర్శించిన,

A: హోవర్, మరియు

A: క్రియాశీల (మీరు వాటిని కోరుకుంటే). లింకులు కోసం, నేను లింకులను ఒక బ్లాక్ మూలకాన్ని (డిఫాల్ట్ లైన్లో కాకుండా) తయారు చేయాలనుకుంటున్నాను. ఇది మొత్తం స్థలాన్ని ఆక్రమిస్తాయి

LI-మరియు వారు మరింత మెనూ బటన్లు వంటి శైలి వాటిని చేస్తుంది ఒక పేరా, వంటి పని. నేను ఎప్పుడూ ఇతర విషయం అండర్లైన్ (

టెక్స్ట్ అలంకరణ: none;), ఈ విధంగా బటన్లు నాకు మరింత బటన్లు కనిపిస్తాయి చేస్తుంది. అయితే, మీ డిజైన్ భిన్నంగా ఉండవచ్చు.

ul # navigation li a {ప్రదర్శన: బ్లాక్;టెక్స్ట్ అలంకరణ: none;padding: .25em;సరిహద్దు-దిగువ: ఘన 1px # 39f;సరిహద్దు-కుడి: ఘన 1px # 39f;}

గమనించండి

ప్రదర్శన: బ్లాక్; లింకులను అమర్చండి, మెను ఐటెమ్ మొత్తం పెట్టె కేవలం అక్షరాలు మాత్రమే కాదు క్లిక్ చేయదగినది. ఇది కూడా వినియోగం కోసం మంచిది. మీరు డిఫాల్ట్ నీలం, ఎరుపు మరియు ఊదా నుండి భిన్నంగా ఉండాలని అనుకుంటే లింక్ రంగులు (లింక్, సందర్శించిన, హోవర్ మరియు క్రియాశీల) సెట్ చేయాలని నిర్ధారించుకోండి.

a: link, a: సందర్శించిన {color: # ff; }a: హోవర్, a: చురుకుగా {color: # 000; }

నేను నేపథ్య రంగును మార్చడం ద్వారా హోవర్ స్థితిని మరింత కొంచెం శ్రద్ధగా ఇవ్వాలని అనుకుంటున్నాను.

a: హోవర్ {background-color: # ff; }

నిలువు మెనూల యొక్క మరిన్ని ఉదాహరణలు కావాలనుకుంటే, దిగువ జాబితాను సంప్రదించండి.

• ఎ శైలి శైలి లంబ మెను
• ఒక ప్రాథమిక లంబ మెనూ మూస
• ఒక శైలి లంబ మెనూ విత్ యు ఆర్ ఇక్కడ
• మీరు ఇక్కడ ఒక ప్రాథమిక లంబ మెనూ మూస ఇక్కడ ఉన్నారు

క్షితిజ సమతల నావిగేషన్ మెను

సమాంతర నావిగేషన్ మెనూలను సృష్టించడం నిలువు నావిగేషన్ మెనూల కంటే కొంచెం కష్టంగా ఉంటుంది, ఎందుకంటే మీరు HTML జాబితాలు నిలువుగా ప్రదర్శించడానికి ఇష్టపడతారనే వాస్తవాన్ని మీరు కలిగి ఉంటారు. క్షితిజ సమాంతర మెను మాదిరిగా, ముందుగా మీ నావిగేషన్ మెను జాబితాను సృష్టించండి:

సమాంతర మెనుని సృష్టించడానికి, మీరు నిలువు మెనుతో చేసిన విధంగానే పనిచేయండి. వెలుపల ప్రారంభించండి మరియు పనిచేయండి. నా నావిగేషన్ ఎడమ మూలలో ప్రారంభం కావాలి కాబట్టి, నేను 0 ఎడమ మార్జిన్ మరియు పాడింగ్ లతో సెట్ చేస్తాను మరియు నేను దానిని ఎడమవైపుకు తేలుతున్నాను. వెడల్పుని అమర్చిన అలవాటును మీరు పొందాలి, తద్వారా మీ మెనూ మీరు ఉద్దేశించిన దానికన్నా ఎక్కువ లేదా అంతకంటే తక్కువ స్థలాన్ని తీసుకోదు. సమాంతర మెన్యుల కోసం, ఇది సాధారణంగా డిజైన్ యొక్క పూర్తి వెడల్పు. నేను చదవడానికి సులభతరం చేయడానికి మొత్తం జాబితాకు నేపథ్య రంగును కూడా జోడించాను.

ul # నావిగేషన్ {ఫ్లోట్: ఎడమ;మార్జిన్: 0;పాడింగ్: 0;వెడల్పు: 100%;నేపథ్య రంగు: # 039;}

కానీ క్షితిజ సమాంతర నావిగేషన్ మెనుకు రహస్య జాబితా అంశాలలో ఉంది. జాబితా అంశాలు సామాన్యంగా బ్లాక్ మూలకాలు, అనగా ప్రతి ఒక్కకు ముందు మరియు తరువాత వచ్చిన క్రొత్త లైన్ ఉంటుంది. ప్రదర్శన నుండి మారడం ద్వారా

బ్లాక్ కు

లైన్ లో, మీరు జాబితా మూలకాలు అడ్డంగా ఒకదానికొకటి వరుసలో అమర్చండి.

ul # navigation li {display: inline; }

నేను నిలువు నావిగేషన్ మెనూలో అదే రంగులతో మరియు టెక్స్ట్ అలంకరణతో, నేను వాటిని సరిగ్గా అనుసంధానం చేసాను. నేను పైకి ఎగిరినప్పుడు బటన్లను గీయడానికి ఒక ఎగువ సరిహద్దుని జోడించాను. మాత్రమే విషయం తొలగించబడింది

ప్రదర్శన: బ్లాక్; కొత్త లైన్లను తిరిగి ప్రవేశపెట్టి, క్షితిజ సమాంతర మెనుని నాశనం చేస్తుంది.

ul # navigation li a {టెక్స్ట్ అలంకరణ: none;padding: .25em 1em;సరిహద్దు-దిగువ: ఘన 1px # 39f;సరిహద్దు-టాప్: ఘన 1px # 39f;సరిహద్దు-కుడి: ఘన 1px # 39f;}a: link, a: సందర్శించిన {color: # ff; }ul # పేజీకి సంబంధించిన లింకులు li a: హోవర్ {నేపథ్య రంగు: # ff;రంగు: # 000;}

మీరు ఇక్కడ సమాచారం సమాచారం

HTML యొక్క మరొక కారకం ఐడెంటిఫైయర్

నువ్వు ఇక్కడ ఉన్నావు. మీరు మీ వినియోగదారుల యొక్క ప్రస్తుత స్థానాన్ని సూచించడానికి మీ మెనూను సవరించాలని అనుకుంటే, దీన్ని ఉపయోగించండి

ID విభిన్న నేపథ్య రంగు లేదా మరొక శైలిని నిర్వచించడానికి. ఆ లక్షణాన్ని తరలించండి

ID ఇతర పేజీలలో సరైన మెను ఐటెమ్కు ప్రస్తుత పేజీ ఎల్లప్పుడూ హైలైట్ చేయబడుతుంది.

ul # navigation li # youarehere ఒక {background-color: # 09f; }

మీ పేజీలో ఈ శైలులు కలిసి ఉంటే, మీరు మీ సైట్తో పనిచేసే సమాంతర లేదా నిలువు మెను పట్టీని సృష్టించవచ్చు, కానీ శీఘ్రంగా డౌన్ లోడ్ చేసుకోవడానికి మరియు భవిష్యత్లో నవీకరించడానికి చాలా సులభం. XHTML + CSS ను ఉపయోగించి మీ జాబితాలను రూపకల్పన కోసం ఒక శక్తివంతమైన సాధనంగా మారుస్తుంది.

మీరు క్షితిజ సమాంతర మెనూల యొక్క మరింత ఉదాహరణలు కావాలనుకుంటే, కిందివాటిని సంప్రదించండి.

• ఎ శైలి క్షితిజసమాంతర మెను
• ఒక ప్రాథమిక క్షితిజసమాంతర మెనూ మూస
• మీరు ఇక్కడ ఒక శైలి క్షితిజసమాంతర మెనూ
• మీరు ఇక్కడ ఒక ప్రాథమిక క్షితిజసమాంతర మెనూ మూస