విషయము

• అడుగు పెట్టడానికి
• 2 యొక్క పార్ట్ 1: HTML రాయడం
• పార్ట్ 2 యొక్క 2: CSS రాయడం
• చిట్కాలు

డ్రాప్‌డౌన్ మెనుతో మీరు పేజీలోని అన్ని ముఖ్యమైన భాగాల యొక్క స్పష్టమైన మరియు క్రమానుగత అవలోకనాన్ని మరియు పేజీ కలిగి ఉన్న ఉపవిభాగాలను సృష్టిస్తారు. ఉప విభాగాలు కనిపించేలా చేయడానికి మీరు మీ మౌస్‌ను ప్రధాన విభాగాలపైకి తరలించాలి. మీరు HTML మరియు CSS మాత్రమే ఉపయోగించి డ్రాప్‌డౌన్ మెనుని సృష్టించవచ్చు.

అడుగు పెట్టడానికి

2 యొక్క పార్ట్ 1: HTML రాయడం

1. మీ నావిగేషన్ విభాగాన్ని సృష్టించండి. సాధారణంగా మీరు వెబ్‌సైట్-వైడ్ నావిగేషన్ బార్ కోసం nav>, పేజీకి కట్టుబడి ఉన్న చిన్న లింక్ విభాగాల కోసం హెడర్> లేదా ఇతర ఎంపికలు సరిపోయేలా కనిపించకపోతే div> ను ఉపయోగిస్తారు. దీన్ని div> ఎలిమెంట్‌లో ఉంచండి, తద్వారా మీరు కంటైనర్ మరియు మెను రెండింటి యొక్క శైలిని సర్దుబాటు చేయవచ్చు.
   • div>
   • nav>
   • / nav>
   • / div>
2. ప్రతి విభాగానికి తరగతి లక్షణం ఇవ్వండి. CSS తో ఈ మూలకాల శైలిని సవరించడానికి మేము తరగతి లక్షణాన్ని తరువాత ఉపయోగిస్తాము. కంటైనర్ మరియు మెను రెండింటికీ వారి స్వంత తరగతి లక్షణాన్ని ఇవ్వండి.
   • div>
   • nav>
   • / nav>
   • / div>
3. మెను ఐటెమ్‌ల జాబితాను జోడించండి. క్రమం లేని జాబితా (ఉల్>) ప్రధాన మెనూ (జాబితా అంశాలు li>) యొక్క అంశాలను కలిగి ఉంటుంది, వినియోగదారు తన మౌస్ను దానిపైకి కదిలిస్తే, అతను / ఆమె డ్రాప్డౌన్ మెనులను చూస్తారు. మీ జాబితా మూలకానికి "క్లియర్‌ఫిక్స్" తరగతిని జోడించండి; మేము దీనిని CSS స్ప్రెడ్‌షీట్‌లో తరువాత పొందుతాము.
   • div>
   • nav>
   •       ul>
   •          li> హోమ్ / li>
   •          li> ఉద్యోగులు
   •          li> సంప్రదించండి
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. లింక్‌లను జోడించండి. ఈ ఉన్నత-స్థాయి మెను అంశాలు కూడా వారి స్వంత పేజీలకు లింక్ చేస్తే, మీరు ఇప్పుడు లింక్‌లను చేర్చవచ్చు. ఉనికిలో లేని యాంకర్‌కు లింక్ చేయండి ("#!" వంటివి), అవి దేనికీ లింక్ చేయకపోయినా, యూజర్ యొక్క కర్సర్ భిన్నంగా కనిపిస్తుంది. ఈ ఉదాహరణలో, పరిచయం ఎక్కడా దారితీస్తుంది, కానీ ఇతర రెండు మెను అంశాలు ఇలా చేస్తాయి:
   • div>
   • nav>
   • ul>
   • li>a href = "/">హోమ్/ a>/ li>
   • li>a href = "/ ఉద్యోగులు">సిబ్బంది/ a>
   • / li>
   • li>a href = "#!">సంప్రదించండి/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. డ్రాప్‌డౌన్ అంశాల కోసం సబ్‌లిస్టులను సృష్టించండి. శైలి సృష్టించబడిన తరువాత, ఈ జాబితాలు డ్రాప్‌డౌన్ మెనుని ఏర్పరుస్తాయి. వినియోగదారు మౌస్ చేసే జాబితా అంశంలో జాబితాను ఉంచండి. మునుపటిలాగే తరగతి లక్షణాన్ని మరియు లింక్‌ను జోడించండి.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> హోమ్ </ a> / li>
   • li> a href = "/ ఉద్యోగులు"> ఉద్యోగులు </ a>
   •          ul>
   •             li> a href = "/ borsato"> మార్కో బోర్సాటో </ a> / li>
   •             li> a href = "/ titulaer"> క్రియెట్ టైటులేర్ </ a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> సంప్రదించండి / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> సమస్యను నివేదించండి </ a> / li>
   •             li> a href = "/ support"> కస్టమర్ మద్దతు </ a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

