ഒരു ഘട്ടം ഘട്ടമായുള്ള ഗൈഡ്
നിങ്ങളുടെ നാവിഗേഷൻ മെനു മുകളിലോ മുകളിൽ ഒരു തിരശ്ചീന നിരയോ ഒരു ഭാഗത്ത് തിരശ്ചീനമായ വരിയോ ആകട്ടെ, അത് ഇപ്പോഴും ഒരു ലിസ്റ്റ് മാത്രമാണ്. വെബ് നാവിഗേഷൻ രൂപകൽപന ചെയ്യുമ്പോൾ, ഒരു നാവിഗേഷൻ മെനു ഒരു മഹത്ത്വീകരിച്ച ലിങ്കുകളുടെ ഗ്രൂപ്പാണ് എന്നത് മറന്നേക്കു എളുപ്പമാണ്. എന്നാൽ നിങ്ങൾ XHTML + CSS ഉപയോഗിച്ച് നാവിഗേഷൻ പ്രോഗ്രാം ചെയ്യുന്നെങ്കിൽ, നിങ്ങൾക്ക് ചെറിയ ഒരു മെനു ഉണ്ടാക്കാൻ കഴിയും (XHTML), ഇഷ്ടാനുസൃതമാക്കാൻ എളുപ്പമാണ് (CSS).
ആമുഖം
നാവിഗേഷനായി ഒരു ലിസ്റ്റ് രൂപകൽപ്പന ചെയ്യാൻ, നിങ്ങൾ ഒരു ലിസ്റ്റ് ഉപയോഗിക്കേണ്ടതുണ്ട്.
ഇത് ഒരു സ്റ്റാൻഡേർഡ് ഓർഡർ ചെയ്യാത്ത പട്ടികയായിരിക്കാം, അത് നാവിഗേഷനാണ്:
നിങ്ങൾ HTML അടുത്ത് നോക്കുകയാണെങ്കിൽ, "ഹോം" എന്ന ലിങ്കിലും നിങ്ങൾക്ക് ഒരു ID ഉണ്ട്. നിങ്ങളുടെ വായനക്കാർക്കുള്ള നിലവിലെ സ്ഥാനം തിരിച്ചറിയുന്ന ഒരു മെനു സൃഷ്ടിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കും. നിങ്ങൾ ഇപ്പോൾ നിങ്ങളുടെ സൈറ്റിലെ ആ വിഷ്വൽ ക്യൂ ഉപയോഗിക്കുന്നതിന് ആലോചിക്കുന്നില്ലെങ്കിലും ആ വിവരം ഉൾപ്പെടുത്താം. നിങ്ങൾ പിന്നീടു കൂട്ടിച്ചേർക്കാൻ തീരുമാനിച്ചാൽ, നിങ്ങളുടെ സൈറ്റ് തയ്യാറാക്കുന്നതിന് കുറച്ചു കോഡിംഗ് ഉണ്ടാകും.
ഏതെങ്കിലും CSS സ്റ്റൈലിംഗ് ഇല്ലാതെ, ഈ XHTML മെനു ഒരു സ്റ്റാൻഡേർഡ് ഓർഡർ ചെയ്യാത്ത പട്ടിക പോലെ കാണപ്പെടുന്നു. ബുള്ളറ്റുകളും ലിസ്റ്റ് ഇനങ്ങളും ചെറുതായി ഇൻഡന്റ് ചെയ്തിട്ടുണ്ട്. ഞാൻ പ്ലെയ്സ്ഹോൾഡർ ലിങ്കുകൾ ഉപയോഗിക്കുന്നതിനാൽ, മിക്ക ബ്രൌസറുകളും ക്ലിക്ക് ചെയ്യാവുന്ന തരത്തിലുള്ള ലിങ്കുകൾ പ്രദർശിപ്പിക്കില്ല (അടിവരയിട്ട് നീല നിറത്തിൽ). മുകളിൽ HTML ൽ ഒരു വെബ് പേജിൽ ഒട്ടിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ നാവിഗേഷൻ ഇതുപോലെയിരിക്കും:
- വീട്
- ഉൽപ്പന്നങ്ങൾ
- സേവനങ്ങള്
- ഞങ്ങളെ സമീപിക്കുക
ഇത് വളരെ വിരസത നിറഞ്ഞതാണ്, ഒരു മെനു പോലെ തോന്നുന്നില്ല. എന്നാൽ പട്ടികയിൽ കുറച്ച് കുറച്ച് CSS ശൈലികൾ ചേർത്താൽ നിങ്ങൾക്ക് അഭിമാനിക്കാൻ കഴിയുന്ന ഒരു മെനു സൃഷ്ടിക്കാനാകും.
ലംബ നാവിഗേഷൻ മെനു
ഒരു ലംബ നാവിഗേഷൻ മെനു എഴുതുവാൻ വളരെ എളുപ്പമാണ്, കാരണം ഇത് ഒരു സാധാരണ പട്ടിക പോലെ തന്നെ കാണിക്കുന്നു: മുകളിലേക്കും താഴേക്കും.
ലിസ്റ്റ് ഇനങ്ങൾ ലംബമായി താഴേക്ക് പ്രദർശിപ്പിക്കുന്നു.
ഞാൻ മെനുകൾ സ്റൈൽ ആയിരിക്കുമ്പോൾ, ഞാൻ പുറത്ത് തുടങ്ങാനും ജോലിചെയ്യാനും ആഗ്രഹിക്കുന്നു. ഇതിലൂടെ ഞാൻ, ഞാൻ ആദ്യ ശൈലി ul # നാവിഗേഷൻ ചെയ്യുകയും തുടർന്ന് li ഘടകങ്ങളിലേക്കും തുടർന്ന് ലിങ്കുകളിലേക്കും നീക്കുകയും ചെയ്യുന്നു. അങ്ങനെ, ആദ്യം നിങ്ങൾ മെനുവിൻറെ വീതിയെ നിർവചിക്കുക. മെനു ഇനങ്ങൾ നീണ്ടതാണെങ്കിൽപ്പോലും അവ ലേഔട്ടിന്റെ ബാക്കിയുള്ളവയോ തിരശ്ചീന സ്ക്രോളിംഗിലേക്കോ ആകില്ലെന്ന് ഇത് ഉറപ്പാക്കും.
ul # നാവിഗേഷൻ {width: 12em; }
എനിക്ക് വീതി സെറ്റ് കിട്ടി കഴിഞ്ഞാൽ എനിക്ക് ലിസ്റ്റ് ഇനങ്ങളിൽ കളിക്കാം. ഇത് (ബുല്ലെറ്റ് ഒഴിവാക്കുന്നതിന്), പശ്ചാത്തല നിറങ്ങൾ, ബോർഡറുകൾ, വാചക വിന്യാസം, മാർജിനുകൾ തുടങ്ങിയ കാര്യങ്ങൾ ക്രമീകരിക്കാൻ ഇത് എന്നെ അനുവദിക്കുന്നു.
ul # navigation li {
പട്ടിക-ശൈലി: ഒന്നുമില്ല;
പശ്ചാത്തല വർണം: # 039;
ബോർഡർ ടോപ്പ്: സോളിഡ് 1px # 039;
ടെക്സ്റ്റ് അലൈൻ: ഇടത്;
മാർജിൻ: 0;
}
പട്ടികാ ഇനങ്ങളുടെ അടിസ്ഥാനകാര്യങ്ങൾ സജ്ജമാക്കിയ ശേഷം, നിങ്ങൾക്ക് മെനു ഭാഗത്ത് മെനു കാണുന്നത് എങ്ങനെയാണെന്നു തുടങ്ങാം. ആദ്യ ശൈലി UL # നാവിഗേഷൻ LI A, തുടർന്ന് A: ലിങ്ക്, A: സന്ദർശിച്ചു, A: ഹോവർ, A: സജീവ (നിങ്ങൾ ആവശ്യമെങ്കിൽ). ലിങ്കുകൾക്കായി, ലിങ്കുകൾ ഒരു ബ്ളോക്ക് എലമെന്റിനെ നിർമ്മിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു. ഇത് LI- യുടെ മുഴുവൻ സ്ഥലവും ഏറ്റെടുക്കാൻ പ്രേരിപ്പിക്കുന്നു-അവ ഒരു ഖണ്ഡിക പോലെ പ്രവർത്തിക്കുന്നു, അത് എളുപ്പത്തിൽ ശൈലിയിൽ മെനു ബട്ടണുകളായി മാറുന്നു. ഞാൻ എപ്പോഴും ചെയ്യുന്ന മറ്റ് കാര്യങ്ങൾ അടിവരയിടുന്നു (ടെക്സ്റ്റ്-ഡീബേസേഷൻ: ഒന്നുമില്ല;), ഇത് ബട്ടണുകൾ എന്നെ കൂടുതൽ ബട്ടണുകൾ പോലെ കാണിക്കുന്നു.
തീർച്ചയായും, നിങ്ങളുടെ ഡിസൈൻ വ്യത്യസ്തമായിരിക്കാം.
ul # navigation li a {
പ്രദർശിപ്പിക്കുക: തടയുക;
വാചകം-അലങ്കരിക്കൽ: ഒന്നുമില്ല;
പാഡിംഗ്:.
ബോർഡർ-അടിയിൽ: സോളിഡ് 1px # 39f;
ബോർഡർ-വലത്: സോളിഡ് 1px # 39f;
}
ഡിസ്പ്ലേ: ബ്ലോക്ക്; ലിങ്കുകളിൽ സജ്ജമാക്കുക, മെറ്റീരിയലിന്റെ മുഴുവൻ ബോക്സും അക്ഷരങ്ങൾ മാത്രമല്ല, ക്ലിക്കുചെയ്യാൻ കഴിയും. ഇത് ഉപയോഗപ്രദമാകുന്നത് നല്ലതാണ്. നിങ്ങൾ സ്ഥിരസ്ഥിതി നീല, ചുവപ്പ്, പർപ്പിൾ എന്നിവയിൽ നിന്നും വ്യത്യസ്തമായിരിക്കാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ ലിങ്ക് നിറങ്ങൾ (ലിങ്ക്, സന്ദർശിച്ചു, ഹോവർ, സജീവമായത്) സജ്ജമാക്കുന്നത് ഉറപ്പാക്കുക.
a: link, a: സന്ദര്ശിച്ച {നിറം: # ff; }
a: ഹോവർ, ഒരു: സജീവ {നിറം: # 000; }
പശ്ചാത്തല വർണ്ണം മാറ്റിക്കൊണ്ട് ഹോവർ നിലയ്ക്ക് കുറച്ച് കൂടുതൽ ശ്രദ്ധ നൽകാനും ഞാൻ ആഗ്രഹിക്കുന്നു.
a: ഹോവർ {background-color: # ff; }
നിങ്ങൾക്ക് ലംബമായ മെനുകൾ കൂടുതൽ ഉദാഹരണങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, താഴെയുള്ള പട്ടിക പരിശോധിക്കുക.
- സ്റ്റൈൽഡ് ലംബ മെനു
- ഒരു അടിസ്ഥാന മെറ്റാലിക്ക് മെനു ടെംപ്ലേറ്റ്
- നിങ്ങൾ കൂടെയുള്ള ഒരു സ്റ്റൈൽഡ് വെർട്ടിക്കൽ മെനു
- നിങ്ങൾക്കൊപ്പമുള്ള ഒരു അടിസ്ഥാന മെറ്റാലിക്ക് മെനു ടെംപ്ലേറ്റ്
തിരശ്ചീന നാവിഗേഷൻ മെനു
തിരശ്ചീന നാവിഗേഷൻ മെനുകൾ സൃഷ്ടിക്കുന്നത് ലംബ നാവിഗേഷൻ മെനുകളേക്കാൾ അൽപ്പം കൂടുതൽ ബുദ്ധിമുട്ടാണ്, കാരണം HTML ലിസ്റ്റുകൾ ലംബമായി പ്രദർശിപ്പിക്കാൻ ഇഷ്ടപ്പെടുന്നുവെന്ന വസ്തുതകൾക്ക് നിങ്ങൾ ഓഫ്സെറ്റ് ചെയ്യണം. തിരശ്ചീന മെനു പോലെ, നിങ്ങളുടെ നാവിഗേഷൻ മെനു ലിസ്റ്റ് ആദ്യം സൃഷ്ടിക്കുക:
ഒരു തിരശ്ചീന മെനു സൃഷ്ടിക്കാൻ, നിങ്ങൾ ലംബ മെനു ഉപയോഗിച്ച് ചെയ്തപോലെ തന്നെ പ്രവർത്തിക്കുക. പുറത്തെടുത്ത് ആരംഭിക്കുകയും പ്രവർത്തിക്കുകയും ചെയ്യുക. എന്റെ നാവിഗേഷൻ ഇടത് മൂലയിൽ ആരംഭിക്കണമെങ്കിൽ, ഞാൻ അതിനെ 0 ഇടത് മാർജിൻ, പാഡിംഗ് എന്നിവ ഉപയോഗിച്ച് സജ്ജമാക്കി, അത് ഇടതുവശത്തേക്ക് ഫ്ലോട്ട് ചെയ്യും. നിങ്ങൾ ഉദ്ദേശിക്കുന്നതിനേക്കാൾ കൂടുതലോ കുറവോ സ്ഥലമോ നിങ്ങളുടെ മെനു എടുക്കാറില്ല, വീതി ക്രമീകരിക്കാനുള്ള സ്വഭാവത്തിലും നിങ്ങൾക്ക് ലഭിക്കും. തിരശ്ചീനമായ മെനുകളിൽ, സാധാരണയായി ഡിസൈനിന്റെ മുഴുവൻ വീതിയുമാണ്. വായിക്കാൻ എളുപ്പമാക്കുന്നതിനായി മുഴുവൻ ലിസ്റ്റിലേക്കും ഞാൻ ഒരു പശ്ചാത്തല നിറം ചേർത്തു.
ul # navigation {
ഫ്ലോട്ട്: ഇടത്;
മാർജിൻ: 0;
പാഡിംഗ്: 0;
വീതി: 100%;
പശ്ചാത്തല വർണം: # 039;
}
എന്നാൽ തിരശ്ചീന നാവിഗേഷൻ മെനുയിലേക്കുള്ള രഹസ്യം ലിസ്റ്റ് ഇനങ്ങളിൽ ആണ്. ലിസ്റ്റ് വസ്തുക്കൾ സാധാരണയായി ബ്ലോക്ക് ഘടകങ്ങൾ ആണ്, അതായത് ഓരോന്നും മുമ്പും പിന്നിടുന്നതിനുമായി ഒരു പുതിയ വരിയും ഉണ്ടായിരിക്കും എന്നാണ്. ഡിസ്പ്ലേയിൽ നിന്ന് ഇൻലൈൻ വരയ്ക്കുന്നതിലൂടെ, തിരശ്ചീനമായി തിരശ്ചീനമായി പരസ്പരം അടുക്കുന്നതിനുള്ള ലിസ്റ്റ് ഘടകങ്ങൾ നിങ്ങൾ നിർബ്ബന്ധിതമാക്കുന്നു.
ul # navigation li {display: inline; }
ഞാൻ ലംബമായി നാവിഗേഷൻ മെനുവിലെ അതേ നിറങ്ങളോടും ടെക്സ്റ്റ് ഡിസൈനുകളോടും കൂടി ഞാൻ ലിങ്കുകൾ കൈകാര്യം ചെയ്തു. ബട്ടണുകൾ മറികടക്കുമ്പോഴാണ് ബട്ടണുകൾ വേർതിരിക്കുന്നത് ഞാൻ ഒരു ബോർഡർ കൂട്ടിച്ചേർത്തു. ഞാൻ നീക്കം ചെയ്ത കാര്യം ഡിസ്പ്ലേയാണ്: ബ്ലോക്ക്; പുതിയ വരികൾ വീണ്ടും തിരഞ്ഞ് തിരശ്ചീന മെനുവിലെത്തിക്കും.
ul # navigation li a {
വാചകം-അലങ്കരിക്കൽ: ഒന്നുമില്ല;
പാഡിംഗ്: .25em 1em;
ബോർഡർ-അടിയിൽ: സോളിഡ് 1px # 39f;
ബോർഡർ-ടോപ്പ്: സോളിഡ് 1px # 39f;
ബോർഡർ-വലത്: സോളിഡ് 1px # 39f;
}
a: link, a: സന്ദര്ശിച്ച {നിറം: # ff; }
ul # navigation li a: hover {
പശ്ചാത്തല വർണം: # ff;
നിറം: # 000;
}
നിങ്ങൾ ഇവിടെയാണ് ലൊക്കേഷൻ വിവരങ്ങൾ
HTML- ന്റെ മറ്റൊരു ഘടകം യുമെററിൻറെ ഐഡന്റിഫയർ ആണ്. നിങ്ങളുടെ ഉപയോക്താക്കളുടെ നിലവിലെ സ്ഥാനം സൂചിപ്പിക്കുന്നതിന് നിങ്ങളുടെ മെനു പരിഷ്ക്കരിക്കണമെങ്കിൽ, വ്യത്യസ്തമായ പശ്ചാത്തല വർണ്ണമോ മറ്റ് ശൈലിക്കോ നിർവ്വചിക്കുന്നതിന് ഈ ഐഡി ഉപയോഗിക്കൂ. മറ്റ് പേജുകളിലെ ശരിയായ മെനുവിലേക്ക് ആ ID ആട്രിബ്യൂട്ട് നീക്കുക, അതുവഴി നിലവിലെ പേജ് എപ്പോഴും ഹൈലൈറ്റ് ചെയ്യപ്പെടും.
ul # navigation li # youarehere ഒരു {background-color: # 09f; }
നിങ്ങൾ ഈ ശൈലികൾ നിങ്ങളുടെ പേജിൽ ഒന്നിച്ചെങ്കിൽ, നിങ്ങളുടെ സൈറ്റിൽ പ്രവർത്തിക്കുന്ന ഒരു തിരശ്ചീനമായ അല്ലെങ്കിൽ തിരശ്ചീനമായ മെനു ബാർ സൃഷ്ടിക്കാൻ കഴിയും, പക്ഷേ ഡൌൺലോഡ് പെട്ടെന്നുള്ളതും ഭാവിയിൽ അപ്ഡേറ്റ് ചെയ്യാൻ വളരെ എളുപ്പവുമാണ്. XHTML + CSS ഉപയോഗിക്കുന്നത് നിങ്ങളുടെ ലിസ്റ്റുകളെ രൂപകൽപ്പന ചെയ്യാൻ വളരെ ശക്തമായ ഒരു ഉപകരണമായി മാറും.
തിരശ്ചീനമായ മെനുകളുടെ കൂടുതൽ ഉദാഹരണങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഇനി പറയുന്നവ പരിശോധിക്കുക.
- ഒരു സ്റ്റൈലില് തിരശ്ചീന മെനു
- ഒരു അടിസ്ഥാന തിരശ്ചീന മെനു ടെംപ്ലേറ്റ്
- നിങ്ങൾക്കൊപ്പമുള്ള ഒരു സ്റ്റൈൽഡ് തിരശ്ചീന മെനു
- നിങ്ങൾ ഇവിടെയുള്ള ഒരു അടിസ്ഥാന തിരശ്ചീന മെനു ടെംപ്ലേറ്റ്