ഇത് ഒരു ഇനത്തിനോ പലതിനും വേണ്ടി ചെയ്യാം. താഴേക്ക് ചൂണ്ടുന്ന ഒരു അമ്പടയാളം ഡ്രോപ്പ്-ഡൗൺ ഉപ-ഇനങ്ങളോടൊപ്പം സ്ഥാനത്തിന് സമീപം ദൃശ്യമാകും. ക്ലിക്ക് ചെയ്യുമ്പോൾ, സൃഷ്ടിച്ച ലിസ്റ്റ് ദൃശ്യമാകും. നാവിഗേഷൻ ഒരു ചെറിയ സ്‌ക്രീനിൽ പ്രദർശിപ്പിച്ചാൽ, ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റിലുള്ള ഇനവും ഒരു അമ്പടയാളത്താൽ സൂചിപ്പിക്കും, പക്ഷേ വലത്തോട്ട് ഒരു ദിശയിൽ. ക്ലിക്ക് ചെയ്യുമ്പോൾ, ഉപ-ഇനങ്ങളുടെ മറ്റൊരു ലംബ ലിസ്റ്റ് ദൃശ്യമാകും.

എന്നിരുന്നാലും, നിങ്ങൾക്ക് ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിച്ച് മാത്രമല്ല സൃഷ്ടിക്കാൻ കഴിയും. ഈ ലൈബ്രറി കണക്റ്റുചെയ്‌തിട്ടില്ലെങ്കിൽ, നിങ്ങൾക്ക് HTML, CSS എന്നിവ ഉപയോഗിച്ച് ഒരു റെസ്‌പോൺസീവ് മൾട്ടി-ലെവൽ മെനു സൃഷ്‌ടിക്കാനും തുടർന്ന് PHP ഫംഗ്‌ഷൻ കണക്‌റ്റുചെയ്യാനും കഴിയും.

ആദ്യം, നിങ്ങൾ മറ്റ് ലിസ്റ്റുകൾ ഉൾപ്പെടുന്ന ഒരു HTML ഫയലിൽ ഓർഡർ ചെയ്യാത്ത ഒരു ലിസ്റ്റ് സൃഷ്ടിക്കേണ്ടതുണ്ട്. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ സാധാരണ ടാഗുകൾ ഉപയോഗിക്കണം

