உள்ளடக்கம்

• அடியெடுத்து வைக்க
• பகுதி 1 இன் 2: HTML எழுதுதல்
• பகுதி 2 இன் 2: CSS எழுதுதல்
• உதவிக்குறிப்புகள்

ஒரு கீழ்தோன்றும் மெனுவுடன், பக்கத்தில் உள்ள அனைத்து முக்கிய பகுதிகளின் தெளிவான மற்றும் படிநிலை கண்ணோட்டத்தையும், அதில் உள்ள துணைப்பிரிவுகளையும் உருவாக்குகிறீர்கள். துணை பிரிவுகள் தோன்றுவதற்கு உங்கள் சுட்டியை முக்கிய பிரிவுகளுக்கு மேல் நகர்த்த வேண்டும். HTML மற்றும் CSS ஐ மட்டுமே பயன்படுத்தி கீழ்தோன்றும் மெனுவை உருவாக்கலாம்.

அடியெடுத்து வைக்க

பகுதி 1 இன் 2: HTML எழுதுதல்

1. உங்கள் வழிசெலுத்தல் பகுதியை உருவாக்கவும். பொதுவாக நீங்கள் வலைத்தள அளவிலான வழிசெலுத்தல் பட்டியில் nav> ஐப் பயன்படுத்துகிறீர்கள், தலைப்பு> பக்கத்திற்கு கட்டுப்பட்ட சிறிய இணைப்பு பிரிவுகளுக்கு அல்லது div> வேறு வழியில்லை எனில். இதை ஒரு div> உறுப்பில் வைக்கவும், இதனால் நீங்கள் கொள்கலன் மற்றும் மெனு இரண்டின் பாணியை சரிசெய்யலாம்.
   • div>
   • nav>
   • / nav>
   • / div>
2. ஒவ்வொரு பிரிவிற்கும் ஒரு வகுப்பு பண்புக்கூறு கொடுங்கள். CSS உடன் இந்த கூறுகளின் பாணியை மாற்ற வகுப்பு பண்புக்கூறு பின்னர் பயன்படுத்துவோம். கொள்கலன் மற்றும் மெனு இரண்டையும் அவற்றின் சொந்த வகுப்பு பண்புக்கூறு கொடுங்கள்.
   • div>
   • nav>
   • / nav>
   • / div>
3. மெனு உருப்படிகளின் பட்டியலைச் சேர்க்கவும். வரிசைப்படுத்தப்படாத பட்டியலில் (ul>) பிரதான மெனுவின் உருப்படிகளைக் கொண்டுள்ளது (பட்டியல் உருப்படிகள் 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"> Chriet 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 மற்றும் அதற்கு முந்தையவற்றில் இது இயங்காது என்றாலும், இங்கே ஒரு நல்ல, விரைவான தீர்வு:
   • .clearfix: after க்குப் பிறகு
   • உள்ளடக்கம்: "";
   • காட்சி: அட்டவணை;
   • }
3. அடிப்படை வடிவமைப்பை உருவாக்கவும். இந்த குறியீட்டைக் கொண்டு உங்கள் மெனுவை பக்கத்தின் மேல் வைக்கலாம் மற்றும் கீழ்தோன்றும் கூறுகளை மறைக்கலாம். இது நோக்கத்தில் மிகவும் எளிதானது, இதன்மூலம் தொடர்புடைய குறியீட்டில் கவனம் செலுத்த முடியும். திணிப்பு மற்றும் விளிம்பு போன்ற கூடுதல் CSS குறியீட்டைக் கொண்டு பின்னர் மாற்றலாம்.
   • .நவ்-ரேப்பர் {
   • அகலம்: 100%;
   • பின்னணி: # 008B8B;
   • }
   •  
   • .nav மெனு {
   • நிலை: உறவினர்;
   • காட்சி: இன்லைன்-தொகுதி;
   • }
   •  
   • .sub மெனு {
   • நிலை: முழுமையான;
   • காட்சி: எதுவுமில்லை;
   • பின்னணி: # 555;
   • }
