உங்கள் வலைத்தளத்தை சீரமைக்க CSS இல் 16 அடுக்கு மெனுக்கள்

JQuery மெனு

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

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

நீர்வீழ்ச்சி மெனு

தனிப்பயன் நீர்வீழ்ச்சி மெனு

இந்த நீர்வீழ்ச்சி அல்லது கீழ்தோன்றும் மெனு HTML, CSS மற்றும் ஜாவாஸ்கிரிப்ட் ஆகியவற்றைக் கொண்டுள்ளது. ஜாவாஸ்கிரிப்ட் குறியீடு மிகவும் குறுகியதாக இருந்தாலும். கண்கவர் இருப்பைக் கொண்ட எளிய மற்றும் நேரடியான நீர்வீழ்ச்சி அனிமேஷனை இணைக்க இது வடிவமைப்பு மொழியாக தற்போதைய பொருள் வடிவமைப்பு தரத்தைப் பின்பற்றுகிறது. வெவ்வேறு மெனு விருப்பங்களைத் திறக்கும்போது, ​​மவுஸ் சுட்டிக்காட்டி அவற்றின் மீது நாம் வெளியேறும்போது ஒரு கிராஃபிக் ஹோவர் விளைவு இருக்கும்.

JQuery உடன் கீழ்தோன்றும் மெனு

JQuery மெனு

இந்த நீர்வீழ்ச்சி மெனு மிகவும் நேரடியானது, ஆனால் அது தான் வடிவமைப்பில் மிகவும் நேர்த்தியானது. ஒவ்வொரு மெனுவின் நீல நிறத்தையும், அதிக ஆரவாரமின்றி ஒரு அடுக்கு அனிமேஷனையும் வெளிப்படுத்த இது ஒரு மிதவை கொண்டுள்ளது. இது HTML, CSS மற்றும் JavaScript (jQuery) உடன் தயாரிக்கப்பட்டுள்ளது.

நடை நீர்வீழ்ச்சி மெனு

கோடு மெனு

HTML, CSS மற்றும் JavaScript இல் இந்த கீழ்தோன்றும் மெனு உள்ளது சிறந்த வடிவமைக்கப்பட்ட வலைத்தளங்களில் ஒன்றால் ஈர்க்கப்பட்டவை: கோடு (டிஜிட்டல் அட்டை சேவை). மெனுக்களில் எந்த மிதவையும் இல்லை, ஆனால் எங்கள் வலைத்தளத்தின் வடிவமைப்பு குறித்த எங்கள் நோக்கங்களை தெளிவுபடுத்துவதற்காக சிறப்பாக வடிவமைக்கப்பட்ட அனிமேஷன். அதன் தரத்திற்கு இன்றியமையாதது மற்றும் உங்கள் வலைத்தளத்தின் மெனுக்களை புதுப்பிக்க சரியானது.

அனிமேஷன் நீர்வீழ்ச்சி மெனு

அனிமேஷன் தாமத மெனு

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

கீழ்தோன்றும் மெனு விளைவுகள்

தூய CSS மெனு

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

மெனுவில் நீர்வீழ்ச்சி அனிமேஷன்

அனிமேஷன் நீர்வீழ்ச்சி மெனு

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

ஒரு சிறிய jQuery உடன்: நீர்வீழ்ச்சி மெனு

துளி மெனு

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

நேர்த்தியான நீர்வீழ்ச்சி மெனு

Cascada

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

CSS இல் கீழ்தோன்றும் மெனு

CSS மெனு

Un குறைந்தபட்ச நீர்வீழ்ச்சி மெனு அது முற்றிலும் CSS இல் வடிவமைக்கப்பட்டுள்ளது. எளிமையான அனிமேஷன், ஆனால் தனித்து நிற்காமல் இருக்க நன்றாக செய்யப்படுகிறது. கவனிக்கப்படாத ஒரு மெனு மற்றும் தற்போதைய வடிவமைப்பு தரங்களைப் பின்பற்றுகிறது.

துளி மெனு

தூய CSS கீழிறங்கும் மெனு