ഒപ്പം
• . CSS കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റ് പിന്നീട് പ്രോസസ്സ് ചെയ്യുന്ന ക്ലാസുകളുടെ രൂപീകരണത്തെക്കുറിച്ചും നമ്മൾ മറക്കരുത്. ഇത് കൂടുതൽ വ്യക്തമാക്കുന്നതിന്, ലിസ്റ്റുകൾ എഴുതുന്നതിനും ക്ലാസുകൾ സൃഷ്ടിക്കുന്നതിനും ഒരു ചെറിയ ഉദാഹരണം നൽകുന്നത് മൂല്യവത്താണ്.

  ഒരു കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റ് ഉപയോഗിച്ചാണ് പ്രതികരിക്കുന്ന ഡ്രോപ്പ്ഡൗൺ മെനുവിൻ്റെ ആനിമേഷൻ സജ്ജമാക്കിയിരിക്കുന്നത്. സ്‌ക്രീൻ 50, 75, 25% കുറയുമ്പോൾ മെനുവിനുള്ള പാരാമീറ്ററുകൾ ഇവിടെ വ്യക്തമാക്കേണ്ടതുണ്ട്. അഡാപ്റ്റീവ് പ്രവർത്തനം സൃഷ്ടിക്കുന്നതിനുള്ള ഈ സമീപനം യോഗ്യതയുള്ള ലേഔട്ട് ഉറപ്പാക്കുന്നു, അതിൽ മെനു "പുറത്തേക്ക് നീങ്ങുന്നില്ല".

  അവസാനമായി, ഡോക്യുമെൻ്റിൽ ചുവടെ സൂചിപ്പിച്ചിരിക്കുന്ന ഫംഗ്ഷൻ നിങ്ങൾ നൽകേണ്ടതുണ്ട്.

  ഇതല്ലാതെ മറ്റെന്തെങ്കിലും ഫംഗ്‌ഷനുകൾ ഉപയോഗിക്കുന്നതിനെക്കുറിച്ച് സൈറ്റ് ചിന്തിച്ചിട്ടില്ലെങ്കിൽ, നിങ്ങൾ അതിനായി ഒരു പ്രത്യേക സ്‌ക്രിപ്റ്റ് ഡോക്യുമെൻ്റ് സൃഷ്‌ടിക്കേണ്ടതുണ്ട്. നിങ്ങൾ ഇത് പ്ലെയിൻ HTML-ൽ ഇടുകയാണെങ്കിൽ, അത് ടെക്സ്റ്റിൻ്റെ ഭാഗമായി ബ്രൗസർ വിൻഡോയിൽ ദൃശ്യമാകും, അത് പ്രവർത്തിക്കില്ല.

  

  JQuery

  ഒരു JQuery പ്ലഗിൻ ഉപയോഗിച്ച് ഒരു നാവിഗേഷൻ ബാർ സൃഷ്ടിക്കുക എന്നതാണ് മറ്റൊരു മികച്ച പരിഹാരം. അത്തരമൊരു സേവനത്തിലെ ഒരു അഡാപ്റ്റീവ് മെനുവിന് കുറച്ച് മിനിറ്റുകൾ മാത്രമേ എടുക്കൂ. പ്ലഗിൻ തന്നെ ഇൻ്റർനെറ്റിൽ ഡൗൺലോഡ് ചെയ്യാൻ കഴിയും, ഇതിന് ലളിതവും വ്യക്തവുമായ ഒരു ഇൻ്റർഫേസ് ഉണ്ട്, അത് ഉപയോഗിക്കാൻ എളുപ്പവും ലളിതവുമാണ്. അതിനാൽ ശൈലികൾ ഫയൽ ബന്ധിപ്പിക്കുന്നതിൽ പ്രശ്നങ്ങളൊന്നും ഉണ്ടാകരുത്.

  സ്റ്റൈൽ ഫയൽ കണക്റ്റുചെയ്തതിനുശേഷം, അഡാപ്റ്റീവ് നാവിഗേഷൻ സൃഷ്ടിക്കാൻ നിങ്ങൾ ഒരു സ്ക്രിപ്റ്റ് എഴുതേണ്ടതുണ്ട്.

  

  ഇതിനുശേഷം, നാവിഗേഷൻ നിലവിലില്ലെങ്കിൽ നിങ്ങൾ അത് സൃഷ്ടിക്കേണ്ടതുണ്ട്. ഇവിടെ എല്ലാം തത്ത്വമനുസരിച്ചാണ് പ്രവർത്തിക്കുന്നത്: "ബുദ്ധിയുള്ള എല്ലാം ലളിതമാണ്." ഒരു HTML പ്രമാണത്തിൽ നിങ്ങൾ ഒരു ടാഗിൽ ഒരു ബുള്ളറ്റ് ലിസ്റ്റ് സൃഷ്ടിക്കേണ്ടതുണ്ട് നവ്. നിങ്ങൾക്ക് നേരത്തെ നൽകിയ ഉദാഹരണമോ അതിൻ്റെ ലളിതമായ പതിപ്പോ ഉപയോഗിക്കാം, അത് ചുവടെ കാണിച്ചിരിക്കുന്നതുപോലെ തോന്നുന്നു.

  ജോലിയുടെ ഈ ഘട്ടത്തിൽ, ബ്രൗസറിൽ ലോഗോ മാത്രം പ്രദർശിപ്പിക്കും, കൂടാതെ മെനു തന്നെ മറയ്ക്കുകയും ചെയ്യും. ഇത് ദൃശ്യമാകുന്നതിന്, പ്ലഗിനിലേക്ക് മാറ്റങ്ങൾ വരുത്തുന്ന ഒരു ഫംഗ്ഷൻ നിങ്ങൾ ചേർക്കേണ്ടതുണ്ട് - okayNav.

  var നാവിഗേഷൻ = $("#nav-main").okayNav();

  ഇപ്പോൾ നിങ്ങൾക്ക് ജോലിയുടെ ഫലങ്ങൾ നോക്കാം. ബ്രൗസർ വിൻഡോയുടെ സാധാരണ വീതിയിൽ, ഈ മെനു പൂർണ്ണമായും സാധാരണമായി കാണപ്പെടുന്നു, എന്നാൽ നിങ്ങൾ സ്ക്രീൻ കുറയ്ക്കുകയാണെങ്കിൽ, അവസാന ഇനങ്ങൾ അപ്രത്യക്ഷമാകും. പകരം, ലംബമായി സ്ഥിതി ചെയ്യുന്ന മൂന്ന് വലിയ ഡോട്ടുകൾ പ്രത്യക്ഷപ്പെടുന്നു. അമർത്തുമ്പോൾ, അവ തിരശ്ചീന സ്ഥാനം സ്വീകരിക്കുന്നതായി തോന്നുന്നു, മറഞ്ഞിരിക്കുന്ന മെനു ഇനങ്ങൾ സ്ക്രീനിൻ്റെ മുകളിൽ വലത് കോണിലുള്ള ഒരു ലംബ പട്ടികയിൽ വെളിപ്പെടും.

  

  ഈ പരിഹാരം വളരെ ആധുനികമായി കാണപ്പെടുന്നു, കൂടാതെ ഉപയോഗിച്ച ആനിമേഷൻ പ്രഭാവം സന്ദർശകർക്ക് അനുകൂലമായ വെളിച്ചത്തിൽ ഉറവിടം നൽകുന്നു.

  ജൂംല

  ജൂംല സിസ്റ്റം ഉപയോഗിച്ച് ഒരു അഡാപ്റ്റീവ് മെനു സൃഷ്ടിക്കുന്നതിനുള്ള അവസാന ഓപ്ഷൻ. ഇത് ഒരു CMS ഉള്ളടക്ക മാനേജുമെൻ്റ് സിസ്റ്റമായ ഒരു സൗജന്യ വെബ്സൈറ്റ് സൃഷ്ടിക്കൽ സേവനമാണ്. തുടക്കത്തിൽ തന്നെ സൂചിപ്പിച്ചതുപോലെ, സൈറ്റ് ഒരു CMS ഉപയോഗിച്ചാണ് സൃഷ്ടിച്ചതെങ്കിൽ, നിലവിലുള്ള മെനു അഡാപ്റ്റീവ് ആയി മാറ്റേണ്ടതുണ്ടെങ്കിൽ, ആദ്യ ടാഗിൽ നിന്ന് സൈറ്റിൻ്റെ പ്രവർത്തനം സൃഷ്ടിക്കുന്നത് ആരംഭിക്കുന്നതാണ് നല്ലത്. മുമ്പത്തെ ഉദാഹരണങ്ങളിൽ പോലെ, നിങ്ങൾ HTML-ൽ ഒരു ബുള്ളറ്റ് മെനു ലിസ്റ്റ് സൃഷ്ടിക്കേണ്ടതുണ്ട്. ഓരോ ഇനത്തിനും മാത്രം നിങ്ങൾ സ്വന്തം ക്ലാസ് എഴുതേണ്ടതുണ്ട്. മൊത്തത്തിൽ, എല്ലാം ചുവടെയുള്ളതുപോലെ കാണപ്പെടുന്നു.

  അടുത്തതായി നിങ്ങൾ ശൈലികൾ ചേർക്കേണ്ടതുണ്ട്. എല്ലാ പാഡിംഗും 0 px ആയി സജ്ജീകരിച്ച് ബോക്‌സ്-സൈസിംഗ്: ബോർഡർ-ബോക്‌സ് പ്രയോഗിക്കുന്നതാണ് നല്ലത്. എത്ര ഇൻഡൻ്റുകളുണ്ടെങ്കിലും മൂലകങ്ങളുടെ നിർദ്ദിഷ്ട വീതി നിലനിർത്തുന്നത് ഇത് സാധ്യമാക്കും. അടുത്തതായി, നിങ്ങൾ പാരൻ്റ് മെനു എലമെൻ്റിൻ്റെ (div) വീതി 90% ആയി സജ്ജീകരിക്കുകയും തുടർന്ന് ഓരോ ഇനവും വ്യക്തിഗതമായി സ്‌റ്റൈൽ ചെയ്യാൻ ആരംഭിക്കുകയും വേണം.

  

  നിങ്ങൾക്ക് ബോർഡറുകൾ നീക്കം ചെയ്യാനും നിറം മാറ്റാനും പൂരിപ്പിക്കാനും കഴിയും, കഴ്‌സർ ഹോവർ ചെയ്യുമ്പോൾ ദൃശ്യമാകുന്ന ഒരു ഡിസൈൻ ഉണ്ടാക്കുക. ഒരു വാക്കിൽ, റിസോഴ്സിൻ്റെ രൂപകൽപ്പനയുമായി പൊരുത്തപ്പെടുന്ന എല്ലാം ചെയ്യുക. ഒരു റെസ്‌പോൺസീവ് ജൂംല മെനു സൃഷ്ടിക്കുന്നതിനുള്ള അവസാന ഘട്ടം അത് പരിവർത്തനം ചെയ്യുക എന്നതാണ്. മിക്കപ്പോഴും, സ്‌ക്രീൻ വലുപ്പം മാറുമ്പോൾ, സ്വയമേവ പുനർനിർമ്മിക്കുകയും നിരവധി വരികളായി വിഭജിക്കുകയും ചെയ്യുന്ന ഒരു മെനു ജൂംല സൃഷ്ടിക്കുന്നു. ഇതെല്ലാം CSS-ലാണ് ചെയ്യുന്നത്, ക്രോസ് ബ്രൗസർ അവസ്ഥയാണ് ഉൾപ്പെടുത്തേണ്ട ഒരേയൊരു പ്രവർത്തനം. വ്യത്യസ്ത ബ്രൗസറുകളിൽ മെനു ഒരുപോലെ കാണാൻ ഇത് അനുവദിക്കുന്നു.

  ക്രോസ് ബ്രൗസർ പ്രവർത്തനം

  ഒരു പ്രതികരിക്കുന്ന മെനു സൃഷ്ടിക്കുന്നത് ശരിക്കും എളുപ്പമല്ല; അതിന് അറിവും അനുഭവവും ആവശ്യമാണ്. വിവരിച്ചിരിക്കുന്ന എല്ലാ ഉദാഹരണങ്ങളും സാധ്യമായ വ്യതിയാനങ്ങളുടെ ഒരു ചെറിയ ഭാഗം മാത്രമാണ്, എന്നാൽ ഒരു വ്യക്തിക്ക് HTML, CSS എന്നിവയെ കുറിച്ചുള്ള അടിസ്ഥാന അറിവുണ്ടെങ്കിൽ പോലും അവ ഉപയോഗപ്രദമാകും.

  സങ്കീർണ്ണമായ മെനുകളുള്ള പോർട്ടൽ. ഞങ്ങൾക്ക് ആവശ്യമുള്ളത് ഓൺലൈനിൽ കണ്ടെത്തിയില്ലെങ്കിൽ മാത്രം സ്ക്രിപ്റ്റുകൾ എഴുതാൻ ഞങ്ങൾ തീരുമാനിച്ചു. വ്യത്യസ്ത സവിശേഷതകളുള്ള നിരവധി നാവിഗേഷനുകൾ വിഭാവനം ചെയ്യപ്പെട്ടു. ഞങ്ങളുടെ ഭാഗ്യത്തിന്, ഒന്നൊഴികെ മിക്കവാറും എല്ലാം കണ്ടെത്തി. എന്നിരുന്നാലും, ഈ മെനു എഴുതുന്നതിനുള്ള ജോലി ആരംഭിക്കുന്നതിന് തൊട്ടുമുമ്പ്, ഞങ്ങൾക്ക് ആവശ്യമുള്ളത് കണ്ടെത്താൻ ഞങ്ങൾക്ക് ഇപ്പോഴും കഴിഞ്ഞു.
  ഞങ്ങൾ കുറച്ച് അഡാപ്റ്റീവ് മെനുകൾ പരീക്ഷിച്ചു. ഈ വിഷയത്തിൽ, ഞങ്ങൾ ശ്രമിക്കേണ്ട ഏറ്റവും മൂല്യവത്തായതും രസകരവുമായവ തിരഞ്ഞെടുക്കാൻ ഞാൻ തീരുമാനിച്ചു. എല്ലാ അഡാപ്റ്റീവ് മെനുകളും ഒരുപോലെയല്ല, അവ പ്രത്യേക ജോലികൾക്കായി മാത്രം രൂപകൽപ്പന ചെയ്തവയാണ്.
  അങ്ങനെ. എല്ലാ അവസരങ്ങൾക്കും അനുയോജ്യമായ 5 മെനുകൾ ഇതാ.

  flexMenu ഇത് കൃത്യമായി കണ്ടെത്താൻ വളരെ ബുദ്ധിമുട്ടുള്ള മെനുവും ഞങ്ങൾ എഴുതാൻ തുടങ്ങാൻ പോകുന്ന പ്രവർത്തനവുമാണ്.
  flexMenu - ചലനാത്മകമായി മാറുന്ന വീതിയുള്ള സൈറ്റുകൾക്ക് അനുയോജ്യമായ ഒരു മെനു. "കൂടുതൽ" ഇനത്തിൻ്റെ കൂട്ടിച്ചേർക്കലും മുഴുവൻ നാവിഗേഷൻ്റെ വീതിയിലും അനുയോജ്യമല്ലാത്ത ഇനങ്ങളുടെ ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റിലേക്ക് കൈമാറ്റം ചെയ്യുന്നതാണ് ഇതിൻ്റെ പ്രധാനവും അതുല്യവുമായ സവിശേഷത. അതായത്, നമ്മൾ വലിയ മോണിറ്ററുകൾ നോക്കിയാൽ, എല്ലാ പോയിൻ്റുകളും കാണാം. ഞങ്ങൾ ബ്രൗസർ വിൻഡോ ചുരുക്കാൻ തുടങ്ങുമ്പോൾ തന്നെ, മെനുവിൻ്റെ അവസാനം "കൂടുതൽ" ഇനം ദൃശ്യമാകും, വിൻഡോ ചുരുങ്ങുമ്പോൾ അനുയോജ്യമല്ലാത്ത ഇനങ്ങൾ അതിൻ്റെ ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റിലേക്ക് ചലനാത്മകമായി നീക്കും. അങ്ങനെ, ഞങ്ങൾക്ക് ഒരു നിശ്ചിത ഉയരവും "പ്ലേയിംഗ്" വീതിയുമുള്ള ഒരു മെനു ഉണ്ടാകും.
  ഫ്ലെക്സ്മെനുവിൽ പ്രവർത്തിക്കുമ്പോൾ ഞങ്ങൾ ഒരു പ്രശ്നം നേരിട്ടു. ഞങ്ങളുടെ കാര്യത്തിൽ, വലതുവശത്ത് ഫ്ലോട്ട് ഉള്ള ഒരു ലോഗോ ഉണ്ടായിരുന്നു: ഇടത്;, വലതുവശത്ത് ഈ മെനുവും ഫ്ലോട്ട്: ഇടത്; ഫ്ലോട്ടിനൊപ്പം വലതുവശത്തും: വലത്; മറ്റൊരു ബ്ലോക്ക് ഉണ്ടായിരുന്നു. ബ്രൗസർ വിൻഡോയുടെ വലുപ്പം മാറ്റുമ്പോൾ, വലതുവശത്തുള്ള ബ്ലോക്ക് മെനുവിന് താഴെയായി ചാടി, തുടർന്ന് ഇതെല്ലാം ലോഗോയ്ക്ക് കീഴിൽ ചാടി, തുടർന്ന് മെനു കംപ്രഷൻ പ്രവർത്തനം സജീവമാക്കി. ഈ ലേഔട്ട് ഫീച്ചർ എങ്ങനെ കൈകാര്യം ചെയ്യാം എന്നത് തുടർന്നുള്ള വിഷയങ്ങളിൽ ചർച്ച ചെയ്യും. ഒരു റെസ്‌പോൺസീവ് നാവിഗേഷൻ മെനു കോഡ് ഒരു നാവിഗേഷൻ മെനുവിൻ്റെ മികച്ച ഉദാഹരണം. ബ്രൗസർ വിൻഡോയുടെ വലുപ്പം മാറ്റുമ്പോൾ, ഇനങ്ങൾ പരസ്പരം ഓവർലാപ്പ് ചെയ്യുന്നതും വീതിയിൽ വിന്യസിച്ചിരിക്കുന്നതും ഞങ്ങൾ കാണും. വളരെ വൃത്തിയായി തോന്നുന്നു. ഏറ്റവും പ്രധാനമായി, ഈ അഡാപ്റ്റീവ് മെനു മൊബൈൽ ഉപകരണങ്ങളിൽ മികച്ചതായി കാണപ്പെടും, അതിലും പ്രധാനമായി, ടച്ച് ഡിസ്പ്ലേ ഉള്ള ഉപകരണങ്ങളിൽ ഇത് ഉപയോഗിക്കാൻ സൗകര്യപ്രദമാണ്.

  

  മൾട്ടി-ലെവൽ ഫ്ലാറ്റ് മെനു - അഡാപ്റ്റീവ് നാവിഗേഷൻ മൾട്ടി ലെവൽ ഫ്ലാറ്റ് മെനു, Jquery ലൈബ്രറികൾ ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്ന ഒരു അഡാപ്റ്റീവ്, മൾട്ടി ലെവൽ മെനു ആണ്. ഡെസ്ക്ടോപ്പ് മോണിറ്ററുകളിൽ ഞങ്ങൾ സാധാരണ, പരിചിതമായ തിരശ്ചീന മെനു കാണുന്നു. മൊബൈൽ ഉപകരണങ്ങളിൽ, തിരശ്ചീന നാവിഗേഷൻ ഒരു ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റായി മാറുന്നു.
  നിങ്ങൾക്ക് പേജിൽ ഇടം ലാഭിക്കണമെങ്കിൽ മൾട്ടി ലെവൽ ഫ്ലാറ്റ് മെനു ഒരു മികച്ച ചോയ്സ് ആണ്.

  

  ഹബ്ർ, ഹലോ!

  വ്യത്യസ്ത സ്പെഷ്യലിസ്റ്റുകളിൽ നിന്നുള്ള ധാരാളം നല്ല പരിഹാരങ്ങൾ കോഡ്‌പെനിൽ പ്രത്യക്ഷപ്പെടുന്നു, അവയിൽ ഏറ്റവും മികച്ചത് ഒരിടത്ത് ശേഖരിക്കണമെന്ന് ഞാൻ വിശ്വസിക്കുന്നു. അതിനാൽ, 2 വർഷം മുമ്പ് ഞാൻ എൻ്റെ കമ്പ്യൂട്ടറിൽ വിവിധ വിഷയങ്ങളിൽ രസകരമായ സ്ക്രിപ്റ്റുകൾ സംരക്ഷിക്കാൻ തുടങ്ങി.

  ഞാൻ അവ മിസ്റ്റർ ക്ലൗഡ് ഐഡിഇ ഉൽപ്പന്ന ഗ്രൂപ്പിൽ പോസ്റ്റ് ചെയ്യാറുണ്ടായിരുന്നു. Gefest, ഇവ 5-8 പരിഹാരങ്ങളുടെ അസംബ്ലികളായിരുന്നു. എന്നാൽ ഇപ്പോൾ ഞാൻ വിവിധ വിഷയങ്ങളിൽ (ബട്ടണുകൾ, മെനുകൾ, ടൂൾടിപ്പുകൾ മുതലായവ) 15-30 സ്ക്രിപ്റ്റുകൾ ശേഖരിക്കാൻ തുടങ്ങി.

  അത്തരം വലിയ സെറ്റുകൾ കൂടുതൽ സ്പെഷ്യലിസ്റ്റുകളെ കാണിക്കണം. അതുകൊണ്ടാണ് ഞാൻ അവ ഹബറിൽ പോസ്റ്റ് ചെയ്യുന്നത്. അവ നിങ്ങൾക്ക് ഉപയോഗപ്രദമാകുമെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു.
  
  ഈ അവലോകനത്തിൽ നമ്മൾ മൾട്ടി ലെവൽ മെനുകൾ നോക്കും.

  ഫ്ലാറ്റ് തിരശ്ചീന നാവിഗേഷൻ

  

  സുഗമമായി ദൃശ്യമാകുന്ന ഉപമെനുകളുള്ള മനോഹരമായ നാവിഗേഷൻ ബാർ. കോഡ് നന്നായി ഘടനാപരമാണ് കൂടാതെ js ഉപയോഗിക്കുന്നു. ഉപയോഗിച്ച സവിശേഷതകൾ വിലയിരുത്തിയാൽ, ഇത് ie8+ ൽ പ്രവർത്തിക്കുന്നു.
  http://codepen.io/andytran/pen/kmAEy

  മെറ്റീരിയൽ നവ് ഹെഡർ w/ അലൈൻ ചെയ്‌ത ഡ്രോപ്പ്‌ഡൗണുകൾ

  

  രണ്ട് നിര ഉപമെനുവുള്ള അഡാപ്റ്റീവ് ലിങ്ക് ബാർ. എല്ലാം css-ലും html-ലുമാണ് ചെയ്യുന്നത്. ie8-ൽ പിന്തുണയ്ക്കാത്ത css3 സെലക്ടറുകൾ ഉപയോഗിച്ചു.
  http://codepen.io/colewaldrip/pen/KpRwgQ

  സുഗമമായ അക്രോഡിയൻ ഡ്രോപ്പ്ഡൗൺ മെനു

  

  സുഗമമായി തുറക്കുന്ന ഘടകങ്ങളുള്ള സ്റ്റൈലിഷ് ലംബ മെനു. സംക്രമണം, പരിവർത്തനം js കോഡ് ഉപയോഗിക്കുന്നു.
  http://codepen.io/fainder/pen/AydHJ

  ശുദ്ധമായ CSS ഡാർക്ക് ഇൻലൈൻ നാവിഗേഷൻ മെനു

  

  അയോണികണുകളിൽ നിന്നുള്ള ഐക്കണുകളുള്ള ഇരുണ്ട ലംബ നാവിഗേഷൻ ബാർ. ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നു. ie8 ൽ ഇത് മിക്കവാറും ആനിമേഷൻ ഇല്ലാതെ പ്രവർത്തിക്കും.
  http://codepen.io/3lv3n_snip3r/pen/XbddOO

  ആനിമേഷനോടുകൂടിയ ശുദ്ധമായ CSS3 മെഗാ ഡ്രോപ്പ്ഡൗൺ മെനു

  

  

  രണ്ട് ഔട്ട്പുട്ട് ഫോർമാറ്റുകളുള്ള സ്റ്റൈലിഷ് മെനു: തിരശ്ചീനവും ലംബവും. ഐക്കണുകളും CSS3 ആനിമേഷനും ഉപയോഗിക്കുന്നു. ie8 ൽ ഇത് തീർച്ചയായും ഭയങ്കരമായി കാണപ്പെടും, എന്നാൽ മറ്റ് ബ്രൗസറുകളിൽ എല്ലാം രസകരമാണ്.
  ലംബ ലിങ്ക്: http://codepen.io/rizky_k_r/full/sqcAn/
  തിരശ്ചീനത്തിലേക്കുള്ള ലിങ്ക്: http://codepen.io/rizky_k_r/pen/xFjqs

  CSS3 ഡ്രോപ്പ്ഡൗൺ മെനു

  

  വലിയ ഘടകങ്ങളുള്ള തിരശ്ചീന മെനുവും ലിങ്കുകളുടെ ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റും. js ഇല്ലാതെ വൃത്തിയുള്ളതും ചുരുങ്ങിയതുമായ കോഡ്.
  http://codepen.io/ojbravo/pen/tIacg

  ലളിതമായ ശുദ്ധമായ CSS ഡ്രോപ്പ്ഡൗൺ മെനു

  

  ലളിതവും എന്നാൽ സ്റ്റൈലിഷ് തിരശ്ചീനവുമായ മെനു. ഫോണ്ട്-വിസ്മയം ഉപയോഗിക്കുന്നു. എല്ലാം js ഇല്ലാതെ css, html എന്നിവയിൽ പ്രവർത്തിക്കുന്നു. ഇത് ie8 ൽ പ്രവർത്തിക്കും.
  http://codepen.io/Responsive/pen/raNrEW

  ബൂട്ട്സ്ട്രാപ്പ് 3 മെഗാ-ഡ്രോപ്പ്ഡൗൺ മെനു

  

  ഓൺലൈൻ സ്റ്റോറുകൾക്കുള്ള മികച്ച പരിഹാരം. വിഭാഗങ്ങളുടെ നിരവധി തലങ്ങളും വലിയ ചിത്രങ്ങളും പ്രദർശിപ്പിക്കുന്നു (ഉദാഹരണത്തിന്, വിൽപ്പനയിലുള്ള ഒരു ഉൽപ്പന്നം). ഇത് boostrap 3 അടിസ്ഥാനമാക്കിയുള്ളതാണ്.
  http://codepen.io/organizedchaos/full/rwlhd/

  ഫ്ലാറ്റ് നാവിഗേഷൻ

  

  മിനുസമാർന്ന ഉപമെനുവോടുകൂടിയ സ്റ്റൈലിഷ് നാവിഗേഷൻ ബാർ. പഴയ ബ്രൗസറുകളിൽ ഇത് പ്രശ്നങ്ങൾ പ്രദർശിപ്പിക്കും.
  http://codepen.io/andytran/pen/YPvQQN

  3D നെസ്റ്റഡ് നാവിഗേഷൻ

  

  js ഇല്ലാതെ വളരെ രസകരമായ ആനിമേഷൻ ഉള്ള തിരശ്ചീന മെനു!
  http://codepen.io/devilishalchemist/pen/wBGVor

  പ്രതികരിക്കുന്ന മെഗാ മെനു - നാവിഗേഷൻ

  

  തിരശ്ചീനമായി പ്രതികരിക്കുന്ന മെനു. ഇത് നന്നായി കാണപ്പെടുന്നു, പക്ഷേ മൊബൈൽ പതിപ്പ് അൽപ്പം മുടന്തനാണ്. CSS, html, js എന്നിവ ഉപയോഗിക്കുന്നു.
  http://codepen.io/samiralley/pen/xvFdc

  ശുദ്ധമായ Css3 മെനു

  

  യഥാർത്ഥ മെനു. js ഇല്ലാതെ ലളിതവും വൃത്തിയുള്ളതുമായ കോഡ് ഉപയോഗിച്ച്. "വൗ" ഇഫക്റ്റുകൾക്കായി ഉപയോഗിക്കുക.
  http://codepen.io/Sonick/pen/xJagi

  മുഴുവൻ CSS3 ഡ്രോപ്പ്ഡൗൺ മെനു

  

  ഒരു നെസ്റ്റിംഗ് ലെവലുള്ള വർണ്ണാഭമായ ഡ്രോപ്പ്-ഡൗൺ മെനു. font-wesome, html, css എന്നിവയിൽ നിന്നുള്ള ഐക്കണുകൾ ഉപയോഗിക്കുന്നു.
  http://codepen.io/daniesy/pen/pfxFi

  Css3 മാത്രം ഡ്രോപ്പ്ഡൗൺ മെനു

  

  മൂന്ന് തലത്തിലുള്ള കൂടുകളുള്ള സാമാന്യം നല്ല തിരശ്ചീന മെനു. js ഇല്ലാതെ പ്രവർത്തിക്കുന്നു.
  http://codepen.io/riogrande/pen/ahBrb

  ഡ്രോപ്പ്ഡൗൺ മെനുകൾ

  

  ദൃശ്യമാകുന്ന ഘടകങ്ങളുടെ നെസ്റ്റഡ് ലിസ്റ്റിൻ്റെ ഒറിജിനൽ ഇഫക്റ്റുള്ള ഒരു മിനിമലിസ്റ്റിക് മെനു. ഈ പരിഹാരവും ജാവാസ്ക്രിപ്റ്റ് ഇല്ലാത്തതിൽ എനിക്ക് സന്തോഷമുണ്ട്.
  http://codepen.io/kkrueger/pen/qfoLa

  ശുദ്ധമായ CSS ഡ്രോപ്പ്ഡൗൺ മെനു

  

  പ്രാകൃതവും എന്നാൽ ഫലപ്രദവുമായ പരിഹാരം. css ഉം html ഉം മാത്രം.
  http://codepen.io/andornagy/pen/xhiJH

  പുൾ മെനു - മെനു ഇൻ്ററാക്ഷൻ കൺസെപ്റ്റ്

  

  ഒരു മൊബൈൽ ഫോണിനുള്ള രസകരമായ മെനു ആശയം. ഇതുപോലൊന്ന് ഞാൻ മുമ്പ് കണ്ടിട്ടില്ല. html, css, javascript എന്നിവ ഉപയോഗിക്കുന്നു.
  http://codepen.io/fbrz/pen/bNdMwZ

  ലളിതമായ ഡ്രോപ്പ്ഡൗൺ മെനു ഉണ്ടാക്കുക

  

  ശുദ്ധവും ലളിതവുമായ കോഡ്, js ഇല്ല. ഇത് തീർച്ചയായും ie8 ൽ പ്രവർത്തിക്കും.
  http://codepen.io/nyekrip/pen/pJoYgb

  ശുദ്ധമായ CSS ഡ്രോപ്പ്ഡൗൺ

  

  പരിഹാരം മോശമല്ല, പക്ഷേ ഇത് വളരെയധികം ക്ലാസുകൾ ഉപയോഗിക്കുന്നു. ജെഎസ് ഇല്ലെന്നതിൽ എനിക്ക് സന്തോഷമുണ്ട്.
  http://codepen.io/jonathlee/pen/mJMzgR

  ഡ്രോപ്പ് ഡൗൺ മെനു

  

  കുറഞ്ഞ ജാവാസ്ക്രിപ്റ്റ് കോഡുള്ള നല്ല ലംബ മെനു. JQuery ഉപയോഗിച്ചിട്ടില്ല!
  http://codepen.io/MeredithU/pen/GAinq

  CSS 3 ഡ്രോപ്പ്ഡൗൺ മെനു

  

  അധിക അടിക്കുറിപ്പുകളുള്ള ഒരു തിരശ്ചീന മെനുവിന് നിങ്ങളുടെ വെബ്‌സൈറ്റ് നന്നായി അലങ്കരിക്കാൻ കഴിയും. കോഡ് ലളിതവും വ്യക്തവുമാണ്. ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നില്ല.
  http://codepen.io/ibeeback/pen/qdEZjR

  

  ധാരാളം കോഡുകളുള്ള മനോഹരമായ പരിഹാരം (html, css, js). 3 ഉപമെനു ഫോർമാറ്റുകൾ സൃഷ്ടിച്ചു. പരിഹാരം ഓൺലൈൻ സ്റ്റോറുകൾക്ക് അനുയോജ്യമാണ്.
  http://codepen.io/martinridgway/pen/KVdKQJ

  CSS3 മെനു ഡ്രോപ്പ്ഡൗണുകൾ (പ്രത്യേക പരിഹാരം)!

  

  പതിമൂന്ന് (13) ആനിമേഷൻ ഓപ്ഷനുകളുള്ള ഇരുണ്ട തിരശ്ചീന മെനു! ഇത് വായിക്കാൻ ഞാൻ തീർച്ചയായും നിങ്ങളെ ഉപദേശിക്കുന്നു, ഇത് ദൈനംദിന ജീവിതത്തിൽ ഉപയോഗപ്രദമാകും.
  http://codepen.io/cmcg/pen/ofFiz

  പി.എസ്.
  23 പരിഹാരങ്ങളുടെ ശേഖരം നിങ്ങൾക്ക് ഇഷ്ടപ്പെട്ടുവെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു. നിങ്ങൾക്ക് അവ വായിക്കുന്നത് തുടരണമെങ്കിൽ, ചുവടെയുള്ള സർവേയിൽ പങ്കെടുക്കുക.
  എല്ലാവരും നിങ്ങളുടെ ജോലി ആസ്വദിക്കൂ.

  ഹലോ സുഹൃത്തുക്കളെ, സഹപ്രവർത്തകരെ! എങ്ങിനെ ഇരിക്കുന്നു? എല്ലാവരും നന്നായി ചെയ്യുന്നുണ്ടെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു :) ഇന്ന് ഞങ്ങളുടെ ലാൻഡിംഗ് പേജിനായി ഞങ്ങൾ ഒരു ലളിതമായ അഡാപ്റ്റീവ് മെനു ഉണ്ടാക്കും. ആളുകൾ ഇതിനെക്കുറിച്ച് കൂടുതൽ കൂടുതൽ ചോദിക്കുന്നു, അത്തരം ചോദ്യങ്ങൾ ഞാൻ എഴുതുകയും എൻ്റെ ഒഴിവുസമയങ്ങളിൽ ഈ വിഷയങ്ങളിൽ ലേഖനങ്ങൾ എഴുതാൻ ശ്രമിക്കുകയും ചെയ്യുന്നു.

  ഈ രീതിയിൽ എനിക്ക് പുതിയ ആശയങ്ങൾ നൽകി ബ്ലോഗ് വികസിപ്പിക്കാൻ സഹായിച്ചതിന് നന്ദി. എന്തായാലും, അടുത്ത ലേഖനം ഏത് വിഷയത്തിലാണ് നിങ്ങൾ വായിക്കാൻ ആഗ്രഹിക്കുന്നത്? അഭിപ്രായങ്ങളിൽ എഴുതുക, ഇത് എനിക്ക് വളരെ പ്രധാനമാണ്. ഇനി നമുക്ക് തുടങ്ങാം...

  ഒരു വെബ്‌സൈറ്റിനായി എങ്ങനെ പ്രതികരിക്കുന്ന മെനു ഉണ്ടാക്കാം

  ഏപ്രിൽ പകുതി മുതൽ, മൊബൈൽ ഉപകരണങ്ങൾക്കുള്ള വെബ്‌സൈറ്റ് പ്രതികരണശേഷി റാങ്കിംഗ് ഘടകങ്ങളിലൊന്നായി മാറുമെന്ന് Google സ്ഥിരീകരിച്ചു. ഇക്കാര്യത്തിൽ, നിങ്ങളുടെ ലാൻഡിംഗ് പേജ് എങ്ങനെ പൊരുത്തപ്പെടുത്താം എന്നതിനെക്കുറിച്ചുള്ള എല്ലാ മെറ്റീരിയലുകളും എന്നത്തേക്കാളും പ്രസക്തമാണ്. ഇന്ന് ഞാൻ സങ്കീർണ്ണമായ ഒന്നും വിശദീകരിക്കില്ല, മറിച്ച്, കുറഞ്ഞ സമയം കൊണ്ട് വളരെ ലളിതമായ ഒരു അഡാപ്റ്റീവ് മെനു എങ്ങനെ നിർമ്മിക്കാമെന്ന് ഞാൻ നിങ്ങളോട് പറയും.

  അടിസ്ഥാനപരമായി ഇത് html + css ആയിരിക്കും, എന്നാൽ ക്ലിക്ക് പ്രോസസ്സ് ചെയ്യുന്നതിന് നിങ്ങൾക്ക് വളരെ ചെറിയ സ്ക്രിപ്റ്റ് ആവശ്യമാണ്. അങ്ങനെ…

  പ്രതികരിക്കുന്ന തിരശ്ചീന മെനു

  നമുക്ക് html-ൽ തുടങ്ങാം. ആദ്യം, നമുക്ക് jquery ലൈബ്രറി ഉൾപ്പെടുത്താം. നിങ്ങൾ ഇത് വളരെക്കാലമായി ഉപയോഗിക്കുന്നുണ്ടാകാം, അതിനാൽ നിങ്ങൾ ഇത് രണ്ടാമതും കണക്റ്റുചെയ്യുന്നില്ലെന്ന് ഉറപ്പാക്കുക:

  ഇപ്പോൾ അടയാളങ്ങൾ. ക്രമരഹിതമായ ഒരു ലിസ്റ്റും മെനു ഐക്കൺ അടങ്ങുന്ന ഒരു ചെറിയ ഡിവിയും. കുറഞ്ഞ റെസല്യൂഷനിൽ മാത്രമേ ഇത് ദൃശ്യമാകൂ.

  

