உள்ளடக்கம்

• படிகள்
• ஆலோசனை
• எச்சரிக்கை

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

படிகள்

1. 

   HTML உரை திருத்தியைத் திறக்கவும். நீங்கள் ஒரு எளிய உரை திருத்தியை (நோட்பேட், டெக்ஸ்ட் எடிட்) அல்லது மேம்பட்ட (நோட்பேட் ++) பயன்படுத்தலாம்.
   • நீங்கள் நோட்பேட் ++ க்கு செல்ல முடிவு செய்தால், நீங்கள் தேர்வு செய்ய வேண்டும் HTML மெனுவின் "எச்" பகுதியிலிருந்து மொழி (மொழி) தொடரும் முன் சாளரத்தின் மேற்புறத்தில்.

2. 

   
   
   ஆவணத்திற்கான தலைப்பை உள்ளிடவும். ஆவணத்தின் எஞ்சிய பகுதிகளுக்கு பயன்படுத்த வேண்டிய குறியீட்டின் வகையை தீர்மானிக்கும் குறியீடு இங்கே:

3. 

   கீழ்தோன்றும் மெனுவை உருவாக்கவும். கீழ்தோன்றும் மெனுவின் அளவு மற்றும் வண்ணத்தைக் குறிப்பிட பின்வரும் குறியீட்டை உள்ளிடவும், "#" ஐ நீங்கள் பயன்படுத்த விரும்பும் அளவுருவுடன் மாற்ற நினைவில் கொள்ளுங்கள் (பெரிய எண், பெரிய கீழ்தோன்றும் மெனு இருக்கும்). பின்னணி வண்ணம் "பின்னணி-வண்ணம்" மற்றும் "வண்ணம்" வண்ணத்தை நீங்கள் விரும்பும் வண்ணத்துடன் (அல்லது HTML வண்ண குறியீடு) மாற்றலாம்:

4. 

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

5. 

   கீழ்தோன்றும் மெனுவின் தோற்றத்தை உருவாக்குகிறது. கீழேயுள்ள குறியீடு கீழ்தோன்றும் மெனுவின் அளவு மற்றும் வண்ணத்தை தீர்மானிக்கிறது, இதில் வலைப்பக்கத்தில் உள்ள பிற உறுப்புகளுடன் இணைந்திருக்கும் நிலை அடங்கும். "நிமிடம்-அகலம்" பிரிவில் "#" ஐ நீங்கள் விரும்பும் எண்ணுடன் மாற்ற மறக்காதீர்கள் (எ.கா. 250) மற்றும் "பின்னணி-வண்ணம்" (பின்னணி வண்ணம்) தலைப்பை ஒரு குறிப்பிட்ட வண்ணம் அல்லது HTML குறியீடாக மாற்றவும்:

6. 

   
   
   கீழ்தோன்றும் மெனுவின் உள்ளடக்கங்களுக்கு விவரங்களைச் சேர்க்கவும். பின்வரும் குறியீடு உள்ளே உள்ள உரை வண்ணத்தையும் கீழ்தோன்றும் மெனு பொத்தானின் அளவையும் குறிப்பிடும். மெனு பொத்தான் அளவை வரையறுக்கும் பிக்சல்களின் எண்ணிக்கையுடன் "#" ஐ மாற்ற மறக்காதீர்கள்:

7. 

   கீழ்தோன்றும் மெனுவில் மவுஸ் சுட்டிக்காட்டி எவ்வாறு மாறுகிறது என்பதைத் திருத்துகிறது. மெனு பொத்தானின் மீது மவுஸ் பாயிண்டரை நகர்த்தும்போது சில வண்ணங்களை மாற்ற வேண்டும். கீழ்தோன்றும் மெனுவில் நீங்கள் எதையாவது தேர்ந்தெடுக்கும்போது மாற்றப்பட்ட நிறத்தை "பின்னணி-வண்ணம்" வரி பிரதிபலிக்கும், இரண்டாவது "பின்னணி-வண்ணம்" என்பது மெனு பொத்தான் மாறும் வண்ணமாகும். வெறுமனே, இந்த இரண்டு வண்ணங்களும் தேர்வு செய்யப்படாததை விட இலகுவாக இருக்க வேண்டும்:

8. 

   CSS பகுதியை மூடு. ஆவணத்தின் CSS பகுதியுடன் நீங்கள் முடித்துவிட்டீர்கள் என்பதைக் குறிப்பிட பின்வரும் குறியீட்டை உள்ளிடவும்:

9. 

   மெனு பொத்தானுக்கு ஒரு பெயரை உருவாக்கவும். பின்வரும் குறியீட்டை உள்ளிடவும், ஆனால் கீழ்தோன்றும் மெனு பொத்தானின் பெயருடன் "பெயர்" ஐ மாற்ற நினைவில் கொள்ளுங்கள் (எடுத்துக்காட்டாக: பட்டியல்):

10. 

    மெனுவில் இணைப்புகளைச் சேர்க்கவும். கீழ்தோன்றும் மெனுவில் உள்ள ஒவ்வொரு உருப்படியும் ஏதேனும் ஒன்றை இணைக்கும், அது தற்போதைய வலைத்தளத்தின் பக்கம் அல்லது வெளி வலைத்தளமாக இருக்கலாம். பின்வரும் குறியீட்டை உள்ளிடுவதன் மூலம் கீழ்தோன்றும் மெனுவில் உங்கள் தேர்வைச் சேர்க்கவும், அதில் நீங்கள் மாற்ற வேண்டும் https://www.website.com இணைப்பு முகவரியுடன் (அடைப்புக்குறிகளை வைத்திருங்கள்) மற்றும் "பெயர்" ஐ இணைப்பு பெயருடன் மாற்றவும்.

11. 

    ஆவணத்தை மூடு. ஆவணத்தை மூடுவதற்கு பின்வரும் குறிச்சொற்களை உள்ளிட்டு, கீழ்தோன்றும் மெனுவின் குறியீடு முடிவைக் குறிப்பிடவும்:

12. 

    மதிப்பாய்வு குறியீடு கீழ்தோன்றும் மெனுவைக் குறிப்பிடுகிறது. துணுக்கை இதுபோன்று இருக்கும்: விளம்பரங்கள்

ஆலோசனை

• இணையதளத்தில் இடுகையிடுவதற்கு முன்பு எப்போதும் குறியீட்டை மதிப்பாய்வு செய்யவும்.
• மேலே உள்ள வழிமுறைகள் கீழ்தோன்றும் மெனுக்களுக்கானவை, அவை மெனு பொத்தானின் மீது மவுஸ் சுட்டிக்காட்டி வட்டமிடும் போது வேலை செய்யும். நீங்கள் கிளிக் செய்யும் போது மட்டுமே கிளிக் செய்யும் கீழ்தோன்றும் மெனுவை உருவாக்க விரும்பினால், நீங்கள் ஜாவாஸ்கிரிப்ட் பயன்படுத்த வேண்டும்.

எச்சரிக்கை

• "கருப்பு" அல்லது "பச்சை" போன்ற குறிச்சொற்களைப் பயன்படுத்தும் போது HTML வண்ணம் மிகவும் குறைவாகவே இருக்கும். தனிப்பயன் வண்ணங்களை உருவாக்க மற்றும் பயன்படுத்த பயனர்களை அனுமதிக்கும் HTML வண்ண குறியீடு ஜெனரேட்டரை நீங்கள் பார்க்கலாம்.