4. கீழ்தோன்றும் உருப்படிகளை உங்கள் சுட்டியை நீங்கள் நகர்த்தும்போது அவை தோன்றும். கீழ்தோன்றும் பட்டியலில் உள்ள கூறுகள் இப்போது காண்பிக்கப்படாத வகையில் அமைக்கப்பட்டுள்ளன. நீங்கள் "பெற்றோர்" மீது வட்டமிட்டவுடன் முழு துணைப்பட்டியலையும் எவ்வாறு காண்பிப்பது என்பது இங்கே:
   • .nav-menu ul li: மிதவை> உல் {
   • காட்சி: தொகுதி;
   • }
   • குறிப்பு - கீழ்தோன்றும் மெனுவில் உள்ள மெனு உருப்படிகளில் கூடுதல் மெனுக்கள் மறைக்கப்பட்டிருந்தால், இங்கே சேர்க்கப்பட்ட பண்புகள் எல்லா மெனுக்களுக்கும் பொருந்தும். கீழ்தோன்றும் மெனுக்களின் முதல் நிலைக்கு மட்டுமே பாணி பயன்படுத்த விரும்பினால், அதற்கு பதிலாக ".nav-menu> ul" ஐப் பயன்படுத்தவும்.
5. கீழ்தோன்றும் மெனு இருப்பதை அம்புக்குறி மூலம் குறிக்கவும். ஒரு வடிவமைப்பானது கீழ்தோன்றும் மெனுவைத் திறக்கும் என்பதை வலை வடிவமைப்பாளர்கள் பொதுவாக கீழ் அம்புடன் காண்பிப்பார்கள். இந்த குறியீடு உங்கள் மெனுவில் உள்ள ஒவ்வொரு உறுப்புக்கும் அந்த அம்புக்குறியைச் சேர்க்கிறது:
   • .nav மெனு> உல்> லி: after க்குப் பிறகு
   • உள்ளடக்கம்: " 25BC"; / * கீழ் அம்புக்குறிக்கான யூனிகோட் தப்பித்தது * /
   • எழுத்துரு-அளவு: .5em;
   • காட்சி: தொகுதி;
   • நிலை: முழுமையான;
   •    }
   • குறிப்பு - மேல், கீழ், வலது அல்லது இடது பண்புகளுடன் அம்புக்குறியின் நிலையை சரிசெய்யவும்.
   • குறிப்பு - உங்கள் மெனு உருப்படிகள் அனைத்தும் கீழ்தோன்றல்களைக் கொண்டிருக்கவில்லை என்றால், முழு வகுப்பு nav மெனுவின் தோற்றத்தையும் மாற்ற வேண்டாம். அதற்கு பதிலாக, நீங்கள் ஒரு அம்பு விரும்பும் இடத்தில் ஒவ்வொரு லி உறுப்புக்கும் மற்றொரு வகுப்பை (கீழிறக்கம் போன்றவை) சேர்க்கவும். மேலே உள்ள குறியீட்டில் அந்த வகுப்பைப் பார்க்கவும்.
6. திணிப்பு, பின்னணி மற்றும் பிற பண்புகளை சரிசெய்யவும். மெனு இப்போது வேலை செய்ய வேண்டும், ஆனால் இது இன்னும் நன்றாக இல்லை. CSS இல் உள்ள பண்புகள் மூலம் ஒவ்வொரு வகுப்பு அல்லது உறுப்பு எவ்வாறு தோற்றமளிக்கிறது மற்றும் அவை எங்கு அமைந்துள்ளன என்பதை நீங்கள் தனிப்பயனாக்கலாம்.

உதவிக்குறிப்புகள்

• ஒரு படிவத்தில் கீழ்தோன்றும் மெனுவைச் சேர்க்க விரும்பினால், HTML5 இல் உறுப்பு தேர்ந்தெடு> உடன் இது மிகவும் எளிதானது.
• இணைப்பு href = "#"> பக்கத்தின் மேற்பகுதிக்கு உருட்டுகிறது, மற்றும் இல்லாத ஒரு நங்கூரத்தை சுட்டிக்காட்டும் இணைப்பு, அதாவது href = "#!">, உருட்டாது. அது மிகவும் மெதுவாக உணர்ந்தால், கர்சர் CSS உடன் எவ்வாறு தோற்றமளிக்கிறது என்பதை நீங்கள் மாற்றலாம்.
• மாதிரி குறியீட்டை நகலெடுத்து ஒட்டும்போது, ​​எல்லா தோட்டாக்களையும் அகற்றவும்.