• ഡൗൺലോഡ് വില
• ബന്ധങ്ങൾ
• അവലോകനങ്ങൾ

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഇത് സങ്കീർണ്ണമല്ല, ആവശ്യാനുസരണം നിങ്ങൾക്ക് സ്വയം മെച്ചപ്പെടുത്താൻ കഴിയുമെന്ന് ഞാൻ കരുതുന്നു.
ഇനി നമുക്ക് ശൈലികൾ ചേർക്കാം:

#മെനു (പശ്ചാത്തലം: #2ba9c0; വീതി: 100%; പാഡിംഗ്: 10px 0; ടെക്സ്റ്റ്-അലൈൻ: സെൻ്റർ; ) #മെനു a (നിറം: #fff; ടെക്സ്റ്റ്-ഡെക്കറേഷൻ: ഒന്നുമില്ല; പാഡിംഗ്: 12px 12px; ) #മെനു ഒരു: ഹോവർ (ബോർഡർ-ബോട്ടം: 4px സോളിഡ് #fff; പശ്ചാത്തലം: #078ecb; ) .itemsMenu li (ഡിസ്‌പ്ലേ: ഇൻലൈൻ; പാഡിംഗ്-വലത്: 35px; വീതി: 100%; മാർജിൻ: 0 ഓട്ടോ; ) .itemsMenu li img( ലംബമായി അലൈൻ ചെയ്യുക : മധ്യഭാഗം; മാർജിൻ-വലത്: 10px; ) .iconമെനു (നിറം: #fff; കഴ്‌സർ: പോയിൻ്റർ; ഡിസ്പ്ലേ: ഒന്നുമില്ല; ) .showitems ( ഡിസ്പ്ലേ:ബ്ലോക്ക് !പ്രധാനം; ) @ മീഡിയ സ്ക്രീനും (പരമാവധി വീതി: 600px) ( # മെനു a (padding-bottom: 13px; ) #menu a:hover ( border-bottom: none; ) .iconMenu ( display:block; ) .itemsMenu ( display:none; ) .itemsMenu li ( display:block; padding:10px 0;))