పార్ట్ 2 యొక్క 2: CSS రాయడం

1. మీ CSS స్టైల్షీట్ తెరవండి. లింక్ ఇప్పటికే లేనట్లయితే మీ HTML పత్రం యొక్క హెడ్ విభాగంలో మీ CSS స్టైల్షీట్కు లింక్ను పోస్ట్ చేయండి. ఈ వ్యాసంలో, ఫాంట్ మరియు నేపథ్య రంగును సెట్ చేయడం వంటి CSS యొక్క ప్రాథమికాలను మేము కవర్ చేయము.
2. క్లియర్‌ఫిక్స్ కోడ్‌ను జోడించండి. మెను జాబితాకు "క్లియర్ఫిక్స్" తరగతిని జోడించడం గుర్తుందా? సాధారణంగా, డ్రాప్-డౌన్ మెను యొక్క అంశాలు పారదర్శక నేపథ్యాన్ని కలిగి ఉంటాయి, ఇది ఇతర అంశాలను తరలించడానికి అనుమతిస్తుంది. CSS కు సరళమైన అనుసరణ ఈ సమస్యను పరిష్కరించగలదు. ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ 7 మరియు అంతకు మునుపు ఇది పనిచేయకపోయినప్పటికీ, ఇక్కడ మంచి, శీఘ్ర పరిష్కారం ఉంది:
   • .క్లియర్‌ఫిక్స్: after తర్వాత
   • విషయము: "";
   • ప్రదర్శన: పట్టిక;
   • }
3. ప్రాథమిక రూపకల్పనను సృష్టించండి. ఈ కోడ్‌తో మీరు మీ మెనూను పేజీ ఎగువన ఉంచవచ్చు మరియు డ్రాప్‌డౌన్ అంశాలను దాచవచ్చు. ఉద్దేశ్యంతో ఇది చాలా సులభం, తద్వారా మేము సంబంధిత కోడ్‌పై దృష్టి పెట్టవచ్చు. పాడింగ్ మరియు మార్జిన్ వంటి అదనపు CSS కోడ్‌తో మీరు దీన్ని తరువాత సవరించవచ్చు.
   • .నావ్-రేపర్ {
   • వెడల్పు: 100%;
   • నేపథ్యం: # 008B8B;
   • }
   •  
   • .nav మెను {
   • స్థానం: సాపేక్ష;
   • ప్రదర్శన: ఇన్లైన్-బ్లాక్;
   • }
   •  
   • .సబ్ మెను {
   • స్థానం: సంపూర్ణ;
   • ప్రదర్శన: ఏదీ లేదు;
   • నేపథ్యం: # 555;
   • }