இந்த தூய CSS அடுக்கு மெனு மற்றொன்று அனிமேஷன் மூலம் நன்கு வேறுபடுகிறது ஒவ்வொரு முறையும் ஒரு மெனுவில் கிளிக் செய்யும் போது அது நிகழ்கிறது. அனிமேஷன் சரியான நேரத்துடன் வலது பக்கத்திலிருந்து சாளரத்தை சறுக்குகிறது. முழு பட்டியலிலும் மிகவும் சுவாரஸ்யமானது.

எளிய நீர்வீழ்ச்சி மெனு

எளிய நீர்வீழ்ச்சி மெனு

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

கிடைமட்ட மெனு வழிசெலுத்தல்

கிடைமட்ட மெனு

இது ஏற்கனவே நிறைவேற்றப்பட வேண்டும் என்றாலும் அவரது 4 ஆண்டுகள், இந்த நீர்வீழ்ச்சி மெனு அதற்கு அடுத்ததாக ஒரு அழகான படைப்பு வழியில் மேலெழுகிறது. நீங்கள் வேறு எதையாவது தேடுகிறீர்களானால், நீங்கள் பட்டியலிலிருந்து தேர்ந்தெடுக்கக்கூடிய மற்றொரு விஷயம்.

CSS இல் கீழ்தோன்றும் மெனு

நீர்வீழ்ச்சி மெனு

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

சிறிய JS உடன் நீர்வீழ்ச்சி மெனு

CSS கீழிறங்கும் மெனு

இந்த கீழ்தோன்றும் மெனு மிகக் குறைந்த ஜாவாஸ்கிரிப்டைப் பயன்படுத்துகிறது, நாம் வேறு ஏதேனும் செல்லும்போது மெனுவை தானாக மூடுவதற்கு போதுமானது. இருக்கிறது நேரம் நன்கு அடையப்பட்டது இந்த விஷயத்தில் அனிமேஷனின் சிறந்த ஒன்றாகும்.

மற்றொரு தூய CSS அடுக்கு மெனு

கீழ்தோன்றும் இடைமுக மெனு

அனிமேஷன்களுடன் ஒரு அடுக்கு மெனு ஆயிரத்தில் ஒரு தாமதம் இல்லை இரண்டாவது. எனவே இது பார்வையாளருக்கு உடனடி விளைவை உருவாக்குகிறது. ஹோவர் விளைவு மற்றும் ஒரு சுவாரஸ்யமான கீழ்தோன்றும் மெனு ஒரு பொது மட்டத்தில் அதிக ஆரவாரம் இல்லாமல்.

அடுக்கு மெனு ஜிக் ஜாக் கருத்து

ஜிக் ஜாக் மெனு

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

நாங்கள் உங்களை விட்டு விடுகிறோம் உங்கள் வலைத்தளத்திற்கான இந்த தொடர் CSS மெனுக்கள் அவற்றில் ஏராளமானவை உள்ளன.


கட்டுரையின் உள்ளடக்கம் எங்கள் கொள்கைகளை பின்பற்றுகிறது தலையங்க நெறிமுறைகள். பிழையைப் புகாரளிக்க கிளிக் செய்க இங்கே.

கருத்து தெரிவிப்பதில் முதலில் இருங்கள்

உங்கள் கருத்தை தெரிவிக்கவும்

உங்கள் மின்னஞ்சல் முகவரி வெளியிடப்பட்ட முடியாது. தேவையான புலங்கள் குறிக்கப்பட்டிருக்கும் *

*

*

  1. தரவுக்கு பொறுப்பு: மிகுவல் ஏஞ்சல் கேடன்
  2. தரவின் நோக்கம்: கட்டுப்பாட்டு ஸ்பேம், கருத்து மேலாண்மை.
  3. சட்டபூர்வமாக்கல்: உங்கள் ஒப்புதல்
  4. தரவின் தொடர்பு: சட்டபூர்வமான கடமையால் தவிர மூன்றாம் தரப்பினருக்கு தரவு தெரிவிக்கப்படாது.
  5. தரவு சேமிப்பு: ஆக்சென்டஸ் நெட்வொர்க்குகள் (EU) வழங்கிய தரவுத்தளம்
  6. உரிமைகள்: எந்த நேரத்திலும் உங்கள் தகவல்களை நீங்கள் கட்டுப்படுத்தலாம், மீட்டெடுக்கலாம் மற்றும் நீக்கலாம்.