ഇപ്പോൾ, നിങ്ങൾ ബ്രൗസർ വിൻഡോ കുറയ്ക്കുമ്പോൾ, നിങ്ങൾ ഇനിപ്പറയുന്ന ചിത്രം കാണും:

ഓരോ വരിയും വിവരിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നില്ല, കാരണം ബ്ലോഗ് ലേഔട്ടിനെക്കുറിച്ചല്ല. ഞാൻ വിശദീകരിക്കാൻ ശ്രമിക്കാം.

ആദ്യം, ലി എലമെൻ്റുകൾ പരസ്പരം തിരശ്ചീനമായി ദൃശ്യമാക്കുന്നതിന് ഞങ്ങൾ ഡിസ്പ്ലേ:ഇൻലൈൻ പ്രോപ്പർട്ടി സജ്ജീകരിക്കുന്നു. എനിക്ക് ഫ്ലോട്ട്:ലെഫ്റ്റ് ഉപയോഗിക്കാമായിരുന്നു, പക്ഷേ ഇത് ഈ രീതിയിൽ ചെയ്യാൻ ഞാൻ തീരുമാനിച്ചു. കൂടാതെ ഡിസ്പ്ലേ: ഒന്നുമില്ല പ്രോപ്പർട്ടി ഉപയോഗിച്ച് മെനു ഐക്കൺ മറയ്ക്കുക. സ്‌ക്രീൻ റെസല്യൂഷൻ 600 പിക്‌സലിൽ കുറവാണെങ്കിൽ, ലി എലമെൻ്റുകളിൽ നിന്ന് ഇൻലൈൻ നീക്കം ചെയ്യുക, അവ മറയ്‌ക്കുക, ഐക്കൺ കാണിക്കുക. ചുരുക്കത്തിൽ - അതെ.

