HTML5 CSS3 jQuery നാവിഗേഷൻ മെനുകൾ നിങ്ങളുടെ സ്വന്തം ഡിസൈനിലേക്ക് കോഡ് ഒട്ടിക്കുക അല്ലെങ്കിൽ നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് അനുയോജ്യമായ മെനു പരിഷ്കരിക്കുക.
നാവിഗേഷൻ നിങ്ങളുടെ വെബ് സൈറ്റിന്റെ ഒരു പ്രധാന ഭാഗമാണ്. നിങ്ങളുടെ സൈറ്റിലെ പ്രധാന ഭാഗങ്ങളിലേക്ക് നിങ്ങളുടെ സന്ദർശകർ നാവിഗേറ്റ് ചെയ്യുന്നത് എങ്ങനെയാണ്, നിങ്ങളുടെ നല്ല ഉള്ളടക്കം കണ്ടെത്താൻ അവർക്ക് എളുപ്പമാക്കുന്നു.
CSS തീർച്ചയായും മനോഹരമായ നാവിഗേഷൻ മെനുകൾ രൂപകൽപ്പന ഏറ്റവും അനുയോജ്യമായ ഭാഷയാണ്. ഏത് തരത്തിലുള്ള വെബ് സൈറ്റിനും ഇത് പ്രയോഗിക്കാവുന്നതാണ്, വളരെ ഫ്ലെക്സിബിളാണ് ഇത്. നിങ്ങളുടെ സ്വന്തം CSS കഴിവുകൾ സാമാന്യം പരിമിതമാണ് എങ്കിൽ പരിഭ്രമിക്കേണ്ട, കാരണം നിങ്ങളുടെ വെബ് സൈറ്റിൽ വൃത്തിയും പ്രൊഫഷണലും നോക്കുന്ന CSS മെനുകൾ എങ്ങനെ ചേർക്കാം എന്ന് നിങ്ങളെ മുന്നോട്ട് നടക്കുന്ന ധാരാളം മഹത്തായ ട്യൂട്ടോറിയലുകൾ ഉണ്ട്. നിങ്ങളുടെ സ്വന്തം ഡിസൈനിലേക്ക് കോഡ് പകർത്തുകയോ ഒട്ടിക്കുകയോ അല്ലെങ്കിൽ നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് അനുയോജ്യമായ തരത്തിൽ മെനു പരിഷ്കരിക്കുകയോ ചെയ്യാം.
സിഎസ്എസ് മാത്രം ലാവലാംപ് പോലുള്ള ഫാൻസി മെനു പ്രഭാവം
ഇത്തവണ ലാവലാമ്പ് പ്രഭാവം (ഉദാ. ഇവിടെ) എന്നറിയപ്പെടുന്ന സ്ലൈഡിംഗ് മെനു പ്രഭാവത്തിൽ നിന്ന് പ്രചോദനം ലഭിക്കും. ശുദ്ധമായ CSS ഉപയോഗിച്ച് ഞങ്ങൾ അത് പുനഃസൃഷ്ടിക്കും – CSS3 ട്രാൻസിഷനുകളും പൊതുവായ കൂടപ്പിറപ്പ് കോമ്പിനേറ്ററും ഉപയോഗിച്ച്. താഴെ ഞങ്ങൾ മൂന്ന് ലളിതമായ ഉദാഹരണങ്ങൾ ചർച്ച ചെയ്യും (ഡെമോ ആദ്യം കാണാൻ ഉറപ്പാക്കുക).
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
ഹെക്സഗൺ മെനു
തപാൽപെട്ടി UI
flip മെനു വീക്ഷണം
കുറച്ചു ദിവസം മുമ്പ് ബോറടിക്കുമ്പോൾ ഞാൻ ചെയ്ത ഒരു സ്കെച്ചിൽ ഞാൻ ചിന്തിച്ചത്. -വെബ്കിറ്റ് പ്രിഫിക്സ് ബ്രൗസറുകൾ ഉപയോഗിച്ചുള്ള മികച്ച ഫലം.
CSS സോഷ്യൽ ഷെയർ ബട്ടൺ
CSS സോഷ്യൽ ഷെയർ ബട്ടൺ പ്രചോദനം.
വിൻഡോസ് 8 മെട്രോ സ്റ്റൈൽ മെനു
സിഎസ്എസ് ഫ്ലാറ്റ്ലി മെനു
ശുദ്ധമായ HTML & CSS ഉപയോഗിച്ച് ഞാൻ സൃഷ്ടിക്കുന്ന ഒരു ചെറിയ മെനു ഇതാ
jQuery- ഉം CSS3-ഉം ഉള്ള ലളിതമായ ലംബ മെനു
ലളിതവും എന്നാൽ വളരെ സ്റ്റൈലിഷ് ലംബവുമായ മെനു ചില CSS3, കുറച്ച് ജെക്വറി, ഒരു ഇഷ്ടാനുസൃത ടെക്സ്റ്റ് ഫോണ്ട്, ഈ നിമിഷത്തിൽ നിങ്ങൾക്ക് കണ്ടെത്താൻ കഴിയുന്ന ഏറ്റവും ആകർഷകമായ ഐക്കൺ ഫോണ്ട്, ഇത് ഫോണ്ട്അവെര്യആണ്.
അക്കൗണ്ട് മെനു
നിഫ്റ്റി മോഡൽ വിൻഡോ പ്രഭാവങ്ങൾ
സിഎസ്എസ് ട്രാൻസിഷനുകളും ആനിമേഷനുകളും ഉപയോഗിച്ചുള്ള പരീക്ഷണാത്മക മോഡൽ ജാലകത്തിന്റെ പ്രഭാവങ്ങളുടെ ഒരു സെറ്റ്.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
ഫ്ലെക്സി മെനു – റെസ്പോൺസീവ് ഹൊറിസോണ്ടൽ & ലംബ മെനു
സിഎസ്എസ്, ജാവാസ്ക്രിപ്റ്റ് കോഡ് എന്നിവ അടിസ്ഥാനമാക്കിയുള്ള ഒരു മെനു ഘടകമാണ് ഫ്ലെക്സി. നിങ്ങൾക്ക് തിരശ്ചീനമോ ലംബമോ ആയ മെനുവായി ഫ്ലെക്സ് മെനു ഉപയോഗിക്കാം. ഏത് തരത്തിലുള്ള വെബ് സൈറ്റ് അല്ലെങ്കിൽ അനുയോജ്യമായ, പ്രതികരണാത്മകവും കൊളാപ്സിബിൾ മെനു ആണ് ഇത്..
jQuery-നൊപ്പം സൂപ്പർഫിഷ് മെനു
സൂപ്പർഫിഷ് ഒരു മെച്ചപ്പെട്ട സക്കർഫിഷ്-സ്റ്റൈൽ മെനു ജെക്വറി പ്ലഗിൻ ആണ്, ഇത് നിലവിലുള്ള ശുദ്ധമായ CSS ഡ്രോപ്പ്-ഡൗൺ മെനു (അതിനാൽ ജാവാസ്ക്രിപ്റ്റ് ഇല്ലാതെ ഇത് ഭംഗിയായി തരംതാഴ്ത്തുന്നു) ഇനിപ്പറയുന്ന കൂടുതൽ കൂടുതൽ മെച്ചപ്പെടുത്തലുകൾ ചേർക്കുന്നു.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
jQuery-നൊപ്പം ഓവർലേ പ്രഭാവ മെനു
ഈ ട്യൂട്ടോറിയലിൽ, ഒരു ഇരുണ്ട ഓവർലെയ് ഉപയോഗിച്ച് മെനു ഒഴികെ മറ്റെല്ലാം മൂടിക്കഴിഞ്ഞാൽ, ഒരു ലളിതമായ മെനു സൃഷ്ടിക്കാൻ പോവുകയാണ്. മെനു വെളുത്തനിറത്തിലായിരിക്കും, ഒരു സബ്മെനു ഏരിയ വിപുലീകരിക്കും. jQuery ഉപയോഗിച്ച് ഞങ്ങൾ ഈ പ്രഭാവം സൃഷ്ടിക്കും. അതുകൊണ്ട് നമുക്ക് തുടങ്ങാം!
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
ഇച്ഛാനുസൃതഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റ് സ്റ്റൈലിംഗ്
ചില ഇഷ്ടാനുസൃത ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റുകൾ എങ്ങനെ സൃഷ്ടിക്കാം എന്നതിനെ കുറിച്ചുള്ള ഒരു ട്യൂട്ടോറിയൽ. വിവിധ ആവശ്യങ്ങൾക്കായി വ്യത്യസ്ത ലുക്കിംഗ് ഡ്രോപ്പ്-ഡൗൺ മെനുകളും പട്ടികകളും ഉള്ള അഞ്ച് ഉദാഹരണങ്ങൾ ഞങ്ങൾ നിങ്ങൾക്ക് കാണിച്ചുതരും.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
തിരശ്ചീന ഡ്രോപ്പ്-ഡൗൺ മെനു
Microsoft.com മെനുവിൽ നിന്ന് പ്രചോദനം ഉൾക്കൊണ്ട് ഒരു പ്രതികരണപരമായ തിരശ്ചീന ഡ്രോപ്പ്-ഡൗൺ മെനു.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
ലംബ ചിഹ്നമെനു
ചെറിയ സ്ക്രീനുകൾക്കായി അതിന്റെ വലിപ്പം ക്രമീകരിക്കുന്ന ഒരു സ്ഥിരവെർട്ടിക്കൽ ഐക്കൺ മെനു.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
നെസ്റ്റഡ് അക്കോർഡിയൻ
നെസ്റ്റിംഗ് ലെവലുകളുടെ ചില ഉദാഹരണങ്ങളും മീഡിയ ക്വറിയും ഉള്ള ലളിതമായ, നെസ്റ്റബിൾ അക്കോർഡിയൻ.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
സ്ലൈഡ് ആൻഡ് പുഷ് മെനുകൾ
പേജിന്റെ വശങ്ങളിൽ നിന്ന് പുറത്തേക്ക് തെന്നിനീങ്ങുന്ന ഫിക്സഡ് മെനുകൾ, വലതുവശത്തും ഇടതുഭാഗത്തും ഓപ്ഷണലായി ശരീരം ചലിപ്പിക്കുക.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
ഉത്തരവാദിത്തമുള്ള മൾട്ടി-ലെവൽ മെനു
ഒരു പ്രതികരണാത്മക ബഹുതല മെനു, സ്വന്തം പശ്ചാത്തലത്തിൽ അതിന്റെ ഉപമെനുവുകൾ കാണിക്കുന്നു, ഒരു സ്പേസ്-സേവിംഗ് അവതരണവും ഉപയോഗവും അനുവദിക്കുന്നു.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
ലളിതമായ യൂട്യൂബ് മെനു പ്രഭാവം
യൂട്യൂബിന്റെ ചെറിയ ഇടത് വശത്തെ മെനുവിന്റെ പ്രഭാവം എങ്ങനെ പുനഃസൃഷ്ടിക്കാം എന്നതിനെ കുറിച്ചുള്ള ഒരു ട്യൂട്ടോറിയൽ. ആശയം താഴെ ചില മെനു ഇനം ലിസ്റ്റ് വെളിപ്പെടുത്തുമ്പോൾ വലതുവശത്തേക്ക് ഒരു ചെറിയ മെനു ഐക്കൺ സ്ലൈഡ് ചെയ്യുക എന്നതാണ്.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
റെസ്പോൺസീവ് റെറ്റിന-റെഡി മെനു
വ്യത്യസ്ത ബ്രൗസർ വലിപ്പങ്ങൾക്കായി മൂന്ന് ലേഔട്ടുകൾ ഉള്ള പ്രതികരണശേഷിയുള്ള, ടച്ച്-സൗഹൃദവും റെറ്റിന റെഡി മെനു.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
തിരശ്ചീന സ്ലൈഡ് ഔട്ട് മെനു
സബ്മെനുവിനായുള്ള ഗ്രിഡ് പോലുള്ള നഖച്ചിത്ര വിന്യാസമുള്ള ഒരു തിരശ്ചീന സ്ലൈഡ് ഔട്ട് മെനു. ചെറിയ ഉപകരണങ്ങൾക്കായുള്ള മീഡിയ ക്വറി ഉദാഹരണങ്ങൾ.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
ടൂൾടിപ്പ് മെനു
ലഭ്യമായ സ്ഥലമനുസരിച്ച്, പ്രധാന മെനുവിനു മുകളിലോ താഴെയോ സബ്മെനു പ്രത്യക്ഷപ്പെടുന്ന ലളിതമായ ടൂൾടിപ്പ് മെനു.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
നെപ്ട്യൂൺ – തിരശ്ചീന സബ്മെനു
ഇത് ശുദ്ധമായ HTML5/CSS3 മെനു ആണ്. മെനുവിൽ എച്ച്ടിഎംഎൽ5 ഘടനയുണ്ട്, എല്ലാ പ്രധാന ബ്രൗസറുകളിലും പ്രവർത്തിക്കുന്നു. മെനു എഡിറ്റ് ചെയ്യാനും ഏത് വെബ് സൈറ്റിലേക്കും സംയോജിപ്പിക്കാനും എ
ളുപ്പമാണ്. ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 9- ലും 8-ലും മെനു പ്രവർത്തിക്കുന്നു (പ്രധാന ഘടന 100% തുല്യമാണ്) എന്നാൽ അനിമേഷനും മറ്റ് ചില CSS3 സവിശേഷതകളും പ്രവർത്തിക്കുന്നില്ല.
മെനുഫിക്കേഷന് – പ്രതികരണശേഷിയുള്ള ഫ്ലൈ-ഔട്ട് മെനു
ഒരു വെബ് സൈറ്റിന്റെ ഏറ്റവും പ്രധാനപ്പെട്ട ഒരു വശമാണ് നാവിഗേഷൻ. ഫ്ലൈ-ഔട്ട് മെനു (Facebook-ൽ നിന്ന് പ്രചോദനം) നിങ്ങളുടെ വെബ് സൈറ്റിൽ നിങ്ങളുടെ സന്ദർശകരുടെ അനുഭവം നാടകീയമായി മെച്ചപ്പെടുത്താൻ കഴിയുന്ന ഏറ്റവും കാര്യക്ഷമമായ നാവിഗേഷൻ എന്ന് തെളിയിക്കപ്പെട്ടിട്ടുണ്ട്!
Facebook രീതിയിൽ പ്രതികരണശേഷിയുള്ള ഫ്ലൈ-ഔട്ട് മെനുവിലേക്ക് നിങ്ങളുടെ സൈറ്റുകളുടെ നാവിഗേഷൻ പരിവർത്തനം ചെയ്യുന്നതിന് ഉപയോക്തൃ സൗഹൃദവും ഇഷ്ടാനുസൃതവുമായ jQuery-സംയോജകമാണ് മെനുഫിക്കേഷൻ.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
DeepMenu – മൾട്ടി ലെവൽ നാവിഗേഷൻ മെനു
ഡീപ്പ് മെനു ഒരു മൾട്ടി ലെവൽ നാവിഗേഷൻ മെനു ആണ്, ലെയറുകൾതമ്മിൽ നാല് വ്യത്യസ്ത ട്രാൻസിഷനുകൾ ഉണ്ട്, കസ്റ്റമൈസേഷനായി ഏകദേശം 20 മറ്റ് പ്രോപ്പർട്ടികൾ ഉണ്ട്. ജാവാസ്ക്രിപ്റ്റ് അപ്രാപ്തമാണെങ്കിൽ, അത് ഒരു തിരശ്ചീന ഡ്രോപ്പ് ഡൗൺ മെനുവായി പ്രവർത്തിക്കും. തത്സമയ പ്രകടനത്തിനും കൂടുതൽ വിവരങ്ങൾക്കും പ്രിവ്യൂ പേജ് പരിശോധിക്കുക.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
സാർവത്രിക പ്രതികരണ മെഗാ മെനു
കോഡ്കാന്യണിലെ എന്റെ മികച്ച സൃഷ്ടികളുടെ ഒരു സംയോജനത്തിന്റെ ഫലമാണ് ഈ മെനു : ഞാൻ 12 വലിപ്പത്തിലുള്ള ഡ്രോപ്പ് ഡൗൺസ്, പരിധിയില്ലാത്ത ഫ്ലൈ-ഔട്ട് ഘടകങ്ങൾ സംയോജിപ്പിച്ച് ഒരു ജെക്വറി സ്ക്രിപ്റ്റ് സംയോജിപ്പിച്ച് ഒരു ഫ്ലെക്സിബിൾ മെഗാ മെനു സിസ്റ്റം ചേർത്തിരിക്കുന്നു.
ഇത് "സാധാരണ" മെഗാ മെനുവിന്റെ അതേ മാർക്കപ്പ് ഉപയോഗിച്ച് സ്റ്റിക്കി ഫൂട്ടർ (മെഗാ "ഡ്രോപ്പ്-അപ്പുകൾ" ആയി ഉപയോഗിക്കാവുന്നതാണ്. ഒരു ക്ലാസ് മാറ്റിക്കൊണ്ട് ആ 2 വകഭേദങ്ങൾ തമ്മിൽ നിങ്ങൾക്ക് മാറാവുന്നതാണ്.
ഉദാഹരണ താളുകൾ ഉപയോഗിക്കുക വഴി, നിങ്ങളുടെ സൈറ്റിൽ ഉപയോഗിക്കാൻ ആവശ്യമായ എല്ലാ കോഡും നിങ്ങൾക്ക് ഉണ്ട്. മെനു ഇഷ്ടാനുസൃതമാക്കുന്നതിന് CSS-നെ കുറിച്ചുള്ള ചില അടിസ്ഥാന അറിവ് ആവശ്യമാണ്, നിങ്ങൾക്ക് മെനുവിലെ ഓരോ ഭാഗത്തിന്റെയും രൂപം മാറ്റാം – ഫോണ്ടുകൾ, നിറങ്ങൾ, വലിപ്പങ്ങൾ മുതലായവ. ഏതുതരം പ്രഭാവം പ്രയോഗിക്കണമെന്ന് നിങ്ങൾക്ക് തീരുമാനിക്കാൻ കഴിയുന്ന തരത്തിൽ എളുപ്പത്തിൽ സജ്ജീകരിക്കാൻ കഴിയുന്ന ഏതാനും ഓപ്ഷനുകൾ സ്ക്രിപ്റ്റിൽ ഉൾപ്പെടുന്നു (മൌസ് ഹോവർ അല്ലെങ്കിൽ മൌസ് ക്ലിക്ക്, മങ്ങൽ, സ്ലൈഡ്…).
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
ഫീഡ്ലി ശൈലി CSS ആനിമേറ്റഡ് മെനു
ഫീഡ്ലി iOS ആപ്പ് മെനുവിൽ നിന്ന് പ്രചോദനം ഉൾക്കൊണ്ട്, എന്നാൽ ഒര
ു ട്വിസ്റ്റോടെ. ഈ മെനു ക്രമേണ പേജ് ലോഡിൽ മങ്ങുകയും മെനു ഇനം നീട്ടുന്നതിനായി ഹോവർ ഇഫക്റ്റുകൾ ചേർക്കുകയും ചെയ്യുന്നു.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
പുനർരൂപകൽപ്പന
ഒടുവിൽ എന്റെ വെബ്സൈറ്റ് പുനർരൂപകൽപ്പന ചെയ്യാൻ തുടങ്ങി.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
ശുദ്ധ Css3 റെസ്പോൺസീവ് നാവിഗേഷൻ
എളുപ്പത്തിൽ ഉ
പയോഗിക്കാൻ ക
ഴിയുന്നശുദ്ധ Css3Horizontal
NavigationFull Res
ponsiveNo javascript, no JQuery..
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
സ്റ്റെയർവേ ഹോവർ നവ്
ഇപ്പോൾ ഒരു jQuery സംയോജകം.
CSS3 സ്ലൈഡ് ഡൗൺ / അപ്പ് മെനു
ഇത് ഒരു മറഞ്ഞിരിക്കുന്ന ടോപ്പ്-മെനു ആണ്, അത് ക്ലിക്ക് ചെയ്താൽ (പിന്നീട് ബാക്ക് അപ്പ്) സ്ലൈഡ് ചെയ്യുക – ജാവാസ്ക്രിപ്റ്റ് ഇല്ലാതെ. ഞാൻ ലക്ഷ്യം സ്യൂഡോ സെലക്ടറും അനുഭവം സന്തോഷം നൽകുന്ന ഒരു ലളിതമായ പരിവർത്തനവും ഉപയോഗിക്കുന്നു.
CSS3 അക്കോർഡിയൻ ആൻഡ് ടോഗിൾ വിഡ്ജറ്റ് കിറ്റ്
CSS3 അക്കോർഡിയൻ ആൻഡ് ടോഗിൾ വിഡ്ജറ്റ് കിറ്റ് എളുപ്പത്തിൽ ശൈലിയും നടപ്പാക്കലും ഒരു സെറ്റ് ഉൾപ്പെടുന്നു – ശുദ്ധമായ CSS3 അയവുള്ളതും ഉത്തരവാദിത്തമുള്ളതുമായ അക്കോർഡിഷനുകളും ടോഗിൾ വിഡ്ജറ്റുകളും – കിറ്റ് 6 റെഡി ക്ലീൻ തീമുകളുമായി വരുന്നു, IE8-നായുള്ള ഒരു വീഴ്ച ഉൾപ്പെടെ എല്ലാ പ്രധാന ബ്രൗസറുകളിലും പ്രവർത്തിക്കുന്നു.
IcoRoll – സ്ക്രോൾ നാവിഗേഷൻ സിസ്റ്റം
PC-യിലും മൊബൈൽ ഉപകരണങ്ങളിലും ലംബമായ നാവിഗേഷന് അനുയോജ്യമായ പരിഹാരം നൽകുന്ന റെസ്പോൺസീവ് സ്ക്രോൾ മെനു സിസ്റ്റം.
താളിൽ HTML ID ആട്രിബ്യൂട്ട് മെനുവുമായി ബന്ധിപ്പിക്കുന്നു, അതിനാൽ ഉപയോക്താവ് പേജിൽ എവിടെയാണെന്ന് മെനു അറിയുന്നു.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
jQuery Accordion
jQuery Accordion എന്നത് ജാവാസ്ക്രിപ്റ്റിലും CSS-ലും അധിഷ്ഠിതമായ ഒരു അക്കോർഡിയൻ ഘടകമാണ്. ഇതിന് പ്രതികരണാത്മകവും ദ്രാവകവുമായ വിന്യാസമുണ്ട്, ഒരു ഗ്രിഡ് സിസ്റ്റവും 8 പ്രിസെറ്റ് സ്റ്റൈലുകളും ഉണ്ട്.
jQuery മറഞ്ഞിരിക്കുന്ന പാളി
ബ്രൌസർ മൂലയുടെ 4 പൊസിഷനിലേക്ക് മറഞ്ഞിരിക്കുന്ന പാനൽ ചേർത്ത ഒരു ജെക്വറി സംയോജകം. ഒരു ചിത്ര ഗാലറിയോ വീഡിയോ ഷോകേസ് ഷോകേസോ പ്രദർശിപ്പിക്കുന്നതിന് നിങ്ങൾക്ക് ഇത് ഉപയോഗിക്കാവുന്നതാണ്..
CSS3 മെനു വൃത്തിയാക്കുക
നിങ്ങളുടെ ഇഷ്ടാനുസൃത മെനുകൾ നിർമ്മിക്കുന്നതിന് ഈ ക്ലീൻ CSS3 മെനു ഒരു വഴക്കമുള്ളതും എളുപ്പത്തിൽ സംയോജിപ്പിക്കാൻ കഴിയുന്നതുമായ ഒരു പരിഹാരമാണ്. CSS3, HTML എന്നിവമാത്രമാണ് മെനു ആശ്രയിക്കുന്നത്. എല്ലാം 960 ഗ്രിഡ് സിസ്റ്റം അടിസ്ഥാനമാക്കിയുള്ളതാണ്. 6 കളർ വേരിയന്റുകളിലാണ് ഈ ഇനം എത്തുന്നത്. ഈ മെനു ഡിസൈൻ പൂർണ്ണമായും റെസ്പോൺസിബിൾ ആണ്
സിഎസ്എസ് ഫ്ലാറ്റ് പഗിനേഷൻ
ലളിതവും പരന്നതും സ്റ്റൈലിഷ് ആയ പേജനേഷനും. 6 മുൻകൂട്ടി നിശ്ചയിച്ച ിട്ടുള്ള സ്റ്റൈലിഷ് കളർ തീമുകൾ, 2 ദിശ, 4 വ്യത്യസ്ത വലിപ്പങ്ങൾ, അതിലധികം എന്നിവഇതിൽ ലഭ്യമാണ്. നിങ്ങളുടെ HTML ഡോക്യുമെന്റിൽ നടപ്പിലാക്കാൻ വളരെ എളുപ്പമാണ്. ചിത്രങ്ങളില്ല ! സി.എസ്.എസ് മാത്രം. എല്ലാ പ്രധാന ബ്രൗസറുകളും ഇത് പിന്തുണയ്ക്കുന്നു. ഡോക്യുമെന്റേഷൻ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.
jQuery ഡ്രാഗ്പാന്
നിങ്ങളുടെ വെബ് സൈറ്റ് സന്ദർശകർക്ക്, വളരെ വേഗത്തിൽ റെൻഡർ ചെയ്ത HTML-ന്റെ ഒരു വലിയ ഭാഗം നാവിഗേറ്റ് ചെയ്യുന്നതിനുള്ള കഴിവ് നൽകുക. സൂപ്പർ മാർക്കറ്റുകൾ, ഷോപ്പിംഗ് മാളുകൾ, തീം പാർക്കുകൾ, മൃഗശാലകൾ, ഫെസ്റ്റിവൽ സൈറ്റുകൾ, തിയേറ്ററുകൾ, വിമാനത്താവളങ്ങൾ, ഇരിപ്പിടങ്ങൾ എന്നിവയുടെ മാപ്പുകൾ സൃഷ്ടിക്കാൻ ഉപയോഗിക്കുന്ന താണ് യഥാർത്ഥത്തിൽ, ഉപയോക്താക്കളുടെ ബ്രൗസറിനേക്കാൾ വലിപ്പമുള്ള ഭൂപടമാണ്.
യുഐ-പ്രോ – ലളിതമായ മെട്രോ സ്റ്റൈൽ നാവിഗേഷൻ ബാർ
ഈ ലളിതമായ jQuery സംയോജകം ഉപയോഗിച്ച് നിങ്ങൾക്ക് മെട്രോ (ഇപ്പോൾ വിൻഡോസ് 8 UI എന്ന് മാത്രം വിളിക്കുന്നു) സ്റ്റൈൽ നാവിഗേഷൻ ബാറുകൾ എളുപ്പത്തിൽ സൃഷ്ടിക്കാൻ കഴിയും. പി.ജെ സൃഷ്ടിച്ച ഐക്കണ് പായ്ക്കാണ് ഈ സംയോജക പാക്കേജ്. സിഎസ്എസ് ക്ലാസുകള് ഉപയോഗിച്ച് നിങ്ങള് ക്ക് എളുപ്പത്തില് സജ്ജീകരിക്കാവുന്ന ഒനോരി. ഈ പ്ലഗിൻ ചുരുങ്ങിയ സവിശേഷതകളും ഓപ്ഷനുകളും ഉണ്ട്, വെബ്മാസ്റ്റർമാർക്കായി അവരുടെ സൈറ്റിൽ (കൾ) സമാനമായ പ്രവർത്തനക്ഷമത ആവശ്യമുള്ള വെബ്മാസ്റ്റർമാർക്കായി ഇത് സൃഷ്ടിച്ചിട്ടുണ്ട്.
മെനുസ്റ്റേഷൻ – യഥാർത്ഥ അൺലിമിറ്റഡ് റെസ്പോൺസീവ് മെനു
സവിശേഷതകൾ
സബ്മെനുഈസി കസ്റ്റമൈസേഷന
ിൽ മൾട്ടി ഉദ്ദേശ്യത്തി
നായി 1 മുതൽ 4 ക
ോളങ്ങൾ വരെ മാറ്റുന്നതിനായി
സബ്മെനു HTML ഉള്ളടക്കം മാറ്റുന്നതിന് റിയൽ അൺലിമ
ിറ്റഡ് മെനുറെസ്പോൺസീവ് ഡിസൈൻലൈറ
്റ് വെയ്റ്റ് പല നിറങ്ങൾ
സുഗമമായ വിപുലീകരിക്കാവുന്ന മെനു
HTML ഫയൽ / സ്ക്രിപ്റ്റ് കോളിൽ നിന്ന് നേരിട്ട്, അതിന്റെ 17 ബിൽറ്റ്-ഇൻ കോൺഫിഗ് പാരാമീറ്ററുകൾ കാരണം എളുപ്പത്തിൽ ഇഷ്ടാനുസൃതമാക്കാൻ കഴിയുന്ന, ചുരുങ്ങിയ ലംബമായ വിപുലീകരിക്കാവുന്ന മെനു നിർമ്മിക്കുന്നതിനുള്ള കൃത്യമായ ഉപകരണമാണ് സ്മൂത്ത് എക്സ്പാൻഡബിൾ മെനു. ഏതെങ്കിലും വെബ് പ്രൊജക്റ്റിലെ സംയോജനം എളുപ്പമാക്കുന്നതിന് 3 സാമ്പിളുകൾ (സെരിഫ്, സാൻ സെരിഫ്, ടിനി) പായ്ക്കിൽ ഉൾപ്പെടുന്നു. ഇത് Google ഫോണ്ട് ലൈബ്രറി സിസ്റ്റം ഉപയോഗിക്കുന്നു, അതിനാൽ അക്ഷരസഞ്ചയ ഫയലുകളോ @fontface സ്ക്രിപ്റ്റുകളോ സംയോജിപ്പിക്കേണ്ടതില്ല. മൊബൈൽ ഉപകരണങ്ങൾക്കായി ഇത് ഒപ്റ്റിമൈസ് ചെയ്തിരിക്കുന്നു.
ടാബുകൾ – എസ്ഇഒ & മൊബൈൽ ഫ്രണ്ട്ലി
jTabs (മറ്റൊരു പേര് Jaegers Tabs) മനസ്സിൽ ആധുനിക വെബ് മാനദണ്ഡങ്ങൾ ഉപയോഗിച്ച് നിർമ്മിച്ച, ഇഷ്ടാനുസൃത ലൈറ്റ് വെയ്റ്റ് ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറി (4kb gzipped).
സോസോ കിളിവാതിലുകള്
ഡെസ്ക്ടോപ്പ് ബ്രൗസറുകളിലും ഏറ്റവും പ്രധാനമായും മൊബൈൽ ബ്രൗസറുകളിലും ഏറ്റവും പ്രധാനപ്പെട്ടത്, ഡെസ്ക്ടോപ്പ് ബ്രൗസറുകളിൽ വേഗതയും പ്രകടനവും വേണ്ടി, ZOZo ടാബുകളുടെ പുതിയ പതിപ്പ് (v3.5) പൂർണ്ണമായും ഉത്തരവാദിത്തമുള്ളതും ടച്ച്-എനേബിൾഡ് ആണ്. ഇത് പ്രവർത്തിക്കുന്നു, ഒരു നേറ്റീവ് ആപ്പ് പോലെ തോന്നുന്നു!. നിങ്ങളുടെ ഉള്ളടക്കം കാണിക്കുന്നതിന് ചെറിയ സ്ക്രീനുകളിൽ ടാബുകൾ/ഡ്രോപ്പ് ഡൗൺ മെനുവിൽ ക്ലിക്കുചെയ്യുമ്പോൾ പേജിന്റെ മുകളിൽ തനിയെ സ്ക്രോൾ ചെയ്യാൻ നിങ്ങളെ അനുവദി
ക്കുന്നു. ഒരു കോഡും എഴുതാതെ തന്നെ നിങ്ങളുടെ സൈറ്റിലേക്ക്/ബ്ലോഗിലേക്ക് പെട്ടെന്ന് സംയോജിപ്പിക്കാവുന്ന മുഴുവൻ ടാബ് പ്രവർത്തനക്ഷമതയും നൽകുന്നതിന്, ഭാരം കുറഞ്ഞതും വളരെ ഇഷ്ടാനുസൃതവുമായ ജെക്വറി സംയോജകമാണ് Zozo Tabs. അതിന്റെ ചില പ്രധാന സവിശേഷതകൾ: തിരശ്ചീനവും ലംബവുമായ ടാബുകൾ, ഡീപ്പ്-ലിങ്കിംഗ്, പൊസിഷനിലേക്കുള്ള 10 ഫ്ലെക്സിബിൾ വഴികൾ, പവർഫുൾ API, 10 അതുല്യ പ്രമേയങ്ങൾ തുടങ്ങിയവ. IE7, IE8 തുടങ്ങിയ പഴയ ബ്രൗസറുകളിലും ഇത് പ്രവർത്തിക്കുന്നുവെന്ന് ഞങ്ങൾ സൂചിപ്പിച്ചിരുന്നോ?
ഓപ്പൺപാനൽ – എവിടെയും റെസ്പോൺസീവ് പാനൽ തുറക്കുക
നിങ്ങളുടെ പേജിൽ എവിടെവേണമെങ്കിലും പാനൽ തുറക്കാൻ അനുവദിക്കുന്ന ജെക്വറി സംയോജകമാണ് ഓപ്പൺപാനൽ, നിങ്ങൾ ആഗ്രഹിക്കുന്നപോലെ പരിധിയില്ലാത്ത പാനലുകളും ഉത്തരവാദിത്തരൂപകൽപ്പനയ്ക്കുള്ള പിന്തുണയും. ഈ ചെറിയ പ്ലഗിൻ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ആവശ്യമുള്ളതെന്തും ചേർക്കുന്നതിനായി നിങ്ങളുടെ സൈറ്റിനായി കൂടുതൽ സ്ഥലം തുറക്കാവുന്നതാണ്.
OneMenu – ഉത്തരവാദിത്തമെട്രോ UI മെനു
മെട്രോ UI പ്രമേയങ്ങൾക്കായി സൃഷ്ടിക്കപ്പെട്ട jQuery നാവിഗേഷൻ മെനു സംയോജകമാണ് OneMenu. ഉത്തരവാദിത്തമുള്ള രൂപകൽപ്പന, പരിധിയില്ലാത്ത മെനുകൾ OneMenu പിന്തുണയ്ക്കുന്നു.
jQuery-നൊപ്പം കിളിവാതിലുകളും സ്ലൈഡറും സംയോജനം
സ്ലൈഡർ പോലെ യുള്ള ആനിമേഷനുള്ള ടാബുകൾ.ഇത് ടാബുകളാ
യോ സ്ലൈഡറായോ ഉപയോഗിക്കുക അല്ലെങ്കിൽ എന്തുകൊണ്ട് രണ്ടും രണ്ടും?
ഉപയോഗപ്രദമായ ടാബുകൾ കൂടുതൽ അനിമേറ്റഡ് ആക്കണമെന്ന് നിങ്ങൾ എപ്പോഴും ആഗ്രഹിച്ചിട്ടുണ്ടോ? സ്ലൈഡർ പോലെ എന്തെങ്കിലും? ഒപ്പം, ഈ പ്ലഗിൻ നിങ്ങൾക്ക് വേണ്ടി, ടാബുകൾ തിരശ്ചീനവും ലംബവുമായ വഴികൾ സ്ലൈഡ് കഴിയും കൂടാതെ ട്രാൻസിഷൻ ഇടയിൽ 15 വ്യത്യസ്ത പ്രഭാവങ്ങൾ ലഭ്യമാണ്, ഓട്ടോ ഹൈറ്റ് ഉപയോഗിച്ച് എല്ലാ അതിന്റെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി പ്രവർത്തിക്കുന്നു.
ബോക്സ് അക്കോർഡിയൻ മെനു – റെസ്പോൺസീവ്
നിങ്ങൾക്ക് സ്വന്തമായി ഉണ്ടാക്കാൻ അതിന്റെ എല്ലാ സവിശേഷതകളും ഉപയോഗിച്ച് കളിക്കാം.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
അക്കോർഡിയൻ മൾട്ടി മെനു
ലളിതവും ആധുനികവും എളുപ്പത്തിൽ jQuery- ഉം CSS3 ലംബവുമായ അക്കോർഡിയൻ മെനു ഇൻസ്റ്റാൾ ചെയ്യാൻ കഴിയും.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
തണ്ണിമത്തൻHTML5 – സ്ലൈഡിംഗ് മെനു
ഏതൊരു വെബ് സൈറ്റുകള് ക്കും അനുയോജ്യമായ മെനു സംയോജകമാണ് സ്ലൈഡിംഗ് മെനു. ഇത് അതിന്റെ തനതായ സ്ലൈഡിംഗ് ഡിസൈനും ധാരാളം API ഓപ്ഷനുകളും നിങ്ങളെ ഇഷ്ടാനുസൃതമാക്കാൻ അനുവദിക്കുന്നു. എല്ലാ ബ്രൗസറുകളും മൊബൈൽ ഉപകരണങ്ങളും പിന്തുണയ്ക്കുന്നു. ഫയർഫോക്സ്, ക്രോം, IE10+, സഫാരി, ഓപ്പറ എന്നിവയിൽ ഇത് നന്നായി പ്രവർത്തിക്കുന്നു, IE7, 8, 9 എന്നിവയിൽ ഇത് പൂർണ്ണമായും പ്രവർത്തിക്കുന്നു: CSS3 ആനിമേഷനുകളും 45 ഡിഗ്രി റൊട്ടേഷനും ഇല്ല.
നിങ്ങൾക്ക് ഇത് ഇഷ്ടമാണെങ്കിൽ, ദയവായി അത് ദ്രുത റേറ്റിംഗ് നൽകുക. നിങ്ങൾക്ക് എന്തെങ്കിലും നിർദ്ദേശങ്ങൾ/ഫീച്ചർ അഭ്യർത്ഥന ഉണ്ടെങ്കിലോ ബഗ് കണ്ടെത്തുകയാണെങ്കിൽ, എന്നെ ബന്ധപ്പെടാൻ നിങ്ങൾക്ക് സ്വാഗതം, ഞാൻ അവരെ ASAP അഭിസംബോധന ചെയ്യും.
കൂടുതൽ / ഇൻഫോ ഡെമോConstellation name (optional)
മെട്രോ സ്റ്റൈൽ സൈഡ് മെനു
സവിശേഷതകൾ:
ക്രോസ്ബ്രൗസർസ
ിംപിൾ/ക്ലീൻമെ
ട്രോ സ്റ്റൈൽ9
00+ SVG ചിഹ്നങ്
ങൾHight റെസല്യൂഷൻ (100% വെക്ടർ)സാധ
ുതയുള്ള HTML5
വെർട്ടു – അക്കോർഡിയൻ മെനു
വെർട്ടു – അക്കോർഡിയൻ മെനു നിങ്ങളുടെ വെബ് സൈറ്റിനായി ലളിതവും മനോഹരവുമായ അക്കോർഡിയൻ മെനു.
ലംബപ്രതികരണ മെനു
20 കളർ സ്കീമുകളും ക്രോസ്-ബ്രൗസർ പിന്തുണയും ലളിതമായ സംയോജനവും ഉള്ള റെസ്പോൺസീവ് വെർട്ടിക്കൽ മെനുവുകളുടെ ശേഖരണം. ഉത്തരവാദിത്തമുള്ള ലംബ മെനു ഏതെങ്കിലും സൈറ്റിന്റെ യും അഡ്മിൻ ഡാഷ്ബോർഡുകളുടെയും സൈഡ് ബാറുകളിൽ ഉപയോഗിക്കാവുന്നതാണ്.
ശുദ്ധമായ CSS3 അക്കോർഡിയൻ മെനു
സവിശേഷതകൾ
ബ്രൗസറുകൾ:
Chrome
FirefoxO
peraസഫ
ാരിഇന്
റർനെറ്റ് എക്സ്പ്ലോറർ 10
7 നിറങ്ങ
ൾ:നീ
ലപർപ്പ
ിൾച
ുവപ്പ്
ഓറഞ്
ച് മഞ്
ഞനിറം
വേഡ്പ്രസ്സ് മെനുഫിക്കേഷന്
ഒരു വെബ് സൈറ്റിന്റെ ഏറ്റവും പ്രധാനപ്പെട്ട ഒരു വശമാണ് നാവിഗേഷൻ. ഫ്ലൈ-ഔട്ട് മെനു (Facebook-ൽ നിന്ന് പ്രചോദനം) നിങ്ങളുടെ വെബ് സൈറ്റിൽ നിങ്ങളുടെ സന്ദർശകരുടെ അനുഭവം നാടകീയമായി മെച്ചപ്പെടുത്താൻ കഴിയുന്ന ഏറ്റവും കാര്യക്ഷമമായ നാവിഗേഷൻ എന്ന് തെളിയിക്കപ്പെട്ടിട്ടുണ്ട്!
Facebook ഫാഷനിൽ നിങ്ങളുടെ വേഡ്പ്രസ്സ് 3 മെനുകളെ ഒരു പ്രതികരണാത്മക ഫ്ലൈ-ഔട്ട് മെനുവിലേക്ക് പരിവർത്തനം ചെയ്യുന്നതിന്, ഉപയോക്തൃ സൗഹൃദവും ഇഷ്ടാനുസൃതവുമായ വേഡ്പ്രസ്സ്-പ്ലഗിൻ ആണ് വേഡ്പ്രസ് മെനുഫിക്കേഷൻ.
വേഡ്പ്രസ്സ് 3 മെനു ഉപയോഗിക്കാൻ തിരഞ്ഞെടുക്കുക, നിങ്ങൾ പോകാൻ തയ്യാറാണ്. അത് അത്ര എളുപ്പമാണ്!
niceMenu – വേഡ്പ്രസ്സ് സംയോജകം
niceMenu – വേഡ്പ്രസ്സ് പ്ലഗിൻ ഒന്നി
ലധികം ലെവൽ വലിയ മെനുവിനിടയിൽ സ്ലൈഡ് ചെയ്യാനുള്ള പുതിയ വഴി. ഇപ്പോൾ വ
േഡ്പ്രസ്സ് പ്ലഗിൻ ആയി! നിങ്ങൾക്ക്
വളരെ എളുപ്പത്തിൽ ഒന്നിലധികം ലെവലുകളിൽ നാവിഗേറ്റ് ചെയ്യാൻ കഴി
യും! ഏതാനും ക്ലിക്കുകൾ & മെനു നിങ്ങളുടെ വേഡ്പ്രസ്വെബ്സൈറ്റിൽ ഇൻസ്റ്റാൾ ചെയ്തിരിക്കുന്നു.
വിഡ്ജറ്റ് സൈഡ് ബാർ പോലെ, എവിടെയും പൊസിഷൻ ചെയ്യാൻ എളുപ്പമാണ്. നിങ്ങൾ
ക്ക് ഇഷ്ടാനുസൃത ലിങ്കുകൾ, വെബ് സൈറ്റ് പേജുകൾ & വിഭാഗങ്ങൾ എന്നിവ ഇടാം.
UberMenu – വേഡ്പ്രസ്സ് മെഗാ മെനു സംയോജകം
ഉപയോക്തൃ സൗഹൃദവും, വളരെ ഇഷ്ടാനുസൃതവും ഉത്തരവാദിത്തമുള്ളതുമായ മെഗാ മെനു വേഡ്പ്രസ്സ് സംയോജകമാണ് UberMenu. വേഡ്പ്രസ്സ് 3 മെനു സിസ്റ്റം ഉപയോഗിച്ച് ഇത് ബോക്സിന് പുറത്ത് പ്രവർത്തിക്കുന്നു, വളരെ ഇഷ്ടാനുസൃതവും സർഗ്ഗാത്മകവുമായ മെഗാ മെനു കോൺഫിഗറേഷനുകൾ സൃഷ്ടിക്കാൻ വളരെ ലളിതവും എന്നാൽ ശക്തവും ആണ്.
CSS3 ഉപയോഗിച്ച് നിങ്ങളുടെ മെനു സ്പൈസ് ചെയ്യുക
"നുറുങ്ങുകളും വിദ്യകളും" എന്ന് വിളിക്കപ്പെടുന്ന ഈ പുതിയ വിഭാഗത്തിൽ വെബ് ഡെവലപ്പ് മെന്റ്, വെബ് ഡിസൈൻ എന്നിവയെ ചുറ്റിപ്പറ്റിയുള്ള ചില ദ്രുതവും രസകരവുമായ ചില രീതികൾ ഞങ്ങൾ പരിചയപ്പെടുത്തും. ഇന്നത്തെ ടിപ്പിൽ, അതിൽ വൃത്തിയുള്ള ഹോവർ ഇഫക്റ്റ് ചേർത്ത് നിങ്ങളുടെ മെനു സ്പൈസ് ചെയ്യുന്നത് എങ്ങനെയെന്ന് ഞങ്ങൾ കാണിച്ചുതരും. ഒരു മെനു ഇനത്തിനു മുകളിൽ പൊങ്ങിവരുമ്പോൾ ഒരു ചിത്രം വലതുവശത്തുനിന്ന് സ്ലൈഡ് ചെയ്യുക എന്നതാണ് ആശയം.
കൂടുതൽ വിവര ഡെമോConstellation name (optional)
CSS3 പ്രഭാവങ്ങളും അറിയിപ്പ് കുമിളകളും ഉള്ള മെനു
CSS3 ഇഫക്റ്റുകളും നോട്ടിഫിക്കേഷൻ ബബിളുകളും ഉള്ള ഈ മെനുവിൽ നിങ്ങൾക്ക് ആവശ്യമായതെല്ലാം ഉണ്ട്. പ്രവർത്തനക്ഷമത വിവിധ ഭാഗങ്ങളായി വിഭജിച്ചിരിക്കുന്നു, അത് വളരെ ശക്തവുമാണ്.
പരിധികളില്ലാത്ത മെനു ലെവലുകളും മെഗാ മെനുവും ഉള്ള എല്ലാ CSS മെനുകളും ഒരു പാറയുടെ അടിസ്ഥാനമാണ് കോർ. പ്രഭാവങ്ങൾ ശുദ്ധcss ആണ്, എന്നാൽ പഴയ ബ്രൗസറുകളിൽ പിന്തുണയ്ക്കായി jQuery സംയോജകം നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്നതാണ്. മെനു ശൈലികൾ ശുദ്ധമായ സിഎസ്എസ് ആണ്, ചിത്രങ്ങൾ ഒന്നും തന്നെ ഉപയോഗിച്ചിട്ടില്ല.
ഇരുണ്ട മെനു: ശുദ്ധമായ CSS3 രണ്ട് ലെവൽ മെനു [Tutorial]
ഏതാനും ദിവസം മുമ്പ് ഞങ്ങൾ സൗജന്യ PSD-യിൽ ഡാർക്ക് മെനു എന്ന ൊരു ഫ്രീബീ പുറത്തിറക്കി, ഈ ലളിതമായ ഈ ട്യൂട്ടോറിയലിൽ, HTML- ലും ശുദ്ധമായ CSS3-ലും ഈ രണ്ട് ലെവൽ ഡാർക്ക് മെനു എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് നിങ്ങൾ മനസ്സിലാക്കും. ഈ മെനു സൃഷ്ടിക്കുന്നതിനായി ജാവാസ്ക്രിപ്റ്റോ ഇമേജുകളോ ഉപയോഗിച്ചിട്ടില്ല, ഭാവി പ്രൊജക്റ്റുകളിൽ നിങ്ങളെ സഹായിക്കുന്ന ചില വിദ്യകൾ നിങ്ങൾക്ക് പഠിക്കാൻ കഴിയുമെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു.
ഇപ്പോൾ, നിങ്ങൾക്ക് CSS3-നെ അത്ര പരിചിതമല്ലെങ്കിൽ CSS3.info അല്ലെങ്കിൽ W3Schools-ൽ നിങ്ങൾക്ക് അതിനെക്കുറിച്ച് പഠിക്കാവുന്നതാണ്. ഈ ശൈലികൾ എളുപ്പത്തിൽ സൃഷ്ടിക്കാൻ നിങ്ങളെ സഹായിക്കുന്നതിന് ഈ ഓൺലൈൻ CSS3 ജനറേറ്റർ നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്നതാണ്. ഒരു എച്ച്ടിഎംഎൽ ഡോക്യുമെന്റിനുള്ളിൽ എല്ലാ HTML കോഡും എല്ലാ CSS ശൈലികളും എച്ച്ടിഎംഎൽ ഡോക്യുമെന്റ് ഹെഡറിലോ അല്ലെങ്കിൽ ഒരു പ്രത്യേക CSS ഫയലിലോ ഇടേണ്ടതുണ്ട്. എല്ലാ നിറങ്ങളും പ്രഭാവങ്ങളും നിഴലുകളും ഡാർക്ക് മെനു PSD ഫയലിൽ നിന്ന് എടുത്തിരിക്കുന്നു. ഇനി നമുക്ക് ട്യൂട്ടോറിയൽ തുടങ്ങാം.
കൂടുതൽ വിവര ഡെമോConstellation name (optional)
ഷെർപ്പ | സമ്പൂർണ്ണ നാവിഗേഷൻ സിസ്റ്റം (സിഎസ്എസ് എഡിഷൻ)
പേര് സൂചിപ്പിക്കുന്നത് പോലെ, നിങ്ങളുടെ എല്ലാ നാവിഗേഷൻ ആവശ്യകതകൾക്കും ഒരു സമ്പൂർണ്ണ പരിഹാരമാണ് ഷെർപ്പ.
ഷെർപ്പ എല്ലാ ഇന്റർഫേസിന്റെയും മൂന്ന് പ്രധാന നാവിഗേഷൻ ഘടകങ്ങൾ ഒന്നിച്ച് കൊണ്ടുവരുന്നു – നവ്ബാർ, സൈഡ്ബാർ, സ്റ്റിക്കി ഫൂട്ടർ.
സ്ലൈഡ് മെനു, മെഗാ മെനു, അക്കോർഡിയൻ മെനു (സൈഡ് ബാറിൽ), ഡ്രോപ്പ് മെനു എന്നിവ ഉൾപ്പെടെ വിവിധ മെനു തരങ്ങളുടെ ഒരു തിരഞ്ഞെടുപ്പ് ഉൾപ്പെടുന്നു. നിങ്ങൾക്ക് ഇത് തിരഞ്ഞെടുക്കുകയും തിരഞ്ഞെടുക്കുകയും മിക്സ് ചെയ്യുകയും ചെയ്യാം, ഒരു പ്രത്യേക നാവിഗേഷൻ ഉണ്ടാക്കാം.
10 വ്യത്യസ്ത കളർ ചർമ്മങ്ങൾ, 12 മനോഹരമായ പശ്ചാത്തല ചിത്രങ്ങൾ, CSS3 ഇഫക്റ്റുകൾ ഉപയോഗിക്കുന്നു, കോഡ്കാന്യണിലെ ഏറ്റവും മികച്ച ലുക്കിംഗ് നാവിഗേഷനുകളിൽ ഒന്നാക്കുന്നതിന് 500+ ഐക്കണുകൾ ഉണ്ട്. സ്ക്രീൻഷോട്ടുകളും പ്രിവ്യൂവും പരിശോധിക്കുക.
വ്യത്യസ്ത സ്രോതസ്സുകളിൽ നിന്ന് പല വ്യത്യസ്ത നവുകളെ ഒരുമിച്ചു കൊണ്ടുവരാൻ ശ്രമിക്കുന്നതിന് പകരം ഷെർപ്പ | നാവിഗേഷൻ സിസ്റ്റം പൂർത്തിയാക്കുക, നിങ്ങളുടെ സിസ്റ്റത്തിലേക്ക് സംയോജിപ്പിക്കുമ്പോൾ സ്വയം സമയം ലാഭിക്കുക.
ഒരു CSS3 അനിമേറ്റഡ് മെനു ഉണ്ടാക്കുന്നു
ഈ ഹ്രസ്വ ട്യൂട്ടോറിയലിൽ, നിങ്ങളുടെ വെബ് സൈറ്റിലോ ടെംപ്ലേറ്റിലോ ഒരു മിനുസപ്പെടുത്തിയ ലുക്ക് ചേർക്കാൻ ഉപയോഗിക്കാവുന്ന ജാവാസ്ക്രിപ്റ്റ്-ഫ്രീ അനിമേറ്റഡ് നാവിഗേഷൻ മെനു നിർമ്മിക്കുന്നതിന്, CSS3 ഇഫക്റ്റുകളുടെയും പരിവർത്തനങ്ങളുടെയും ശക്തി ഞങ്ങൾ ഉപയോഗിക്കും.
കൂടുതൽ വിവര ഡെമോConstellation name (optional)
HTML5/CSS3 ഡ്രോപ്പ് ഡൗൺ മെനു
സൂപ്പർ ഫ്ലെക്സിബിൾ ആൻഡ് സെമാന്റിക് HTML5 /CSS3 ഡ്രോപ്പ് ഡൗൺ മെനു, പൂർണ്ണമായും ജാവാസ്ക്രിപ്റ്റ് ഇല്ല. വളരെ ലളിതവും വേഗത്തിലും നടപ്പിലാക്കാൻ!
CSS3 ഡ്രോപ്പ് ഡൗൺ മെനു
നോട്ട്പാഡ് പ്രമേയം ഞാൻ കോഡിംഗ് ചെയ്യുന്നതിനിടയിൽ, ഞാൻ ചില പുതിയ CSS3 സവിശേഷതകൾ പഠിച്ചു, ഇപ്പോൾ നിങ്ങളുമായി പങ്കിടാൻ ഞാൻ ആഗ്രഹിക്കുന്നു. ബോർഡർ-റേഡിയസ്, ബോക്സ്-നിഴൽ, ടെക്സ്റ്റ്-നിഴൽ എന്നിവ ഉപയോഗിച്ച് ഞാൻ സൃഷ്ടിച്ച മാക് പോലുള്ള മൾട്ടി-ലെവൽ ഡ്രോപ്പ് ഡൗൺ മെനു കാണുന്നതിന് ഡെമോ കാണുക. ഫയർഫോക്സ്, സഫാരി, ക്രോം എന്നിവയിൽ ഇത് വളരെ മികച്ചതാണ്. IE7+പോലുള്ള CSS3 കോമ്പിറ്റിബിൾ ബ്രൗസറുകളിലും ഡ്രോപ്പ് ഡൗൺ പ്രവർത്തിക്കുന്നു, എന്നാൽ ഉരുണ്ട മൂലകളും നിഴലും റിൻഡർ ചെയ്യപ്പെടില്ല.
കൂടുതൽ വിവര ഡെമോConstellation name (optional)
ലളിതമായ നാവിഗേഷൻ മെനു
ഡാർക്ക് സബ് മെനുവുള്ള നല്ല, ലളിതമായ നാവിഗേഷൻ മെനു. സങ്കീർണ്ണമായ വെബ് സൈറ്റുകൾ, വലിയ ബ്ലോഗുകൾ തുടങ്ങിയവയ്ക്ക് അനുയോജ്യമാണ്. പതിവുപോലെ, ഇത് വെക്ടറും പൂർണ്ണമായും പാളിയ PSD ഫയലുമാണ്. നിങ്ങൾക്ക് അത് ഇഷ്ടമാണെങ്കിൽ, ട്വിറ്ററിൽ ഒപ്പം/അല്ലെങ്കിൽ Facebook-ൽ അത് പങ്കിടുക.
കൂടുതൽ വിവര ഡെമോConstellation name (optional)
CSS3 മെഗാ ഡ്രോപ്പ് മെനു
കൂടുതൽ വിവരങ്ങൾ ഡൌൺലോഡ് ചെയ്യുകConstellation name (optional)
jQuery ലംബമായ ഡ്രോപ്പ്-ഡൗൺ മെനു
സ്ക്രിപ്റ്റുകൾ രണ്ട് സങ്കീർണ്ണമായ ജെക്വറി മെനു പ്ലഗിനുകളാണ്, പരിധിയില്ലാത്ത എണ്ണം സബ്മെനുകൾ, എളുപ്പത്തിൽ സംയോജിപ്പിക്കാൻ കഴിയും.
CSS3 സ്ലൈഡിംഗ് മെനു
പലപ്പോഴും കാര്യങ്ങള് മാറ്റി നിര് ത്തുന്നത് നല്ലതാണ്. നാവിഗേഷൻ മെനുകൾ ഒരു നല്ല ഉദാഹരണമാണ്. ഞാൻ ഒരു ലേഖനം വായിക്കുകയാണെങ്കിൽ, ഞാൻ ഒരു വലിയ ശതമാനം സ്ക്രീൻ റിയൽ എസ്റ്റേറ്റ് ലിങ്കുകളുമായി എടുക്കാൻ ആഗ്രഹിക്കുന്നില്ല – പ്രത്യേകിച്ച് ഒരു മൊബൈൽ ഉപകരണത്തിൽ.
ഈ ലേഖനത്തിൽ, CSS മാത്രം ഉപയോഗിച്ച് ഒരു സ്ലൈഡ്-ഔട്ട് മെനു നിർമ്മിക്കുവാൻ പോകുന്നു. നിങ്ങൾ ഒരു ആധുനിക ബ്രൗസർ ആണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, മനോഹരമായ 3D പേജ് പ്രഭാവവും ഇത് കാണിക്കും.
കൂടുതൽ വിവര ഡെമോConstellation name (optional)
സിഎസ്എസ് നാവിഗേഷൻ
ഡ്രോപ്പ് ഡൗൺ ഘടകങ്ങളും ട്രാൻസിഷൻ ഇഫക്റ്റുകളും ഉള്ള CSS നാവിഗേഷൻ ബാർ. ഡ്രോപ്പ് ഡൗൺ മെനുവിനു മുകളിൽ മൗസ് കഴ്സർ നീക്കുമ്പോൾ, അത് മറയ്ക്കുന്നു. അതിനാൽ, ഡ്രോപ്പ് ഡൗൺ എലമെൻറുകൾ ക്ക് മുകളിൽ ഹോവർ ചെയ്യുന്നതിന് നിങ്ങൾ മൌസ് വേഗത്തിൽ നീക്കേണ്ടതുണ്ട്. ഇത് വളരെ ലളിതവും പെട്ടെന്നുള്ളതുമായ ചില കളർ അഡ്ജസ്റ്റുമെന്റുകളും jQuery ഉപയോഗിച്ച് ചെയ്യുന്നു. എൻറ്റിപോ യുടെ ചിഹ്നങ്ങൾ.
കൂടുതൽ വിവര ഡെമോConstellation name (optional)
jQuery- ഉം CSS3-ഉം ഉള്ള സ്ലൈഡ് ഡൗൺ ബോക്സ് മെനു
ഈ ട്യൂട്ടോറിയലിൽ ഞങ്ങൾ അതുല്യമായ സ്ലൈഡിംഗ് ബോക്സ് നാവിഗേഷൻ സൃഷ്ടിക്കും. മെനു ഐറ്റം സ്ലൈഡ് ഔട്ട്, ഒരു നഖച്ചിത്രം പൊങ്ങിവരുന്ന സമയത്ത് ഒരു ബോക്സ് ഉണ്ടാക്കുക എന്നതാണ് ആശയം. ചില മെനു ഇനങ്ങൾക്കായി കൂടുതൽ ലിങ്കുകൾ ഉള്ള ഒരു സബ്മെനു ബോക്സും ഞങ്ങൾ ഉൾപ്പെടുത്തും. സബ്മെനു ഇടത്തേക്ക് തെന്നിമാറും …
കൂടുതൽ വിവര ഡെമോConstellation name (optional)
അക്കോർഡിയൻ മെനു സൃഷ്ടിക്കുക (CSS3+jQuery)
ഏതാനും ദിവസം മുമ്പ് നിങ്ങൾ ശ്രദ്ധിച്ചതുപോലെ, ശുദ്ധമായ CSS3-ൽ ഒരു അക്കോർഡിയൻ മെനു എങ്ങനെ സൃഷ്ടിക്കാം എന്നതിനെ കുറിച്ചുള്ള ഒരു ട്യൂട്ടോറിയൽ ഞങ്ങൾ പുറത്തിറക്കി. ഈ ശുദ്ധ CSS3 അക്കോർഡിയൻ മെനു എല്ലാ ബ്രൗസറുകളിലും പ്രവർത്തിക്കില്ല എന്നതിനാൽ, ഏറ്റവും പഴയ ബ്രൗസറുകളിൽ ടാർഗറ്റ് സെലക്ടർ പിന്തുണയ്ക്കാത്തതിനാൽ ഈ മെനുവിന്റെ jQuery പതിപ്പ് സൃഷ്ടിക്കാൻ ഞങ്ങൾ തീരുമാനിച്ചു. കൂടാതെ കൂടുതൽ സ്ഥിരതയും ക്രോസ് ബ്രൗസർ അനുയോജ്യതാ പിന്തുണയും JQuery വാഗ്ദാനം ചെയ്യുന്നു, അതിനാൽ നിങ്ങളുടെ സന്ദർശകർക്ക്/ക്ലയിന്റിന് ഒരു മെച്ചപ്പെട്ട ഉൽപ്പന്നം നൽകാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഈ jQuery പതിപ്പ് ഉപയോഗിക്കാൻ നിങ്ങൾ പരിഗണിച്ചേക്കാം.
കൂടുതൽ വിവര ഡെമോConstellation name (optional)
സൂപ്പർ മെനു പാക്ക് (10 മെനുകൾ)
നിങ്ങളുടെ വെബ് സൈറ്റുകളോ ആപ്ലിക്കേഷനുകളോ പദ്ധതികളോ ഉപയോഗിച്ച് ഇച്ഛാനുസൃതമോ ലേഔട്ടോ ജെക്വറി ഫ്രെയിംവർക്ക് ഉപയോഗിച്ച് 10 കൂൾ മെനുകളുടെയും 5-ഉം ജെക്വറി ഫ്രെയിംവർക്കിലെ 5-ഉം ഒരു ശേഖരമാണ് സൂപ്പർ മെനു പായ്ക്ക്.
തങ്ങളുടെ ഡിസൈനുകൾക്ക് ഒരു പ്രത്യേക സ്പർശം നൽകാൻ ആഗ്രഹിക്കുന്നവർക്ക് അല്ലെങ്കിൽ ഒരു സ്റ്റാർട്ടിംഗ് പോയിന്റ് കണ്ടെത്താൻ ആഗ്രഹിക്കുന്നവർക്ക് ഇത് അനുയോജ്യമാണ്. നിങ്ങൾക്ക് ചോയ്സ് നൽകുന്നതിന് സ്റ്റൈലിലും രൂപത്തിലും സാധ്യമായത്ര വൈവിധ്യമാർന്ന ഒരു ശേഖരം സൃഷ്ടിക്കാൻ ഞാൻ ശ്രമിച്ചു. ഡിസൈനിൽ കോഡ് പ്രവർത്തിക്കുന്നത് ചിന്ത.
ഈ പാക്കേജിൽ ആവശ്യമായ എല്ലാ ഫയലുകളും അടങ്ങിയിരിക്കുന്നു:
– HTML – CSS – JS – Images – Cufon fonts with use allow – Commented and documented code – അധിക ഡോക്യുമെന്റേഷൻ
എല്ലാ മെനുകളും CSS-ൽ നിന്ന് ഇഷ്ടാനുസൃതമാക്കാൻ എളുപ്പമാണ് . ഓരോ ഫയലിലും വിശദമായ കോമെന് റകൾ കാണാം.
അത് ആസ്വദിക്കുമെന്ന് പ്രതീക്ഷിക്കുന്നു!
CSS3 ഡ്രോപ്പ് ഡൗൺ മെനു
കൂടുതൽ വിവര ഡെമോConstellation name (optional)
CSS3 ട്രാൻസിഷനുകളുള്ള മങ്ങിയ മെനു
CSS3 കൊണ്ടുവരുന്ന അധിക ഗുണഗണങ്ങളും സാധ്യതകളും കൊണ്ട് നമുക്ക് ചെയ്യാൻ കഴിയുന്ന നിരവധി വലിയ കാര്യങ്ങൾ ഉണ്ട്. ഇന്ന് ഞാൻ നിങ്ങൾക്ക് ടെക്സ്റ്റ് നിഴലുകളും പരിവർത്തനങ്ങളും ഉപയോഗിച്ച് എങ്ങനെ പരീക്ഷിക്കാം എന്ന് കാണിക്കാൻ ആഗ്രഹിക്കുന്നു, ഒരു മങ്ങിയ പ്രഭാവം കൈവരിക്കാൻ, ഞങ്ങൾ ഒരു മെനുവിലേക്ക് പ്രയോഗിക്കും. പ്രധാന ആശയം ഞങ്ങൾ നിലവിൽ ഹോവർ ചെയ്യുന്ന വസ്തു മെച്ചപ്പെടുത്തുമ്പോൾ മറ്റ് ഇനങ്ങൾ മങ്ങിയ ആണ്.
കൂടുതൽ വിവര ഡെമോConstellation name (optional)
റെസ്പോൺസീവ് മെഗാ മെനു പൂർണ്ണ സെറ്റ്
ഈ മെഗാ ഡ്രോപ്പ് ഡൗൺ മെനു കംപ്ലീറ്റ് സെറ്റ് 9 jQuery ഇഫക്റ്റുകളിൽ ഒന്ന്, കളർ സ്കീമുകളിൽ ഒന്ന് ഉപയോഗിച്ച് അതുല്യമായ മെനുകൾ സൃഷ്ടിക്കാൻ അനുയോജ്യമാണ്.
ഒരു ഇഷ്ടാനുസൃത ഗ്രിഡിനെ അടിസ്ഥാനമാക്കി, തലക്കെട്ടുകൾ, ലിസ്റ്റുകൾ, ചിത്രങ്ങളുടെ സ്റ്റൈലിംഗ്, ടേബിളുകൾ, ഫോം എലമെന്റുകൾ തുടങ്ങി നിരവധി ടൈപ്പോഗ്രാഫി ഉദാഹരണങ്ങൾ ഉള്ള കോളങ്ങളിൽ (1 മുതൽ 12 വരെ) നിങ്ങളുടെ ഉള്ളടക്കം ക്രമീകരിക്കാൻ ഈ മെനു നിങ്ങളെ അനുവദിക്കുന്നു.
CSS3 മെഗാ ഡ്രോപ്പ് ഡൗൺ മെനു
നിങ്ങളുടെ ഇഷ്ടാനുസൃത മെനുകൾ നിർമ്മിക്കുന്നതിന് ഈ മെഗാ ഡ്രോപ്പ് ഡൗൺ മെനു ഒരു വഴക്കമുള്ളതും സംയോജിപ്പിക്കാൻ എളുപ്പമുള്ളതുമായ ഒരു പരിഹാരമാണ്. ഡ്രോപ്പ് ഡൗൺ CSS/XHTML-നെ മാത്രം ആശ്രയിക്കുന്നു, പൂർണ്ണമായും പ്രവർത്തിക്കുന്ന സമ്പർക്ക ഫോമുമായാണ് ഇത് വരുന്നത്.
3 പ്രധാന വകഭേദങ്ങൾ ഉൾപ്പെടുത്തിയിരിക്കുന്നു : തിരശ്ചീനവും ലംബവുമായ അലൈൻഡ് ഇടത് വശത്ത് ലംബവും വലത് വശത്ത് ലംബവുമായ അലൈൻ.
960 ഗ്രിഡ് സിസ്റ്റത്തെ അടിസ്ഥാനമാക്കി 6 കോളങ്ങളായി ഉള്ളടക്കം ക്രമീകരിക്കാവുന്നതാണ്. ഈ ഇനം 9 കളർ വേരിയന്റുകളും (ഡ്രോപ്പ് ഡൗൺസിനായുള്ള 2 കളർ സ്കീമുകളും – ഇരുണ്ടതും വെളിച്ചവും) ഒപ്പം ഇഷ്ടാനുസൃതമാക്കാൻ നിങ്ങളെ സഹായിക്കുന്ന വിശദമായ ഡോക്യുമെന്റേഷൻ എന്നിവയുണ്ട്.