4. మీరు మీ మౌస్‌ని వాటిపై ఉంచినప్పుడు డ్రాప్‌డౌన్ అంశాలు కనిపించేలా చేయండి. డ్రాప్‌డౌన్ జాబితాలోని అంశాలు ఇప్పుడు చూపబడని విధంగా సెట్ చేయబడ్డాయి. మీరు "పేరెంట్" పై హోవర్ చేసిన వెంటనే మొత్తం సబ్లిస్ట్ ఎలా కనిపించాలో ఇక్కడ ఉంది:
   • .nav-menu ul li: హోవర్> ఉల్ {
   • ప్రదర్శన: బ్లాక్;
   • }
   • గమనిక - డ్రాప్‌డౌన్ మెనులోని మెను ఐటెమ్‌లలో అదనపు మెనూలు దాగి ఉంటే, ఇక్కడ జోడించిన లక్షణాలు అన్ని మెనూలకు వర్తిస్తాయి. డ్రాప్‌డౌన్ మెనుల్లో మొదటి స్థాయికి మాత్రమే శైలి వర్తించాలని మీరు కోరుకుంటే, బదులుగా ".nav-menu> ul" ను ఉపయోగించండి.
5. డ్రాప్‌డౌన్ మెను ఉందని బాణంతో సూచించండి. వెబ్ డిజైనర్లు సాధారణంగా డౌన్ బాణంతో ఒక మూలకం డ్రాప్‌డౌన్ మెనుని తెరుస్తుంది. ఈ కోడ్ మీ మెనూలోని ప్రతి మూలకానికి ఆ బాణాన్ని జోడిస్తుంది:
   • .nav మెను> ul> li: తర్వాత {
   • కంటెంట్: " 25BC"; / * క్రింది బాణం కోసం యునికోడ్ నుండి తప్పించుకున్నారు * /
   • font-size: .5em;
   • ప్రదర్శన: బ్లాక్;
   • స్థానం: సంపూర్ణ;
   •    }
   • గమనిక - ఎగువ, దిగువ, కుడి లేదా ఎడమ లక్షణాలతో బాణం యొక్క స్థానాన్ని సర్దుబాటు చేయండి.
   • గమనిక - మీ అన్ని మెను ఐటెమ్‌లు డ్రాప్‌డౌన్‌లను కలిగి ఉండకపోతే, మొత్తం క్లాస్ నావ్ మెనూ యొక్క రూపాన్ని మార్చవద్దు. బదులుగా, మీకు బాణం కావాలనుకునే ప్రతి li మూలకానికి మరొక తరగతిని (డ్రాప్‌డౌన్ వంటివి) జోడించండి. పై కోడ్‌లో ఆ తరగతిని చూడండి.
6. పాడింగ్, నేపథ్యం మరియు ఇతర లక్షణాలను సర్దుబాటు చేయండి. మెను ఇప్పుడు పని చేయాలి, కానీ ఇది ఇంకా చాలా బాగుంది. CSS లోని లక్షణాలతో మీరు ప్రతి తరగతి లేదా మూలకం ఎలా ఉందో మరియు అవి ఎక్కడ ఉన్నాయో అనుకూలీకరించవచ్చు.

చిట్కాలు

• మీరు ఒక ఫారమ్‌కు డ్రాప్‌డౌన్ మెనుని జోడించాలనుకుంటే, HTML5 లో ఎలిమెంట్ సెలెక్ట్> తో ఇది చాలా సులభం.
• లింక్ a href = "#"> పేజీ పైభాగానికి స్క్రోల్ చేస్తుంది మరియు ఒక హ్రెఫ్ = "#!"> వంటి ఉనికిలో లేని యాంకర్‌కు సూచించే లింక్, స్క్రోల్ చేయదు. అది చాలా అలసత్వంగా అనిపిస్తే, కర్సర్ CSS తో ఎలా ఉంటుందో మీరు మార్చవచ్చు.
• మీరు నమూనా కోడ్‌ను కాపీ చేసి, అతికించినప్పుడు, అన్ని బుల్లెట్‌లను తొలగించండి.