ഇപ്പോൾ നമുക്ക് ഒരു ലളിതമായ സ്ക്രിപ്റ്റ് ആവശ്യമാണ്, അത് മെനു ഐക്കണിൽ ഒരു ക്ലിക്ക് പ്രോസസ്സ് ചെയ്യുകയും അതിൻ്റെ ഘടകങ്ങൾ കാണിക്കുകയും ചെയ്യും:

$(function() ( $(".iconMenu").click(function() ( if($(".itemsMenu").is(":visible")) ( $(".itemsMenu").removeClass(" പ്രദർശന ഇനങ്ങൾ"); ) വേറെ ( $(".itemsMenu").addClass("showitems"); ) );));

ഇതുപോലെ. ഞാൻ അത് ഒരു പ്രത്യേക ഫയലിൽ ഇടുകയും ക്ലോസിംഗ് ബോഡി ടാഗിന് മുമ്പ് ഉൾപ്പെടുത്തുകയും ചെയ്തു.



അത്രയേയുള്ളൂ. ഇതുവഴി നിങ്ങളുടെ ലാൻഡിംഗ് പേജിനായി നിങ്ങൾക്ക് ഒരു ലളിതമായ അഡാപ്റ്റീവ് മെനു വേഗത്തിൽ സൃഷ്ടിക്കാൻ കഴിയും.

തീർച്ചയായും, ദോഷങ്ങളുമുണ്ട്. ഇൻഡൻ്റുകൾ പിക്സലുകളിൽ വ്യക്തമാക്കിയിട്ടുണ്ട്, എന്നാൽ നിങ്ങൾക്ക് എല്ലാ ദൂരങ്ങളും ഒരു ശതമാനമായി സജ്ജീകരിക്കാനും കഴിയും. അത് ആവശ്യമായിരുന്നില്ല. ഇതൊരു സമ്പൂർണ്ണ സൈറ്റാണെങ്കിൽ, ഞാൻ png അല്ല svg അല്ലെങ്കിൽ ഫോണ്ട് ഐക്കണുകൾ ഉപയോഗിക്കും, കൂടാതെ ഞാൻ ഇൻഡൻ്റുകൾ ഒരു ശതമാനമായി വീണ്ടും കണക്കാക്കും. അതിനാൽ, ഇത് അൽപ്പം അപ്രതീക്ഷിതമായിരുന്നു :) എല്ലാം വ്യക്തമാണെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു? ബൈ.

ഞങ്ങൾ പ്രതികരിക്കുന്ന രൂപകൽപ്പനയിൽ പ്രവർത്തിക്കാൻ തുടങ്ങുമ്പോൾ, കുറഞ്ഞ മിഴിവുള്ള സ്‌ക്രീനുകൾക്കായി ഞങ്ങളുടെ നാവിഗേഷൻ മെനു മാറ്റുന്നത് എങ്ങനെ മികച്ച രീതിയിൽ കൈകാര്യം ചെയ്യാം എന്നതിനെക്കുറിച്ചുള്ള വ്യത്യസ്ത സാങ്കേതിക വിദ്യകൾ ഞങ്ങൾ കാണും. സാധ്യതകൾ അനന്തമായി തോന്നുന്നു. അതിനാൽ, അവയുടെ ഗുണങ്ങളും ദോഷങ്ങളുമുള്ള നാല് പ്രധാന സമീപനങ്ങൾ ഞാൻ നിങ്ങൾക്ക് കാണിച്ചുതരാം. അവയിൽ മൂന്നെണ്ണം CSS ഉപയോഗിച്ചും ഒരെണ്ണം ചെറിയ അളവിലുള്ള ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ചുമാണ് നിർമ്മിച്ചിരിക്കുന്നത്.

ആമുഖം ഈ ലേഖനത്തിൽ അവതരിപ്പിച്ചിരിക്കുന്ന കോഡിൽ, സ്റ്റൈൽ കോഡ് എളുപ്പത്തിൽ വായിക്കാനും മനസ്സിലാക്കാനും ഞാൻ ബ്രൗസർ പ്രിഫിക്സുകൾ ഉപയോഗിക്കുന്നില്ല. കൂടുതൽ സങ്കീർണ്ണമായ ഉദാഹരണങ്ങൾ SCSS ഉപയോഗിക്കുന്നു. ഓരോ ഉദാഹരണങ്ങളും കോഡ്‌പെനിൽ ഹോസ്റ്റ് ചെയ്‌തിരിക്കുന്നു, അവിടെ നിങ്ങൾക്ക് സമാഹരിച്ച CSS കാണാൻ കഴിയും.

ഈ ലേഖനത്തിലെ എല്ലാ സമീപനങ്ങളും ലളിതമായ HTML കോഡ് ഉപയോഗിക്കുന്നു, അതിനെ ഞാൻ "അടിസ്ഥാന മെനു" എന്ന് വിളിക്കുന്നു. ഒരു നിർദ്ദിഷ്ട തരം സൂചിപ്പിക്കാൻ റോൾ ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നു: തിരശ്ചീന മെനു (പൂർണ്ണ-തിരശ്ചീനം), ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റ് (തിരഞ്ഞെടുക്കുക), ഡ്രോപ്പ്-ഡൗൺ മെനു (ഇഷ്‌ടാനുസൃത-ഡ്രോപ്പ്ഡൗൺ), ക്യാൻവാസ്.

• ധാര
• ലാബ്
• പദ്ധതികൾ
• കുറിച്ച്
• ബന്ധപ്പെടുക

സ്‌റ്റൈലിങ്ങിനായി, എല്ലാ ഓപ്‌ഷനുകൾക്കും ഞാൻ ഒരേ മീഡിയ അന്വേഷണം ഉപയോഗിക്കുന്നു:

@മീഡിയ സ്‌ക്രീനും (പരമാവധി വീതി: 44എം) ( )

1. തിരശ്ചീന മെനു ഇത് ഏറ്റവും ലളിതമായ സമീപനമാണ്, കാരണം നിങ്ങൾ ഇനങ്ങളുടെ ലിസ്റ്റ് മുഴുവൻ പേജിൻ്റെയും വീതിയാക്കേണ്ടതുണ്ട്:
• ധാര
• ലാബ്
• പദ്ധതികൾ
• കുറിച്ച്
• ബന്ധപ്പെടുക

@മീഡിയ സ്‌ക്രീനും (പരമാവധി വീതി: 44എം) (നാവ് (ഉൾ > ലി (വീതി: 100%;) )





പ്രയോജനങ്ങൾ
• JavaScript ആവശ്യമില്ല
• അധിക മാർക്ക്അപ്പ് ഇല്ല
• ലളിതമായ ശൈലി കോഡ്
കുറവുകൾ
• വളരെയധികം സ്‌ക്രീൻ ഇടം എടുക്കുന്നു
ഒരു തിരശ്ചീന മെനുവിൻ്റെ ഉദാഹരണം CodePen വെബ്സൈറ്റിൽ കാണാം. ഈ സമീപനം അടിസ്ഥാന മെനു മറയ്ക്കുകയും പകരം ഒരു ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് കാണിക്കുകയും ചെയ്യുന്നു.

ഈ പ്രഭാവം നേടുന്നതിന്, അടിസ്ഥാന മാർക്ക്അപ്പിലേക്ക് ഞങ്ങൾ ഒരു ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റ് ചേർക്കേണ്ടതുണ്ട്. ഇത് പ്രവർത്തനക്ഷമമാക്കുന്നതിന്, ഓൺചേഞ്ച് ഇവൻ്റ് സംഭവിക്കുമ്പോൾ window.location .href-ൻ്റെ മൂല്യം മാറ്റുന്ന JavaScript കോഡ് ചേർക്കേണ്ടതുണ്ട്.
കോൺടാക്റ്റിനെക്കുറിച്ചുള്ള സ്ട്രീം ലാബ് പ്രോജക്ടുകൾ
വലിയ സ്ക്രീനുകളിൽ ലിസ്റ്റ് മറയ്ക്കുന്നു:
nav (> തിരഞ്ഞെടുക്കുക (പ്രദർശനം: ഒന്നുമില്ല;) )
ചെറിയ സ്ക്രീനുകളിൽ, ഞങ്ങൾ പ്രധാന മെനു മറയ്ക്കുകയും ഒരു ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റ് കാണിക്കുകയും ചെയ്യുന്നു. ഇതൊരു മെനു ആണെന്ന് ഉപയോക്താവിനെ മനസ്സിലാക്കാൻ സഹായിക്കുന്നതിന് - "മെനു" എന്ന വാചകത്തിനൊപ്പം ഞങ്ങൾ ഒരു വ്യാജ ഘടകം ചേർക്കും.
@മീഡിയ സ്‌ക്രീനും (പരമാവധി വീതി: 44എം) ( nav (ഉൾ ( ഡിസ്പ്ലേ: ഒന്നുമില്ല; ) തിരഞ്ഞെടുക്കുക ( ഡിസ്പ്ലേ: ബ്ലോക്ക്; വീതി: 100%; ) &: ശേഷം ( സ്ഥാനം: കേവലം; ഉള്ളടക്കം: "മെനു"; വലത്: 0 ; താഴെ: -1എം;)))
അധിക ഡിസൈൻ ഉപയോഗിച്ച്, കുറഞ്ഞ റെസല്യൂഷനുള്ള സ്ക്രീനുകളിൽ ഇത് ഇങ്ങനെയാണ് കാണപ്പെടുന്നത്:



പ്രയോജനങ്ങൾ
• കൂടുതൽ സ്ഥലം എടുക്കുന്നില്ല
• "നേറ്റീവ്" നിയന്ത്രണങ്ങൾ ഉപയോഗിക്കുന്നു
കുറവുകൾ
• പ്രവർത്തിക്കാൻ JavaScript ആവശ്യമാണ്
• ഡ്യൂപ്ലിക്കേറ്റ് ഉള്ളടക്കം സംഭവിക്കുന്നു
• എല്ലാ ബ്രൗസറുകളിലും ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് ശൈലിയിൽ പരാജയപ്പെടുന്നു
ഈ മെനുവിൻ്റെ ഉദാഹരണം .3. ഇഷ്‌ടാനുസൃത ഡ്രോപ്പ്ഡൗൺ മെനു ഈ സമീപനം ചെറിയ സ്‌ക്രീനുകളിൽ അടിസ്ഥാന മെനു മറയ്‌ക്കുകയും പകരം ഇൻപുട്ടും ലേബലും കാണിക്കുകയും ചെയ്യുന്നു (ഒരു ചെക്ക്ബോക്‌സ് ഹാക്ക് ഉപയോഗിച്ച്). ഉപയോക്താവ് ലേബലിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, അടിസ്ഥാന മെനു അതിന് താഴെ കാണിക്കുന്നു.
ചെക്ക്ബോക്സ് ഹാക്ക് ഉപയോഗിക്കുന്നതിലെ പ്രശ്നങ്ങൾ ഈ പരിഹാരത്തിലെ രണ്ട് പ്രധാന പ്രശ്നങ്ങൾ ഇവയാണ്:
• സഫാരിയുടെ മൊബൈൽ പതിപ്പുകളിൽ ഇത് പ്രവർത്തിക്കില്ല (iOS< 6.0) . Невозможно кликнуть на label в браузере под iOS < 6.0, чтобы сработал input из-за бага. Решается добавлением пустого события onclick на label
• 4.1.2-നേക്കാൾ കുറവോ തുല്യമോ ആയ Android OS പതിപ്പിൻ്റെ പ്രധാന ബ്രൗസറിൽ ഇത് പ്രവർത്തിക്കില്ല. വളരെക്കാലം മുമ്പ്, വെബ്‌കിറ്റ് എഞ്ചിനിൽ ഒരു ബഗ് ഉണ്ടായിരുന്നു, അത് സെലക്ടറുകൾ +, ~ എന്നിവയുടെ സംയോജനത്തോടെ വ്യാജ ക്ലാസുകൾ ഉപയോഗിക്കാൻ അനുവദിക്കുന്നില്ല.

H1 ~ p (നിറം: കറുപ്പ്; ) h1: ഹോവർ ~ p (നിറം: ചുവപ്പ്; )
ചെക്ക്‌ബോക്‌സ് ഹാക്ക് ~ സെലക്‌ടറിനൊപ്പം :ചെക്ക് ചെയ്‌ത വ്യാജക്ലാസ് ഉപയോഗിച്ചതിനാൽ ഇതിന് ഫലമുണ്ടായില്ല. WebKit 535.1 (Chrome 13), Android 4.1.2-ന് നിലവിലുള്ള WebKit 534.30 എന്നിവയിൽ ബഗ് പരിഹരിക്കുന്നതുവരെ, Android OS ഉള്ള ഒരു ഉപകരണത്തിലും ഹാക്ക് പ്രവർത്തിച്ചില്ല.

4. ക്യാൻവാസ് ഈ സമീപനത്തിൽ, ചെറിയ സ്‌ക്രീനുകളിൽ, അടിസ്ഥാന മെനു മറയ്‌ക്കുകയും ഇൻപുട്ടും ലേബലും ഓപ്‌ഷൻ 3-ൽ കാണിക്കുകയും ചെയ്യുന്നു. ഉപയോക്താവ് ലേബലിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, അടിസ്ഥാന മെനു ഇടതുവശത്തേക്ക് ഒഴുകുകയും ഉള്ളടക്കം വലത്തേക്ക് നീങ്ങുകയും ചെയ്യുന്നു. . സ്‌ക്രീൻ 80% മെനുവും 20% ഉള്ളടക്കവുമായി വിഭജിക്കപ്പെട്ടിരിക്കുന്നു (സിഎസ്എസിൽ ഉപയോഗിക്കുന്ന റെസല്യൂഷനും യൂണിറ്റുകളും അനുസരിച്ച്)


വലിയ സ്ക്രീനുകളിൽ ഞങ്ങൾ ലേബൽ മറയ്ക്കുന്നു.
ലേബൽ (സ്ഥാനം: കേവലം; ഇടത്: 0; പ്രദർശനം: ഒന്നുമില്ല; )
ചെറിയ സ്ക്രീനുകളിൽ ഞങ്ങൾ വിൻഡോ ഉള്ളടക്കത്തിന് പുറത്ത് മെനു സ്ഥാപിക്കുകയും ലേബലും ഇൻപുട്ടും കാണിക്കുകയും ചെയ്യും. മെനു മറയ്ക്കാൻ ഞങ്ങൾ അതിൻ്റെ വീതിയും നെഗറ്റീവ് സ്ഥാന മൂല്യവും സജ്ജമാക്കുന്നു. ഈ മെനു മനസ്സിലാക്കാൻ ഉപയോക്താവിനെ സഹായിക്കുന്നതിന്, ഞങ്ങൾ ലേബലിൽ "≡" എന്ന ടെക്‌സ്‌റ്റിനൊപ്പം ഒരു കപട ഘടകവും ചേർക്കും (സ്യൂഡോ എലമെൻ്റിൻ്റെ ഉള്ളടക്കമായി ഉപയോഗിക്കുന്നതിന് "\2261" കോഡ് ആയി).

@മീഡിയ സ്‌ക്രീനും (പരമാവധി വീതി: 44എം) ($menu_width: 20em; ബോഡി (ഓവർഫ്ലോ-x: മറച്ചിരിക്കുന്നു; ) nav (സ്ഥാനം: കേവലം; ഇടത്: -$menu_width; വീതി: $menu_width; ul > li ( വീതി: 100 %; menu_width + .5em; മാർജിൻ-വലത്: -($menu_width + .5em); ) )

അധിക ഡിസൈൻ ഉപയോഗിച്ച്, കുറഞ്ഞ റെസല്യൂഷനുള്ള സ്ക്രീനുകളിൽ ഇത് ഇങ്ങനെയാണ് കാണപ്പെടുന്നത്:





ഗുണങ്ങളും ദോഷങ്ങളും
• നോൺ-സെമാൻ്റിക് കോഡ് (ഇൻപുട്ട്/ലേബൽ)
• അധിക HTML ആവശ്യമാണ്
• ശരീര മൂലകത്തിൻ്റെ സമ്പൂർണ്ണ സ്ഥാനം ഒരു നിശ്ചിത സ്ഥാനത്തിൻ്റെ തോന്നൽ നൽകുന്നു
ഇത് IE-ന് കീഴിൽ പ്രവർത്തിക്കുന്നുണ്ടോ? ഉപയോഗിക്കുന്ന എല്ലാ സാങ്കേതിക വിദ്യകൾക്കും ഒരു ലക്ഷ്യമുണ്ട്: ആധുനിക ബ്രൗസറുകൾക്കായി ഒരു റെസ്‌പോൺസീവ് മെനു സൃഷ്‌ടിക്കുക! ഒരു മൊബൈൽ ഉപകരണത്തിലും IE8 അല്ലെങ്കിൽ അതിൽ താഴെയുള്ളത് ഇല്ലാത്തതിനാലാണിത്, അതിനാൽ ഈ പ്രശ്നത്തെക്കുറിച്ച് ഞങ്ങൾ ഒട്ടും വിഷമിക്കേണ്ടതില്ല.