ഒരു തിരശ്ചീന css മെനു സൃഷ്ടിക്കുന്നു. കോഡ്‌പെൻ ഉള്ള മനോഹരമായ മൾട്ടി-ലെവൽ മെനുകളുടെ മികച്ച അവലോകനം

സൈറ്റിനായി ലളിതമായ ഒരു തിരശ്ചീന നാവിഗേഷൻ മെനു സൃഷ്ടിക്കാം. ഇത് ചെയ്യുന്നതിന്, എല്ലാ ബ്രൗസറുകളിലും ഞങ്ങളുടെ മെനുവിന്റെ ശരിയായ പ്രദർശനത്തിന് കാരണമാകുന്ന ലളിതമായ ടെക്നിക്കുകൾ ഞങ്ങൾ ഉപയോഗിക്കും.

അതിനാൽ, നമുക്ക് ആരംഭിക്കാം. നമ്മുടെ മെനുവിന്റെ പേരുകൾ ഉപയോഗിച്ച് ഒരു ലിസ്റ്റ് ഉണ്ടാക്കാം. ഇനത്തിന്റെ പേരുകൾ ഇതായിരിക്കട്ടെ: "വീട്", "വാർത്തകൾ", "ഉൽപ്പന്നങ്ങൾ", "സേവനങ്ങൾ", "പങ്കാളികൾ", "കോൺടാക്റ്റുകൾ". menu.html എന്ന പേരിൽ ഒരു പുതിയ ഫയൽ സൃഷ്‌ടിക്കുക, ഉദാഹരണത്തിന്, ഡ്രീംവീവർ പ്രോഗ്രാം ഉപയോഗിച്ചോ ഒരു സാധാരണ നോട്ട്പാഡ് ഉപയോഗിച്ചോ. അതിൽ, ബോഡി ടാഗുകൾക്കിടയിൽ ഞങ്ങൾ ഞങ്ങളുടെ മെനു സ്ഥാപിക്കുന്നു. ലി എലമെന്റുകളുള്ള ul-ന്റെ ഒരു സാധാരണ ബുള്ളറ്റ് ലിസ്‌റ്റാണിത്. തീർച്ചയായും, ഞങ്ങൾ ഓരോ മെനു ഇനവും ഒരു ലിങ്ക് ആക്കുന്നു, അവിടെ URL-ന് പകരം ഞങ്ങൾ ഹാഷ് # ചേർക്കുന്നു. ഫോട്ടോഷോപ്പ് ഉപയോഗിച്ച്, ചുവടെയുള്ള ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ ഗ്രേഡിയന്റ് ഫിൽ ഉപയോഗിച്ച് 3x30 px വലുപ്പമുള്ള ഒരു ചിത്രം സൃഷ്ടിക്കുക. ഞങ്ങൾ ഫയൽ GIF ഫോർമാറ്റിൽ സംരക്ഷിക്കും. നമുക്ക് ഇതിനെ bg.gif എന്ന് വിളിക്കാം. ഈ ചിത്രം നമ്മുടെ മെനുവിന്റെ പശ്ചാത്തല ചിത്രമായി പ്രവർത്തിക്കും.

menu.html ഫയലിന്റെ ഉള്ളടക്കം ഇതാ:

ലളിതമായ ക്രോസ് ബ്രൗസർ തിരശ്ചീന മെനു

വീട്
വാർത്ത
ഉൽപ്പന്നങ്ങൾ
സേവനങ്ങള്
പങ്കാളികൾ
ബന്ധങ്ങൾ

ഇനി നമുക്ക് main.css എന്ന സ്റ്റൈൽ ഫയൽ പ്രത്യേകം ഉണ്ടാക്കാം. അതിന്റെ ലിസ്റ്റിംഗ് പൂർണ്ണമായി താഴെ കാണിച്ചിരിക്കുന്നു.

Ul (മാർജിൻ:0; /*സീറോ പാഡിംഗ്*/ പാഡിംഗ്:0; /*പൂജ്യം പാഡിംഗ്*/ ഫ്ലോട്ട്:ഇടത്; /*ലിസ്‌റ്റ് ഇടത്തേക്ക് വിന്യസിക്കുക*/ വീതി:യാന്ത്രിക;/*അടിസ്ഥാനമാക്കി ഓട്ടോയുടെ വീതി സജ്ജമാക്കുക ലിസ്റ്റിന്റെ തരവും ഉള്ളടക്കവും */ പശ്ചാത്തല-ചിത്രം: url(bg.gif); /*പശ്ചാത്തല ചിത്രം സജ്ജീകരിക്കുക*/ പശ്ചാത്തലം-ആവർത്തനം: ആവർത്തിക്കുക-x; /*ഞങ്ങളുടെ ചിത്രം തിരശ്ചീനമായി ആവർത്തിക്കുക*/ ലിസ്റ്റ്-ശൈലി: ഒന്നുമില്ല; /*ലിസ്റ്റ് മാർക്കറുകൾ നീക്കംചെയ്യുക*/ പശ്ചാത്തല നിറം:#4778c3; /*ചിത്രത്തിന് പശ്ചാത്തല നിറം സജ്ജമാക്കുക*/ font-size:13px; /*ഫോണ്ട് വലുപ്പം സജ്ജമാക്കുക*/ ഫോണ്ട്-ഫാമിലി:Arial, Helvetica, sans-serif ; /*ഫോണ്ട് സജ്ജീകരിക്കുക*/ ) ul li (float:left; /*List Elements ഇടതുവശത്തേക്ക് വിന്യസിക്കുക*/ ) ul a ( display:block; /*besent menu links as block element*/ width:100px; /* ബ്ലോക്ക് വലുപ്പം*/ ഉയരം:30px സജ്ജീകരിക്കുക; /* ഒപ്പം ബ്ലോക്ക് ഉയരം*/ ടെക്സ്റ്റ്-അലൈൻ:സെന്റർ; /*കേന്ദ്രീകൃത ലിഖിതം*/ ലൈൻ-ഉയരം: 2.1എം; /*ലൈൻ സ്പെയ്സിംഗ്*/ ടെക്സ്റ്റ്-ഡെക്കറേഷൻ: ഒന്നുമില്ല; /* ലിങ്കുകളിൽ നിന്ന് അടിവരയിടുക*/ നിറം:#fff; /*ലിങ്ക് ടെക്‌സ്‌റ്റ് വർണ്ണം - വെള്ള*/ ബോർഡർ-വലത്:#fff സോളിഡ് 1px; /*ബ്ലോക്കിന്റെ വലതുവശത്തുള്ള ബോർഡർ (വൈറ്റ് ലൈൻ 1px)*/ ) ul a: ഹോവർ (നിറം:#cc; /*മുകളിൽ ഹോവർ ചെയ്യുമ്പോൾ ലിങ്ക് നിറം മാറുന്നു*/)

Main.css ഫയലിന്റെ ഉള്ളടക്കത്തെക്കുറിച്ച് ചോദ്യങ്ങളൊന്നും ഉണ്ടാകരുതെന്ന് ഞാൻ കരുതുന്നു; അഭിപ്രായങ്ങളിലെ നുറുങ്ങുകൾ മതിയായ വിശദമായും വ്യക്തമായും ഞാൻ എഴുതിയിട്ടുണ്ട്, അതിനാൽ ഞാൻ സ്വയം ആവർത്തിക്കില്ല. ഉപയോഗിച്ച് ഞങ്ങളുടെ menu.html പേജിലേക്ക് ഇത് ബന്ധിപ്പിക്കാൻ മറക്കരുത്

സംഗഹിക്കുക. തൽഫലമായി, എല്ലാ ആധുനിക ബ്രൗസറുകളിലും മാത്രമല്ല, IE 5.5, IE 6.0 പോലുള്ള അപൂർവതകളിലും സമാനമായി കാണപ്പെടുന്ന പൂർണ്ണമായ ക്രോസ് ബ്രൗസർ തിരശ്ചീന മെനു ഞങ്ങൾക്ക് ലഭിച്ചു. എല്ലാ മെനു ഘടകങ്ങളും ബ്ലോക്ക് ഘടകങ്ങളായി അവതരിപ്പിച്ചിരിക്കുന്നു, കൂടാതെ 100 px വീതിയും 30 px ഉയരവും ഉള്ള അതേ അളവുകൾ ഉണ്ട്. മെനു ഇനങ്ങൾക്കുള്ള ഒരു സെപ്പറേറ്റർ എന്ന നിലയിൽ, 1px കട്ടിയുള്ള വെളുത്ത വലത് ബോർഡർ ഉപയോഗിച്ച് ഒരു ബ്ലോക്ക് എലമെന്റ് ഡിസൈൻ ഉപയോഗിക്കുന്നു. ഇത് പ്രായോഗികമായി ഒരു തിരശ്ചീന മെനു നടപ്പിലാക്കുന്നതിനുള്ള ഏറ്റവും ലളിതമായ മാർഗമാണ്. തീർച്ചയായും, വേണമെങ്കിൽ, നിങ്ങൾക്ക് ഇത് പരിഷ്ക്കരിക്കാനും ഭാവന, CSS പ്രോപ്പർട്ടികൾ, അധിക ഗ്രാഫിക് ഘടകങ്ങൾ എന്നിവ ഉപയോഗിച്ച് കൂടുതൽ മനോഹരവും പ്രവർത്തനക്ഷമവുമാക്കാം. ശരി, ഞങ്ങളുടെ തിരശ്ചീന മെനു ഇതുപോലെ കാണപ്പെടുന്നു:

ഈ പരിഹാരത്തിന്റെ ഗുണങ്ങൾ:
ചെയ്യാൻ എളുപ്പമാണ്
ലളിതമായ കോഡ്
പട്ടികകളോ ജാവാസ്ക്രിപ്റ്റോ ഇല്ല
ക്രോസ് ബ്രൗസർ അനുയോജ്യത: എല്ലാ ബ്രൗസറുകളിലും മെനു ഒരുപോലെയാണ്
ഒരു ഡ്രോയിംഗ് മാത്രമാണ് ഉപയോഗിക്കുന്നത്
menu.html പേജിലെ ഏറ്റവും കുറഞ്ഞ കോഡ്
main.css-ൽ ശൈലികൾ നടപ്പിലാക്കുന്നതിനുള്ള ഏറ്റവും കുറഞ്ഞ കോഡ്

ഈ ഉദാഹരണത്തിൽ ഉപയോഗിച്ചിരിക്കുന്ന ഫയലുകൾ ആർക്കൈവിൽ ഡൗൺലോഡ് ചെയ്യാം

ഇപ്പോൾ ഈ പ്രസിദ്ധീകരണം വായിക്കുന്ന എല്ലാവർക്കും ശുഭദിനം. ഒരു വെബ് റിസോഴ്‌സും ഇല്ലാതെ ചെയ്യാൻ കഴിയാത്ത വെബ്‌സൈറ്റ് നിർമ്മാണ ഉപകരണങ്ങളിലൊന്നിനെക്കുറിച്ച് ഇന്ന് ഞാൻ നിങ്ങളോട് പറയാൻ ആഗ്രഹിക്കുന്നു. ഇതാണ് സൈറ്റ് മെനു, അല്ലെങ്കിൽ അവർ സൈറ്റ് മാപ്പ് പറയുന്നതുപോലെ. ഇന്ന് മെനുകളുടെ തരങ്ങളും ഉപവിഭാഗങ്ങളും പരിധിയില്ലാത്ത എണ്ണം ഉണ്ട്.

ഓൺലൈൻ സ്റ്റോറുകൾ, ബ്ലോഗുകൾ, വിദ്യാഭ്യാസ സേവനങ്ങൾ, മറ്റ് ഉറവിടങ്ങൾ എന്നിവയുടെ ഡെവലപ്പർമാർ കൂടുതൽ കൂടുതൽ പുതിയതും അസാധാരണവുമായ മാപ്പുകൾ പരീക്ഷിക്കുകയും സൃഷ്ടിക്കുകയും ചെയ്യുന്നു. ലേഖനം വായിച്ചതിനുശേഷം, എല്ലാത്തരം നാവിഗേഷൻ പാനലുകളും ഏതൊക്കെ പ്രധാന ഗ്രൂപ്പുകളായി തിരിച്ചിരിക്കുന്നുവെന്ന് നിങ്ങൾ പഠിക്കും, നിങ്ങൾക്ക് അവ ഓരോന്നും പരീക്ഷിക്കാൻ കഴിയും, കൂടാതെ ഒരു html വെബ്‌സൈറ്റിനായി മെനു കോഡ് എങ്ങനെ എഴുതാമെന്ന് മനസിലാക്കുക. ഇനി നമുക്ക് കാര്യത്തിലേക്ക് കടക്കാം!

ഒരു നാവിഗേഷൻ ബാർ സൃഷ്ടിക്കുന്നതിനുള്ള ഉപകരണങ്ങൾ

മാർക്ക്അപ്പ് ഭാഷയിൽ ഒരു മെനു സൃഷ്ടിക്കാൻ നിരവധി മാർഗങ്ങളുണ്ട്. അവരുടെ അടിസ്ഥാന ആശയം ഒരു അസംഖ്യം ലിസ്റ്റ് ഉപയോഗിക്കുക എന്നതാണ്. അതിനാൽ, നമുക്ക് പരിചിതമായ html 4 ൽ, ഡെവലപ്പർമാർ പേജിൽ ടാഗുകൾ എഴുതുന്നു

മുൻ പ്രസിദ്ധീകരണങ്ങളിൽ പറഞ്ഞതുപോലെ, ജോടിയാക്കിയ ഘടകം

- പട്ടികയിലെ ഒരു ഘടകം. വ്യക്തതയ്ക്കായി, ഒരു ലളിതമായ മെനുവിനുള്ള കോഡ് എഴുതാം:

നാവിഗേഷൻ

സൈറ്റ് നാവിഗേഷൻ

വീട്
ആഴ്ചയിലെ വാർത്തകൾ
സാങ്കേതിക മുന്നേറ്റങ്ങൾ
ചാറ്റ്

എന്നിരുന്നാലും, പ്ലാറ്റ്‌ഫോമിന്റെ വരവോടെ, മാർക്ക്അപ്പ് ഭാഷ അധിക ടാഗുകൾ ഉപയോഗിച്ച് നിറച്ചു. അതുകൊണ്ടാണ് ആധുനിക വെബ്സൈറ്റുകളുടെ മെനു ഒരു പ്രത്യേക ടാഗ് ഉപയോഗിച്ച് സൃഷ്ടിക്കുന്നത്< menu>. ഉപയോഗത്തിൽ, ഈ ഘടകം ബുള്ളറ്റഡ് ലിസ്റ്റുകളിൽ നിന്ന് വ്യത്യസ്തമല്ല.

ഒന്നിന് പകരം< ul>നിർദ്ദേശിക്കപ്പെട്ടിരിക്കുന്നു< menu>. എന്നിരുന്നാലും, ജോലിയുടെ ഭാഗത്ത് നിന്ന് വിലയിരുത്തുമ്പോൾ കാര്യമായ വ്യത്യാസങ്ങൾ പ്രത്യക്ഷപ്പെടുന്നു. അതിനാൽ, രണ്ടാമത്തെ ഉദാഹരണം തിരയൽ പ്രോഗ്രാമുകളുടെയും റോബോട്ടുകളുടെയും പ്രവർത്തനത്തെ വേഗത്തിലാക്കുന്നു. സൈറ്റ് ഘടന വിശകലനം ചെയ്യുമ്പോൾ, ഈ കോഡ് സൈറ്റ് മാപ്പിന് ഉത്തരവാദിയാണെന്ന് അവർ ഉടൻ മനസ്സിലാക്കുന്നു.

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

നമുക്ക് ഒരു തിരശ്ചീന നാവിഗേഷൻ മോഡൽ സൃഷ്ടിക്കാം

ഇത്തരത്തിലുള്ള നാവിഗേഷൻ ഏറ്റവും ജനപ്രിയമാണ്. പാനൽ തിരശ്ചീനമായി രൂപകൽപ്പന ചെയ്യുമ്പോൾ, എല്ലാ മെനു ഇനങ്ങളും പേജ് ഹെഡറിലോ "ഫൂട്ടറിലോ" സ്ഥിതി ചെയ്യുന്നു (ചിലപ്പോൾ നാവിഗേഷൻ ഘടകങ്ങൾ തനിപ്പകർപ്പാണ്, മുകളിലും താഴെയുമായി ഒരേസമയം ദൃശ്യമാകും).

ഒരു ഉദാഹരണമായി, ഞങ്ങൾ ഒരു തിരശ്ചീന പാനൽ സൃഷ്ടിക്കും, അതിന്റെ മെനു ഇനങ്ങൾ CSS (കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ) ഉപയോഗിച്ച് രൂപകൽപ്പന ചെയ്യും അല്ലെങ്കിൽ രൂപാന്തരപ്പെടും. അതിനാൽ, ഓരോ മൂലകവും ഒരു വളഞ്ഞ ദീർഘചതുരത്തിൽ സ്ഥിതിചെയ്യും. കൗതുകമുണ്ടോ?

പരിവർത്തനത്തിനായി ഞങ്ങൾ ട്രാൻസ്ഫോർമേഷൻ എന്ന ഒരു css പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു. പരിവർത്തനം വ്യക്തമാക്കുന്നതിന്, ബിൽറ്റ്-ഇൻ skewX ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നു, ഇത് ഡിഗ്രിയിൽ സ്ക്യൂ ആംഗിൾ വ്യക്തമാക്കുന്നു.

നിർഭാഗ്യവശാൽ, ഓരോ ബ്രൗസറും ഈ പ്രോപ്പർട്ടിയുമായി അതിന്റേതായ രീതിയിൽ പ്രവർത്തിക്കുന്നു, നിർദ്ദിഷ്ട മാനദണ്ഡങ്ങൾ ഉണ്ടായിരുന്നിട്ടും. അതിനാൽ, ഇത് സൂചിപ്പിക്കാൻ പ്രത്യേക പ്രിഫിക്സുകൾ സൃഷ്ടിച്ചു:

-ms- (ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ)
-o- (ഓപ്പറ)
-വെബ്കിറ്റ്- (ക്രോം, സഫാരി)
-moz- (ഫയർഫോക്സ്)

ഇപ്പോൾ നമുക്ക് ഒരു ഉദാഹരണം എഴുതാൻ നേടിയ അറിവ് പ്രയോഗിക്കാം.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

തിരശ്ചീന പാനൽ

വീട്

കമ്പനിയെ കുറിച്ച്

ഉൽപ്പന്നങ്ങൾ

ബന്ധങ്ങൾ

തിരശ്ചീന പാനൽ ലി ( ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; മാർജിൻ-വലത്: 6px; പശ്ചാത്തലം: #FF8C00; രൂപാന്തരം: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) ; -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); ) a ( display: block; padding: 18px 35px; color: #fff; രൂപാന്തരം: skewX(40deg); -webkit- രൂപാന്തരം: skewX(40deg); -o-transform: skewX(40deg); -ms-transform: skewX(40deg); -moz-transform: skewX(40deg); ) li:hover (പശ്ചാത്തലം: #1C1C1C; )

വീട്
കമ്പനിയെ കുറിച്ച്
ഉൽപ്പന്നങ്ങൾ
ബന്ധങ്ങൾ

രണ്ടാമത്തെ പ്രോഗ്രാമിനായി ഞങ്ങൾ മുൻ കോഡ് അടിസ്ഥാനമായി ഉപയോഗിക്കുന്നു. എന്റെ ലംബമായ മെനു ഇനങ്ങൾക്ക് വളഞ്ഞവയല്ല വൃത്താകൃതിയിലുള്ള കോണുകൾ ഉണ്ടായിരിക്കണമെന്ന് ഞാൻ ആഗ്രഹിച്ചു.

ഇത് ചെയ്യുന്നതിന്, ഞാൻ മറ്റൊരു css പ്രോപ്പർട്ടി ബോർഡർ-റേഡിയസ് ഉപയോഗിച്ചു.

മുമ്പത്തെ ലേഖനങ്ങളിൽ ഞാൻ ഈ പരാമീറ്ററുമായി ഇതിനകം പ്രവർത്തിച്ചിട്ടുണ്ട്, അതിനാൽ അതിന്റെ പ്രവർത്തനം മനസ്സിലാക്കുന്നതിൽ എന്തെങ്കിലും ബുദ്ധിമുട്ടുകൾ ഉണ്ടാകുമെന്ന് ഞാൻ കരുതുന്നില്ല.

ലംബ പാനൽ ലി ( ഡിസ്പ്ലേ: ബ്ലോക്ക്; മാർജിൻ: 13px; പാഡിംഗ്: 13px; പശ്ചാത്തലം: #FF8C00; വീതി:20%; ടെക്സ്റ്റ്-അലൈൻ:സെന്റർ; ഫോണ്ട്-സൈസ്:20px; ബോർഡർ-റേഡിയസ്:10px; ) a (നിറം: # fff; ) ലി: ഹോവർ (പശ്ചാത്തലം: #1C1C1C; )

വീട്
കമ്പനിയെ കുറിച്ച്
ഉൽപ്പന്നങ്ങൾ
ബന്ധങ്ങൾ

നിങ്ങൾ ഇതിനകം ശ്രദ്ധിച്ചതുപോലെ, ഈ കോഡിലെ പ്രധാന മാറ്റം ഡിസ്പ്ലേയുടെ അഭാവമാണ്: ഇൻലൈൻ-ബ്ലോക്ക് ഡിക്ലറേഷൻ, ഇത് യഥാർത്ഥത്തിൽ നാവിഗേഷൻ ഇനങ്ങളുടെ തിരശ്ചീന ക്രമീകരണത്തിന് ഉത്തരവാദിയായിരുന്നു.

നാവിഗേഷൻ പാനലുകളുടെ പ്രധാന ഗ്രൂപ്പുകൾ ഞങ്ങൾ പരിശോധിച്ചു, എന്നാൽ നിരവധി ഇനങ്ങൾ ഉണ്ട്, അല്ലെങ്കിൽ അതിലും മികച്ചത്, ആഡ്-ഓണുകൾ.

ചില പോയിന്റുകൾ പ്രധാനവയെ പൂരകമാക്കുമ്പോൾ ചിലപ്പോൾ സാഹചര്യങ്ങൾ ഉണ്ടാകുന്നു. ഈ സാഹചര്യത്തിൽ, ഡ്രോപ്പ്-ഡൗൺ ലിസ്റ്റുകൾ ഇല്ലാതെ നിങ്ങൾക്ക് ചെയ്യാൻ കഴിയില്ല. css ടൂളുകൾ ഉപയോഗിച്ചുള്ള പരിവർത്തനങ്ങളിലൂടെയാണ് അവ സൃഷ്ടിക്കുന്നത്.

ഈ സമീപനം നടപ്പിലാക്കുന്ന ഒരു ചെറിയ പ്രോഗ്രാമിന്റെ കോഡ് ഞാൻ ചുവടെ ചേർത്തിട്ടുണ്ട്.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

ഡ്രോപ്പ്ഡൗൺ ലിസ്റ്റ് ബോഡി (പാഡിംഗ്-ഇടത്: 30%; ഫോണ്ട്-വലിപ്പം: 18px; ) .m-മെനു (മാർജിൻ: 0; പാഡിംഗ്: 9px; വീതി: 50%; ടെക്സ്റ്റ്-അലൈൻ:സെന്റർ; ബോർഡർ: 3px സോളിഡ് #000; പശ്ചാത്തലം : #FF8C00, -ഇടത്: 3px സോളിഡ് #fff; ) .m-മെനു a:ഹോവർ (പശ്ചാത്തലം: #1C1C1C; ) .m-മെനു .s-മെനു (ഇടത്: 10px; സ്ഥാനം: കേവലം; പ്രദർശനം: ഒന്നുമില്ല; വീതി: 155px; മാർജിൻ: 0; പാഡിംഗ്: 0; ലിസ്റ്റ്-സ്റ്റൈൽ: ഒന്നുമില്ല; പശ്ചാത്തലം: #FF8C00; .m-menu .s-menu a (ബോർഡർ: 1px സോളിഡ് #000; ) .m-menu >

ഇന്റർനെറ്റിലെ മിക്ക ക്ലാസിക് വെബ്‌സൈറ്റുകളും പ്രധാന നാവിഗേഷൻ ഘടകമായി ഒരു തിരശ്ചീന മെനു ഉപയോഗിക്കുന്നു. ചിലപ്പോൾ അതിൽ വിവിധ അധിക സവിശേഷതകൾ അടങ്ങിയിരിക്കാം - മൾട്ടി ലെവൽ ഘടനകൾ, ഉപ-ഇനങ്ങൾക്കുള്ള ഐക്കണുകൾ, ഒരു തിരയൽ ബ്ലോക്ക്, സങ്കീർണ്ണമായ ലിസ്റ്റുകൾ മുതലായവ. അടുത്തിടെ ബ്ലോഗിൽ ഒരു ചെറിയ തിരഞ്ഞെടുപ്പ് ഉണ്ടായിരുന്നു, CSS + HTML ഉപയോഗിച്ച് ഒരു ഡ്രോപ്പ്-ഡൗൺ മെനു എങ്ങനെ നിർമ്മിക്കാം എന്നതിന്റെ 4 പ്രായോഗിക ഉദാഹരണങ്ങൾ ഇന്ന് ഞങ്ങൾ നോക്കും. പുതിയ ഡെവലപ്പർമാർക്കും അവരുടെ വെബ്‌സൈറ്റിലെ നാവിഗേഷൻ മാറ്റാൻ ആഗ്രഹിക്കുന്നവർക്കും വിവരങ്ങൾ ഉപയോഗപ്രദമാകും.

ആദ്യത്തെ CSS3 ഡ്രോപ്പ്ഡൗൺ മെനു ട്യൂട്ടോറിയൽ ശേഖരത്തിലെ ഏറ്റവും പുതിയതാണ് (ഏപ്രിൽ 2016 മുതൽ). പരിഹാരത്തിന്റെ ഗുണങ്ങൾ: സൈറ്റിനായുള്ള ഈ തിരശ്ചീന ഡ്രോപ്പ്-ഡൗൺ മെനുവിൽ, ഉപ-ഇനങ്ങളിൽ ഐക്കണുകൾ അടങ്ങിയിരിക്കുന്നു, നടപ്പിലാക്കലും CSS കോഡും മനസ്സിലാക്കാനും നടപ്പിലാക്കാനും വളരെ ലളിതമാണ്.

ഘട്ടം1 - HTML മാർക്ക്അപ്പ്

HTML-ൽ അതിന്റെ ഘടകങ്ങൾക്കായി ആങ്കർ ലിങ്കുകൾ (#) ഉപയോഗിച്ച് ക്രമരഹിതമായ ഒരു ലിസ്റ്റ് സൃഷ്ടിക്കുക എന്നതാണ് ആദ്യപടി. അവിടെ, ഒരു ഇനത്തിൽ, ഞങ്ങൾ മറ്റൊരു നെസ്റ്റഡ് ലിസ്റ്റ് ചേർക്കുന്നു, അത് ഉപമെനുവിന് ഉത്തരവാദിയായിരിക്കും.

ഘട്ടം 2 - മെനു പ്രദർശിപ്പിക്കുക

സൈറ്റിന്റെ തിരശ്ചീന ഡ്രോപ്പ്-ഡൗൺ മെനുവിലെ ഘടകങ്ങൾക്കായി ഞങ്ങൾ CSS-ൽ അനാവശ്യമായ ഇൻഡന്റുകൾ നീക്കം ചെയ്യുന്നു. അതേ ഘട്ടത്തിൽ, ഞങ്ങൾ മെനു ഇനങ്ങളുടെ ഒരു നിശ്ചിത വീതിയും ഉയരവും സജ്ജമാക്കും, കൂടാതെ വൃത്താകൃതിയിലുള്ള കോണുകളും ചേർക്കുക.

.menu, .menu ul, .menu li, .menu a (മാർജിൻ: 0; പാഡിംഗ്: 0; അതിർത്തി: ഒന്നുമില്ല; ഔട്ട്‌ലൈൻ: ഒന്നുമില്ല; ) .മെനു (ഉയരം: 40px ; വീതി: 505px ; പശ്ചാത്തലം: #4c4e5a ; പശ്ചാത്തലം: -webkit-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ); പശ്ചാത്തലം : -moz-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; പശ്ചാത്തലം : -o-linear-gradient (മുകളിൽ , #4c4e5a 0% , #2c2d33 100% ) ; പശ്ചാത്തലം : -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; പശ്ചാത്തലം : ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ , #4c4e,5a 0 2c2d33 100% ); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) .മെനു ലി (സ്ഥാനം: ആപേക്ഷികം; ലിസ്റ്റ്-സ്റ്റൈൽ: ഒന്നുമില്ല; ഫ്ലോട്ട്: ഇടത് ; പ്രദർശനം: ബ്ലോക്ക്; ഉയരം: 40px;)

മെനു, .menu ul, .menu li, .menu a (മാർജിൻ: 0; പാഡിംഗ്: 0; ബോർഡർ: ഒന്നുമില്ല; ഔട്ട്‌ലൈൻ: ഒന്നുമില്ല; ) .മെനു (ഉയരം: 40px; വീതി: 505px; പശ്ചാത്തലം: #4c4e5a; പശ്ചാത്തലം: - webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); പശ്ചാത്തലം: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); പശ്ചാത്തലം: -o-linear-gradient( മുകളിൽ, #4c4e5a 0%,#2c2d33 100%); പശ്ചാത്തലം: -ms-ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, #4c4e5a 0%,#2c2d33 100%); പശ്ചാത്തലം: ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; ബോർഡർ-റേഡിയസ്: 5px; ) .മെനു ലി (സ്ഥാനം: ബന്ധു; ലിസ്റ്റ്-സ്റ്റൈൽ: ഒന്നുമില്ല; ഫ്ലോട്ട്: ഇടത്; ഡിസ്പ്ലേ: ബ്ലോക്ക് ; ഉയരം: 40px;)

ഘട്ടം 3 - ലിങ്കിംഗ്

ശൈലികളിലെ അടിസ്ഥാന സവിശേഷതകൾക്ക് പുറമേ (ഫോണ്ട്, നിറം, ഉയരം), ഹോവർ ചെയ്യുമ്പോൾ ഞങ്ങൾ ടെക്സ്റ്റ് വർണ്ണത്തിന്റെ സുഗമമായ പരിവർത്തനം ഉപയോഗിക്കുകയും സൃഷ്ടിക്കുകയും ചെയ്യുന്നു. ഞങ്ങൾ മെനുവിലേക്ക് സെപ്പറേറ്ററുകളും ചേർക്കുന്നു, ഇടതുവശത്തുള്ള ആദ്യ ഘടകത്തിൽ നിന്നും വലതുവശത്ത് അവസാനത്തേതിൽ നിന്നും ബോർഡർ നീക്കം ചെയ്യുന്നു.

.മെനു ലി എ (ഡിസ്പ്ലേ: ബ്ലോക്ക്; പാഡിംഗ്: 0 14px; മാർജിൻ: 6px 0; ലൈൻ-ഉയരം: 28px; ടെക്സ്റ്റ്-ഡെക്കറേഷൻ: ഒന്നുമില്ല; ബോർഡർ-ഇടത്: 1px സോളിഡ് #393942 ; ബോർഡർ-വലത്: 1px സോളിഡ് #4f5058 ; -കുടുംബം: ഹെൽവെറ്റിക്ക, ഏരിയൽ, sans-serif; ഫോണ്ട്-വെയ്റ്റ്: ബോൾഡ്; ഫോണ്ട്-സൈസ്: 13px; നിറം: #f3f3f3; ടെക്സ്റ്റ്-ഷാഡോ: 1px 1px 1px rgba (0 , 0 , 0 , -webkit- ; സംക്രമണം: നിറം .2s ഈസ്-ഇൻ-ഔട്ട്; -moz-ട്രാൻസിഷൻ: നിറം .2s ഈസ്-ഇൻ-ഔട്ട് -ഔട്ട്; സംക്രമണം: നിറം .2s ഈസ്-ഇൻ-ഔട്ട്; ) .മെനു ലി: ഫസ്റ്റ്-ചൈൽഡ് എ (ബോർഡർ-ഇടത്: ഒന്നുമില്ല; ) : ഹോവർ > a (നിറം: #8fde62;)

മെനു ലി എ ( ഡിസ്പ്ലേ: ബ്ലോക്ക്; പാഡിംഗ്: 0 14px; മാർജിൻ: 6px 0; ലൈൻ-ഉയരം: 28px; ടെക്സ്റ്റ്-ഡെക്കറേഷൻ: ഒന്നുമില്ല; ബോർഡർ-ഇടത്: 1px സോളിഡ് #393942; ബോർഡർ-വലത്: 1px സോളിഡ് #4f5058; ഫോണ്ട്- കുടുംബം: Helvetica, Arial, sans-serif; ഫോണ്ട്-വെയ്റ്റ്: ബോൾഡ്; ഫോണ്ട്-സൈസ്: 13px; നിറം: #f3f3f3; ടെക്സ്റ്റ്-ഷാഡോ: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : നിറം .2s ഈസ്-ഇൻ-ഔട്ട്; -moz-ട്രാൻസിഷൻ: നിറം .2s ഈസ്-ഇൻ-ഔട്ട്; -o-ട്രാൻസിഷൻ: നിറം .2s ഈസ്-ഇൻ-ഔട്ട്; പുറത്തേക്ക്; സംക്രമണം: നിറം .2s ഈസ്-ഇൻ-ഔട്ട്; ) .മെനു ലി:ആദ്യം-കുട്ടി a (ബോർഡർ-ഇടത്: ഒന്നുമില്ല; ) .മെനു ലി:ലാസ്റ്റ്-ചൈൽഡ് എ(ബോർഡർ-വലത്: ഒന്നുമില്ല; ) .മെനു ലി: ഹോവർ > a (നിറം: #8fde62; )

ഘട്ടം 4 - ഉപമെനു

CSS ഉപയോഗിച്ച് ഞങ്ങൾക്ക് ഒരു ഡ്രോപ്പ്-ഡൗൺ സൈറ്റ് മെനു ഉള്ളതിനാൽ, നെസ്റ്റഡ് ലിസ്റ്റിനായി ഞങ്ങൾ ഡിസൈനും സജ്ജമാക്കണം. ആദ്യം, മുകളിൽ 40px ന്റെയും ഇടതുവശത്ത് 0px ന്റെയും മാർജിൻ സജ്ജമാക്കുക + വൃത്താകൃതിയിലുള്ള കോണുകൾ ചേർക്കുക. ഉപമെനു കാണിക്കാൻ/മറയ്ക്കാൻ, തുടക്കത്തിൽ അതാര്യത പ്രോപ്പർട്ടി പൂജ്യമായി സജ്ജീകരിക്കുക, അത് ഒന്നിലേക്ക് ഹോവർ ചെയ്യുമ്പോൾ. ഒരു ഉപമെനു പ്രത്യക്ഷപ്പെടുന്നതിന്റെ ഇഫക്റ്റ് സൃഷ്‌ടിക്കുന്നതിന്, ലിസ്റ്റ് ഉയരത്തിന്റെ മൂല്യം പൂജ്യമായി സജ്ജീകരിക്കുക, കൂടാതെ ഹോവർ = 36px ഉപയോഗിച്ച്.

.മെനു ഉൽ (സ്ഥാനം: കേവലം; മുകളിൽ: 40px; ഇടത്: 0; അതാര്യത: 0; പശ്ചാത്തലം: #1f2024; -webkit-ബോർഡർ-റേഡിയസ്: 0 0 5px 5px ; -moz-ബോർഡർ-റേഡിയസ്: 0 0 5px; ബോർഡർ 5 -റേഡിയസ്: 0 0 5px 5px; -webkit-transition: opacity .25s ഈസ് .1s .25സെ ഈസ് .1സെ ; ട്രാൻസിഷൻ: ഒപാസിറ്റി .25സെ ഈസ് .1സെ ;) .മെനു ലി: ഹോവർ > ഉൽ (അതാര്യത: 1; ) .മെനു ഉൾ ലി (ഉയരം: 0; ഓവർഫ്ലോ: മറച്ചിരിക്കുന്നു; പാഡിംഗ്: 0 ; -വെബ്കിറ്റ്-ട്രാൻസിഷൻ ഉയരം .25സെ ഈസ് .1സെ .1s ; ) .മെനു ലി: ഹോവർ > ഉൾ ലി (ഉയരം: 36px; ഓവർഫ്ലോ: ദൃശ്യം; പാഡിംഗ്: 0;)

മെനു ഉൽ (സ്ഥാനം: കേവലം; മുകളിൽ: 40px; ഇടത്: 0; അതാര്യത: 0; പശ്ചാത്തലം: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; അതിർത്തി- ആരം: 0 0 5px 5px; -webkit-transition: opacity .25s ഈസ് .1s; -moz-transition: opacity .25s ഈസ് .1s; -o-transition: opacity .25s ഈസ് .1s; -ms-opacity. 25സെ ഈസ് .1സെ; സംക്രമണം: അതാര്യത .25സെ ഈസ് .1സെ; .മെനു ലി:ഹോവർ > ul (ഒപാസിറ്റി: 1; ) .മെനു ഉൾ ലി (ഉയരം: 0; ഓവർഫ്ലോ: മറഞ്ഞിരിക്കുന്നു; പാഡിംഗ്: 0; -വെബ്കിറ്റ്-പരിവർത്തനം: ഉയരം .25സെ ഈസ് .1സെ; -മോസ്-ട്രാൻസിഷൻ: ഉയരം .25സെ ഈസ് .1സെ; -ഒ-ട്രാൻസിഷൻ: ഉയരം .25സെ ഈസ് .1സെ; -എംഎസ്-ട്രാൻസിഷൻ: ഉയരം .25സെ ഈസ് .1സെ; 1 സെ; ) .മെനു ലി: ഹോവർ > ഉൾ ലി (ഉയരം: 36 പിക്സൽ; ഓവർഫ്ലോ: ദൃശ്യം; പാഡിംഗ്: 0; )

ഞങ്ങൾ ലിങ്കുകളുടെ വീതി = 100px സജ്ജമാക്കി, അവസാനത്തേത് ഒഴികെയുള്ള എല്ലാ ഘടകങ്ങളുടെയും ചുവടെ ഒരു ബോർഡർ-ബോട്ടം ബോർഡർ ചേർത്തിരിക്കുന്നു. കൂടാതെ, നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഉപമെനു ഇനങ്ങൾക്കായി നിങ്ങൾക്ക് ചിത്രങ്ങൾ സ്ഥാപിക്കാവുന്നതാണ് (ശ്രദ്ധിക്കുക! കോഡിലെ ചിത്രങ്ങളിലേക്കുള്ള പാതകൾ നിങ്ങൾ ഉപയോഗിക്കുന്നവയിലേക്ക് മാറ്റാൻ മറക്കരുത്).

.മെനു ul li a (വീതി: 100px; പാഡിംഗ്: 4px 0 4px 40px; മാർജിൻ: 0; ബോർഡർ: ഒന്നുമില്ല; ബോർഡർ-ബോട്ടം: 1px സോളിഡ് #353539; ) .മെനു ul li: ലാസ്റ്റ്-ചൈൽഡ് എ (ബോർഡർ: ഒന്നുമില്ല; .മെനു a.documents (പശ്ചാത്തലം: url (../img/docs.png) നോ-ആവർത്തന 6px സെന്റർ; ;) .മെനു a.സൈൻഔട്ട് (പശ്ചാത്തലം: url (../img/arrow.png) നോ-ആവർത്തന 6px സെന്റർ ;)

മെനു ul li a (വീതി: 100px; പാഡിംഗ്: 4px 0 4px 40px; മാർജിൻ: 0; ബോർഡർ: ഒന്നുമില്ല; ബോർഡർ-ബോട്ടം: 1px സോളിഡ് #353539; ) .മെനു ul li:last-child a (ബോർഡർ: ഒന്നുമില്ല; ) . മെനു a.documents (പശ്ചാത്തലം: url(../img/docs.png) no-repeat 6px centre; ) .menu a.messages (പശ്ചാത്തലം: url(../img/bubble.png) no-repeat 6px centre; ) .മെനു a.സൈൻഔട്ട് (പശ്ചാത്തലം: url(../img/arrow.png) നോ-ആവർത്തന 6px കേന്ദ്രം; )

നടപ്പിലാക്കുന്നതിന്റെ എളുപ്പവും ഐക്കണുകളുടെ ഉപയോഗവും ഞാൻ വ്യക്തിപരമായി ഇഷ്ടപ്പെടുന്നു. കോഡ്‌പെനിൽ നിന്നുള്ള അവസാന കോഡ് ഇതാ:

ജോഷ് റൈസറിന്റെ ഓപ്ഷൻ ദൃശ്യപരമായി മുമ്പത്തെ HTML, CSS ഡ്രോപ്പ്ഡൗൺ മെനുവിന് സമാനമാണ്. കോഡിന് ചൈൽഡ് സെലക്ടർ ">" ഇല്ല (മൾട്ടി-ലെവൽ ഡിസൈനുകളിൽ ഉപയോഗപ്രദമാണ്), എന്നാൽ കൂടുതൽ മനോഹരമായ ഫലത്തിനായി രചയിതാവ് CSS3 ഇഫക്റ്റുകൾ (ട്രാൻസിഷൻ, ബോക്സ്-ഷാഡോ, ടെക്സ്റ്റ്-ഷാഡോ) നന്നായി ഉപയോഗിക്കുന്നു. ഉറവിടത്തിലെ ലിങ്ക് ഒരു തിരശ്ചീന ഡ്രോപ്പ്-ഡൗൺ മെനു സൃഷ്ടിക്കുന്ന പ്രക്രിയയെ വിവരിക്കുന്നില്ല, അതിനാൽ ഞാൻ ഉടൻ തന്നെ അന്തിമ കോഡ് നൽകും:

ഈ ഉദാഹരണത്തിൽ, സി‌എസ്‌എസ് ഉപയോഗിച്ച് ഒരു ഡ്രോപ്പ്-ഡൗൺ മെനു എങ്ങനെ നിർമ്മിക്കാമെന്ന് ഞങ്ങൾ നോക്കും, അതിൽ ഇനങ്ങൾക്ക് പുറമേ, ഒരു തിരയൽ ബ്ലോക്ക് അടങ്ങിയിരിക്കും. സമാനമായ ഒരു നടപ്പാക്കൽ പലപ്പോഴും ആധുനികതയിലും കാണാം. നടപ്പാക്കൽ സമയത്തിന്റെയും സങ്കീർണ്ണതയുടെയും കാര്യത്തിൽ, പരിഹാരം മുമ്പത്തേതിനേക്കാൾ അൽപ്പം സങ്കീർണ്ണമാണ്. ഇത് 2013 മെയ് മാസത്തിലാണ് പ്രസിദ്ധീകരിച്ചത്, അതിനാൽ ഞങ്ങളുടെ പരിശോധനയിൽ ഇത് നന്നായി പ്രവർത്തിച്ചെങ്കിലും നിങ്ങൾ ചില കാര്യങ്ങൾ മാറ്റേണ്ടതായി വന്നേക്കാം.

HTML കോഡ്

നാവിഗേഷനായി, എല്ലായ്പ്പോഴും എന്നപോലെ, ക്രമരഹിതമായ ഒരു ലിസ്റ്റ് (nav ക്ലാസിനൊപ്പം) ഉപയോഗിക്കുന്നു. സാധാരണ മെനു ഇനങ്ങൾ ലിസ്റ്റ് ഇനങ്ങളാണ് (li) കൂടാതെ ക്ലാസുകളോ ഐഡികളോ ഇല്ലാതെ ലിങ്കുകൾ (ഒരു href) അടങ്ങിയിരിക്കുന്നു. ഇനിപ്പറയുന്ന ഐഡികളുള്ള ഈ തിരശ്ചീന ഡ്രോപ്പ്-ഡൗൺ മെനുവിലെ 3 പ്രത്യേക ഘടകങ്ങളാണ് ഒഴിവാക്കൽ:

ക്രമീകരണങ്ങൾ - ലിങ്ക് ചിത്രം;
തിരയൽ - ഒരു തിരയലും അനുബന്ധ ബട്ടണും ഉള്ള ഒരു ബ്ലോക്ക്;
ഓപ്ഷനുകൾ - ഒരു ഉപമെനു അടങ്ങിയിരിക്കുന്നു (സബ്നാവ് ക്ലാസിനൊപ്പം ഒരു ലിസ്റ്റിലൂടെ നടപ്പിലാക്കുന്നു).

പ്രിഫിക്‌സുകളില്ലാതെ CSS പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കുന്നതിനുള്ള ഒരു പ്രിഫിക്‌സ് ഫ്രീ സ്‌ക്രിപ്റ്റും കോഡിൽ നിങ്ങൾ കാണും. ഡ്രോപ്പ്ഡൗൺ മെനുവിനുള്ള അവസാന HTML ഇതുപോലെ കാണപ്പെടുന്നു:

അപേക്ഷ
ബോർഡ്
ഓപ്ഷനുകൾ
- ക്രമീകരണങ്ങൾ
- അപേക്ഷ
- ബോർഡ്
- ഓപ്ഷനുകൾ

അപേക്ഷ
ബോർഡ്
ഓപ്ഷനുകൾ
- ക്രമീകരണങ്ങൾ
- അപേക്ഷ
- ബോർഡ്
- ഓപ്ഷനുകൾ

മെനു CSS

1. അടിസ്ഥാന ശൈലികളും മെനു ഘടകങ്ങളും

ആദ്യം, ഞങ്ങൾ മോൺസെറാറ്റ് ഫോണ്ട്, ഇരുണ്ട ചാരനിറത്തിലുള്ള പശ്ചാത്തലം, മെനു ഇനങ്ങൾക്ക് ഒരു നിശ്ചിത ഉയരം എന്നിവ വ്യക്തമാക്കുന്നു. എല്ലാ ഘടകങ്ങൾക്കും ഫ്ലോട്ട് ഉണ്ട്: ഇടത് വിന്യാസവും ആപേക്ഷിക സ്ഥാനനിർണ്ണയവും, അങ്ങനെ പിന്നീട് നിങ്ങൾക്ക് സ്ഥാനത്തോടുകൂടിയ ഒരു ഉപമെനു ചേർക്കാൻ കഴിയും: കേവലം;

@import url (http: //fonts.googleapis.com/css?family= Montserrat) ; * (മാർജിൻ: 0; പാഡിംഗ്: 0;) .nav (പശ്ചാത്തലം: #232323; ഉയരം: 60px; ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്;) .നവ് ലി (ഫ്ലോട്ട്: ഇടത്; ലിസ്റ്റ്-സ്റ്റൈൽ-തരം: ഒന്നുമില്ല; സ്ഥാനം: ബന്ധു; )

@import url(http://fonts.googleapis.com/css?family=Montserrat); * (മാർജിൻ: 0; പാഡിംഗ്: 0; ) .nav (പശ്ചാത്തലം: #232323; ഉയരം: 60px; ഡിസ്പ്ലേ: ഇൻലൈൻ-ബ്ലോക്ക്; ) .nav li (ഫ്ലോട്ട്: ഇടത്; ലിസ്റ്റ്-സ്റ്റൈൽ-തരം: ഒന്നുമില്ല; സ്ഥാനം: ബന്ധു; )

2. ലിങ്കുകൾ ഫോർമാറ്റിംഗ്

മെനു ഇനങ്ങൾ അടിസ്ഥാന ഡിസൈൻ + ഉപയോഗിക്കുന്നു. nav ക്ലാസ്സിലെ പോലെ തന്നെയാണ് ഉയരവും. #ക്രമീകരണങ്ങൾക്കായി മെനുവിന്റെ തുടക്കത്തിൽ ഇമേജ് ലിങ്ക്, വിന്യാസം സജ്ജീകരിച്ചിരിക്കുന്നു.

.nav li a (font-size: 16px; colour: white; display: block; line-height: 60px; padding: 0 26px; text-decoration: none; border-left: 1px solid #2e2e2e; font-family: Montserrat , sans-serif ; text-shadow : 0 0 1px rgba ( 255 , 255 , 255 , 0.5 ) ; .nav li a: ഹോവർ (പശ്ചാത്തലം-നിറം: #2e2e2e; ) #ക്രമീകരണങ്ങൾ a (പാഡിംഗ്: ഉയരം: 18px; ഫോണ്ട് വലുപ്പം: 10px; ലൈൻ-ഉയരം: 24px;)

Nav li a (അക്ഷര വലുപ്പം: 16px; നിറം: വെള്ള; ഡിസ്പ്ലേ: ബ്ലോക്ക്; ലൈൻ-ഉയരം: 60px; പാഡിംഗ്: 0 26px; ടെക്സ്റ്റ്-ഡെക്കറേഷൻ: ഒന്നുമില്ല; ബോർഡർ-ഇടത്: 1px സോളിഡ് #2e2e2e; ഫോണ്ട്-ഫാമിലി: മോണ്ട്സെറാത്ത്, sans-serif; ടെക്സ്റ്റ്-ഷാഡോ: 0 0 1px rgba (255, 255, 255, 0.5); ) .nav li a:hover (പശ്ചാത്തല-നിറം: #2e2e2e; ) #ക്രമീകരണങ്ങൾ a (പാഡിംഗ്: 18px; ഉയരം: 24px; ഫോണ്ട് വലുപ്പം: 10px; വരി ഉയരം: 24px; )

3. സെർച്ച് ബ്ലോക്ക്

ഈ ഘടകത്തിന് ഒരു നിശ്ചിത വീതിയുണ്ട് കൂടാതെ നിരവധി ഭാഗങ്ങൾ അടങ്ങിയിരിക്കുന്നു - പച്ച പശ്ചാത്തലവും ഒരു തിരയൽ ബട്ടണും (#തിരയൽ_ബട്ടൺ) ഉള്ള ഒരു ഇൻപുട്ട് ഫീൽഡ് (#തിരയൽ_ടെക്സ്റ്റ്). ചില ബ്രൗസറുകളിൽ, പശ്ചാത്തല നിറം ചാരനിറമായിരിക്കും.

#തിരയൽ (വീതി: 357px; മാർജിൻ: 4px; ) #search_text (വീതി: 297px; പാഡിംഗ്: 15px 0 15px 20px; ഫോണ്ട്-വലിപ്പം: 16px; ഫോണ്ട്-കുടുംബം: Montserrat, sans-serif none: height:5px മാർജിൻ-വലത്: 0; നിറം: വെള്ള; ഔട്ട്‌ലൈൻ: ഒന്നുമില്ല; പശ്ചാത്തലം: #1f7f5c; ഫ്ലോട്ട്: ഇടത്; ബോക്സ് വലുപ്പം: ബോർഡർ-ബോക്സ്; സംക്രമണം: എല്ലാം 0.15 സെ; ) :: -webkit-input-placeholder ( /* WebKit ബ്രൗസറുകൾ */ നിറം: വെള്ള ; ) : -moz-placeholder ( /* Mozilla Firefox 4 മുതൽ 18 */ നിറം: വെള്ള ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ color : white ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color: white ; ) #search_text : ഫോക്കസ് (പശ്ചാത്തലം: rgb (64 , 151 , 119 ) ; ) #search_button (ബോർഡർ: 0 ഒന്നുമില്ല ; പശ്ചാത്തലം: #1f7f5c url (search.png) സെന്റർ നോ-ആവർത്തന; വീതി: 60px; ഫ്ലോട്ട്: ഇടത്; പാഡിംഗ്: 0; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം; ഉയരം: 52px; കഴ്സർ: പോയിന്റർ;)

#തിരയൽ (വീതി: 357px; മാർജിൻ: 4px; ) #search_text( വീതി: 297px; പാഡിംഗ്: 15px 0 15px 20px; ഫോണ്ട്-വലിപ്പം: 16px; ഫോണ്ട്-കുടുംബം: Montserrat, sans-serif; ഉയരം: 5 no2px; ; മാർജിൻ-വലത്: 0; നിറം: വെള്ള; ഔട്ട്‌ലൈൻ: ഒന്നുമില്ല; പശ്ചാത്തലം: #1f7f5c; ഫ്ലോട്ട്: ഇടത്; ബോക്സ് വലുപ്പം: ബോർഡർ-ബോക്സ്; സംക്രമണം: എല്ലാം 0.15 സെ; ) ::-webkit-input-placeholder ( /* WebKit ബ്രൗസറുകൾ */ നിറം: വെള്ള; ) :-moz-placeholder ( /* Mozilla Firefox 4 മുതൽ 18 */ color: white; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ color: white; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color: white; ) #search_text:focus (പശ്ചാത്തലം: rgb(64, 151, 119); ) #search_button (ബോർഡർ: 0 ഒന്നുമില്ല; പശ്ചാത്തലം: #1f7f5c url (search.png) കേന്ദ്രം നോ-ആവർത്തനം; വീതി: 60px; ഫ്ലോട്ട്: ഇടത്; പാഡിംഗ്: 0; ടെക്സ്റ്റ്-അലൈൻ: മധ്യഭാഗം; ഉയരം: 52px; കഴ്സർ: പോയിന്റർ; )

4. ഡ്രോപ്പ്ഡൗൺ ഉപമെനു

അവസാനത്തെ സ്പർശനം CSS-ൽ അവസാനത്തെ #options ഇനത്തിനായി ഒരു ഡ്രോപ്പ്-ഡൗൺ മെനു ഉണ്ടാക്കാൻ ഞങ്ങളെ അനുവദിക്കും.

#options a (ബോർഡർ-ഇടത്: 0 ഒന്നുമില്ല; ) #options > a (പശ്ചാത്തലം-ചിത്രം: url (triangle.png); പശ്ചാത്തല-സ്ഥാനം: 85% കേന്ദ്രം; പശ്ചാത്തലം-ആവർത്തനം: ആവർത്തിക്കരുത്; പാഡിംഗ്-വലത്: 42px ; ) .subnav (ദൃശ്യപരത: മറച്ചിരിക്കുന്നു; സ്ഥാനം: കേവലം; മുകളിൽ: 110%; വലത്: 0; വീതി: 200px; ഉയരം: ഓട്ടോ; അതാര്യത: 0; സംക്രമണം: എല്ലാം 0.1 സെ; പശ്ചാത്തലം: #232323;) .സബ്നവ് ലി (ഫ്ലോട്ട് : ഒന്നുമില്ല;

#options a(ബോർഡർ-ഇടത്: 0 ഒന്നുമില്ല; ) #options>a (പശ്ചാത്തലം-ചിത്രം: url(triangle.png); പശ്ചാത്തല-സ്ഥാനം: 85% കേന്ദ്രം; പശ്ചാത്തലം-ആവർത്തനം: ആവർത്തിക്കരുത്; പാഡിംഗ്-വലത്: 42px; ) .subnav ( ദൃശ്യപരത: മറച്ചത്; സ്ഥാനം: കേവലം; മുകളിൽ: 110%; വലത്: 0; വീതി: 200px; ഉയരം: സ്വയമേവ; അതാര്യത: 0; സംക്രമണം: എല്ലാം 0.1 സെ; പശ്ചാത്തലം: #232323; ) .subnav li (ഫ്ലോട്ട് : ഒന്നുമില്ല;

ശൈലികളിൽ, ഉപമെനു സൂചിപ്പിക്കാൻ ഒരു ത്രികോണ പശ്ചാത്തല ഇമേജ് (triangle.png) ഉൾപ്പെടുത്തുന്നത് നിങ്ങൾ കണ്ടെത്തും - ഇതിന് ശരിയായ പാതയും ഉദാഹരണത്തിലെ മറ്റ് ചിത്രങ്ങളും സൂചിപ്പിക്കാൻ മറക്കരുത്. ഒപാസിറ്റി പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ഒരു ഉപമെനുവിന്റെ രൂപം നടപ്പിലാക്കുന്നു. കോഡ്‌പെനിലെ അന്തിമ പരിഹാരം:

ഈ ഓപ്‌ഷൻ പ്രധാനമായും CSS2.1 ടെക്‌നിക്കുകളാണ് ഉപയോഗിക്കുന്നത്, സൊല്യൂഷൻ പ്ലസ് അല്ലെങ്കിൽ മൈനസ് പുതിയതാണ് - 2015 മാർച്ചിൽ. ഒരു സൈറ്റിന്റെ ഒരു തിരശ്ചീന ഡ്രോപ്പ്-ഡൗൺ മെനുവിൽ നിങ്ങൾക്ക് ഒരു സബ്‌ലെവൽ നഷ്ടമായാൽ, ഈ ഉദാഹരണത്തിൽ ഒരേസമയം മൂന്ന് അടങ്ങിയിരിക്കുന്നു. കപട-ക്ലാസ്:ഒൺലി-ചൈൽഡ് ഉപയോഗിച്ച്, ഒരു ഉപമെനുവിന്റെ സാന്നിധ്യം സൂചിപ്പിക്കാൻ ഇനങ്ങളിൽ ഒരു "+" ചിഹ്നം ചേർക്കുന്നു.

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

ആകെ

ഇന്റർനെറ്റിൽ സമാനമായ നിരവധി ഉദാഹരണങ്ങൾ ഉണ്ടെങ്കിലും, CSS + HTML ഉപയോഗിച്ച് എങ്ങനെ ഒരു ഡ്രോപ്പ്-ഡൗൺ മെനു ഉണ്ടാക്കാം എന്നതിനുള്ള 4 ഓപ്ഷനുകൾ ഞങ്ങൾ മുകളിൽ നോക്കി. jQuery-യിൽ പരിഹാരങ്ങളുണ്ട്, പക്ഷേ ചില പ്രത്യേക ഇഫക്റ്റുകളും നിലവാരമില്ലാത്ത ജോലികളും നടപ്പിലാക്കാൻ മാത്രമേ ഇത് മിക്കവാറും ഉപയോഗപ്രദമാകൂ. മിക്ക കേസുകളിലും, CSS + HTML എന്നിവയുടെ സംയോജനം മതിയാകും, പ്രത്യേകിച്ചും ഇപ്പോൾ മെനുവിനുള്ള പ്രധാന ആവശ്യകതകൾ സൗകര്യവും വേഗത്തിലുള്ള ലോഡിംഗ് വേഗതയുമാണ്.

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

ഒരു വെബ്‌സൈറ്റിനായി തിരശ്ചീനമായ ഡ്രോപ്പ്-ഡൗൺ മെനുകളുടെ മറ്റേതെങ്കിലും രസകരമായ ആധുനിക നിർവ്വഹണങ്ങൾ നിങ്ങൾക്കറിയാമെങ്കിൽ, അഭിപ്രായങ്ങളിൽ ലിങ്കുകൾ അയയ്ക്കുക.

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

ആദ്യം, ഞങ്ങളുടെ തിരശ്ചീന മെനുവിലെ ഓരോ ഇനത്തിനും ഒരു ടാഗ് ഉപയോഗിച്ച് ലിസ്റ്റ് ഇനങ്ങൾ സൃഷ്ടിക്കേണ്ടതുണ്ട്. ഒരു ഉപമെനു സൃഷ്‌ടിക്കുന്നതിന്, രക്ഷിതാവിനുള്ളിൽ നിങ്ങൾ മറ്റൊരു ചൈൽഡ് ലിസ്റ്റ് ചേർക്കേണ്ടതുണ്ട്.

തുടക്കത്തിൽ, മെനു ലംബമായി കാണപ്പെടുന്നു, ഇത് പരിഹരിക്കാൻ ഞങ്ങൾ ചില ശൈലികൾ എഴുതുകയും ഇൻഡന്റുകൾ, ബോർഡറുകൾ, പശ്ചാത്തല വർണ്ണം എന്നിവ എഡിറ്റുചെയ്യുകയും കോണുകൾ ചുറ്റുകയും ചെയ്യും. ഞങ്ങൾ വീതിയും ഉയരവും ഉറപ്പിക്കും. ഫ്ലോട്ട് ഉപയോഗിച്ച് ഞങ്ങൾ മെനു ഘടകങ്ങൾ ഇടത്തേക്ക് വിന്യസിക്കും: ഇടത് (അതിനാൽ നാവിഗേഷൻ ഒരു തിരശ്ചീന ഘടന നേടുന്നു).

മെനു, .menu ul, .menu li, .menu a (മാർജിൻ: 0; പാഡിംഗ്: 0; ബോർഡർ: ഒന്നുമില്ല; ഔട്ട്‌ലൈൻ: ഒന്നുമില്ല; ) .മെനു (ഉയരം: 40px; വീതി: 505px; പശ്ചാത്തലം: #4c4e5a; പശ്ചാത്തലം: - webkit-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); പശ്ചാത്തലം: -moz-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); പശ്ചാത്തലം: -o-linear-gradient( മുകളിൽ, #5c5e6a 0%,#3c3d44 100%); പശ്ചാത്തലം: -ms-ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, #5c5e6a 0%,#3c3d44 100%); പശ്ചാത്തലം: ലീനിയർ-ഗ്രേഡിയന്റ്(മുകളിൽ, #5c5e6a 0%,#3c3d44 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; ബോർഡർ-റേഡിയസ്: 4px; ) .മെനു ലി (സ്ഥാനം: ബന്ധു; ലിസ്റ്റ്-സ്റ്റൈൽ: ഒന്നുമില്ല; ഫ്ലോട്ട്: ഇടത്; ഡിസ്പ്ലേ: ബ്ലോക്ക് ; ഉയരം: 40px;)

ഡ്രോപ്പ്-ഡൌൺ ലിസ്റ്റ് മറച്ചുവെച്ച് കുറച്ച് സമയത്തേക്ക് ഇനിപ്പറയുന്ന ശൈലി എഴുതാം. ഇത് എഡിറ്റിംഗ് എളുപ്പമാക്കും.

അടുത്തതായി, ഫോണ്ട് തരം, നിറങ്ങൾ, പാഡിംഗ് മുതലായവ പോലുള്ള ചില അടിസ്ഥാന CSS പ്രോപ്പർട്ടികൾ ചേർക്കുന്ന ശൈലികൾ ഞങ്ങൾ എഴുതും. തുടർന്ന് ഞങ്ങൾ വാചകത്തിനും വർണ്ണ സംക്രമണങ്ങൾക്കും ഒരു നിഴൽ ചേർക്കും, അവിടെ നിറം തൽക്ഷണം മാറുന്നില്ല, ചില ഇടവേളകളിൽ സുഗമമായ പ്രഭാവം സൃഷ്ടിക്കും. ഒരു ലിങ്ക് സെപ്പറേറ്റർ സൃഷ്‌ടിക്കുന്നതിന്, ഇടത്തോട്ടും വലത്തോട്ടും ഒരു ബോർഡർ ചേർക്കാം, തുടർന്ന് ആദ്യ ലിങ്കിൽ നിന്ന് ഇടത് ബോർഡറും അവസാന ലിങ്കിൽ നിന്ന് വലത് ബോർഡറും നീക്കം ചെയ്യാം. നിങ്ങൾ മെനുവിൽ ഹോവർ ചെയ്യുമ്പോൾ, നിറം മാത്രം മാറും.

മെനു ലി എ ( ഡിസ്പ്ലേ: ബ്ലോക്ക്; പാഡിംഗ്: 0 14px; മാർജിൻ: 6px 0; ലൈൻ-ഉയരം: 28px; ടെക്സ്റ്റ്-ഡെക്കറേഷൻ: ഒന്നുമില്ല; ബോർഡർ-ഇടത്: 1px സോളിഡ് #494942; ബോർഡർ-വലത്: 1px സോളിഡ് #4f5058; ഫോണ്ട്- കുടുംബം: Helvetica, Arial, sans-serif; ഫോണ്ട്-വെയ്റ്റ്: ബോൾഡ്; ഫോണ്ട്-സൈസ്: 13px; നിറം: #f4f4f4; ടെക്സ്റ്റ്-ഷാഡോ: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : നിറം .3s ഈസ്-ഇൻ-ഔട്ട്; -moz-ട്രാൻസിഷൻ: നിറം .3s ഈസ്-ഇൻ-ഔട്ട്; -o-ട്രാൻസിഷൻ: നിറം .3s ഈസ്-ഇൻ-ഔട്ട്; പുറത്ത് ഹോവർ > a (നിറം: #9fde63; )

ഒന്നാമതായി, രണ്ടാം ഘട്ടത്തിൽ ഞങ്ങൾ ചേർത്ത കോഡിന്റെ ഈ വരി നീക്കം ചെയ്യാം.

മെനു ഉൽ (പ്രദർശനം: ഒന്നുമില്ല; )

ഇപ്പോൾ ഞങ്ങൾ ഉപമെനുവിനുള്ള ശൈലി എഡിറ്റ് ചെയ്യും. മെനു ഇനത്തിന്റെ മുകളിൽ 40px ഉം ഇടതുവശത്ത് 0px ഉം ഉള്ള ഒരു ഉപമെനു പൊസിഷനിംഗ് ചേർക്കുകയും താഴെ വൃത്താകൃതിയിലുള്ള കോണുകൾ ചേർക്കുകയും ചെയ്യാം. ഫേഡ് ഇൻ/ഔട്ട് ഇഫക്റ്റ് സൃഷ്‌ടിക്കുന്നതിന് അതാര്യത പൂജ്യമായി സജ്ജീകരിച്ച് ഹോവറിൽ 1 ആക്കി മാറ്റാം. മുകളിലേക്കും താഴേക്കും സ്ലൈഡ് ഇഫക്റ്റിനായി, ഡ്രോപ്പ്ഡൗൺ മറയ്‌ക്കുമ്പോൾ ലിസ്റ്റ് ഉയരം 0px ആയും ഡ്രോപ്പ്‌ഡൗണിന് മുകളിൽ ഹോവർ ചെയ്യുമ്പോൾ 36px ആയും ഞങ്ങൾ സജ്ജീകരിക്കണം.

മെനു ഉൽ (സ്ഥാനം: കേവലം; മുകളിൽ: 40px; ഇടത്: 0; അതാര്യത: 0; പശ്ചാത്തലം: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; അതിർത്തി- ആരം: 0 0 4px 4px; -webkit-transition: opacity .3s ഈസ് .1s; -moz-transition: opacity .3s ഈസ് .1s; -o-transition: opacity .3s ഈസ് .1s; -ms-transition. 3s ഈസ് .1s; സംക്രമണം: അതാര്യത .3s ഈസ് .1s; .മെനു ലി:ഹോവർ > ul (ഒപാസിറ്റി: 1; ) .മെനു ഉൾ ലി (ഉയരം: 0; ഓവർഫ്ലോ: മറച്ചിരിക്കുന്നു; പാഡിംഗ്: 0; -വെബ്കിറ്റ്-ട്രാൻസിഷൻ: ഉയരം .3s അനായാസം .1s; -moz-സംക്രമണം: ഉയരം .3s ഈസ് .1s; -o-ട്രാൻസിഷൻ: ഉയരം .3s ഈസ് .1s; -ms-ട്രാൻസിഷൻ: ഉയരം .3s ഈസ് .1s; സംക്രമണം: ഉയരം .3s ഈസ് . 1 സെ; ) .മെനു ലി: ഹോവർ > ഉൾ ലി (ഉയരം: 36 പിക്സൽ; ഓവർഫ്ലോ: ദൃശ്യം; പാഡിംഗ്: 0; )

ക്ലിക്ക് ചെയ്യാവുന്ന ഡ്രോപ്പ്-ഡൗൺ മെനുവിന്റെ വീതി 100px ആയി സജ്ജമാക്കുക. ഓരോ ലിങ്കിനും ശേഷം അവയെ വേർപെടുത്താൻ ഞാൻ ഒരു ബോർഡർ ചേർത്തു. അവസാന ലിങ്കിലെ ബോർഡർ ഞങ്ങൾ നീക്കം ചെയ്യും.

മെനു ul li a (വീതി: 100px; പാഡിംഗ്: 4px 0 4px 40px; മാർജിൻ: 0; ബോർഡർ: ഒന്നുമില്ല; ബോർഡർ-ബോട്ടം: 1px സോളിഡ് #464649; ) .മെനു ul li:last-child a (ബോർഡർ: ഒന്നുമില്ല; )

ഒരു തിരശ്ചീന CSS മെനു പൂർത്തിയാക്കാൻ, ഓരോ ഡ്രോപ്പ്-ഡൗൺ ഉപമെനുവിനും നിങ്ങൾ ഒരു ഐക്കൺ ചേർക്കേണ്ടതുണ്ട്. ഇത് ചെയ്യുന്നതിന്, ഓരോ ഉപമെനസിനും ഞങ്ങൾ ഒരു ഇഷ്‌ടാനുസൃത ക്ലാസ് സൃഷ്‌ടിക്കുകയും ഒരു പശ്ചാത്തല ചിത്രം ചേർക്കുകയും ചെയ്യും.

മെനു എ.ഡി (പശ്ചാത്തലം: url(docs.png) നോ-ആവർത്തന 6px സെന്റർ; ) .മെനു a.m (പശ്ചാത്തലം: url(bubble.png) നോ-ആവർത്തന 6px കേന്ദ്രം; ) .മെനു a.s (പശ്ചാത്തലം: url(arrow.png) ഇല്ല -6px മധ്യത്തിൽ ആവർത്തിക്കുക;)

CSS3 ശൈലികൾ ഉപയോഗിച്ചും അത് ഉപയോഗിക്കാതെയും ഞങ്ങൾ ഒരു തിരശ്ചീന ഡ്രോപ്പ്-ഡൗൺ മെനു വിജയകരമായി സൃഷ്ടിച്ചു, അത് സാധ്യമാണെങ്കിലും. നിങ്ങൾക്ക് എന്തെങ്കിലും ചോദ്യങ്ങളുണ്ടെങ്കിൽ, അഭിപ്രായങ്ങളിൽ എന്നെ അറിയിക്കുക.

(ഡൗൺലോഡുകൾ: 398)

ഒരു തിരശ്ചീന മെനു കേന്ദ്രീകരിക്കുക എന്നത് ബുദ്ധിമുട്ടുള്ള കാര്യമാണ്, പ്രത്യേകിച്ച് CSS-ലേക്ക് പുതിയവർക്ക്. പരിഹാരങ്ങൾക്കായുള്ള തിരയൽ വളരെ പരിമിതമായ രീതികളിലേക്ക് നയിക്കുന്നു, അവയിൽ മിക്കതും CSS തന്ത്രങ്ങൾ, JavaScript അല്ലെങ്കിൽ എല്ലാ ബ്രൗസറുകളും പിന്തുണയ്ക്കാത്ത നിലവാരമില്ലാത്ത നിയമങ്ങളുടെ ഉപയോഗം എന്നിവയെ ആശ്രയിക്കുന്നു. ഈ ട്യൂട്ടോറിയലിൽ, എല്ലാ ബ്രൗസറുകളിലും സാധാരണ CSS നിയമങ്ങൾ മാത്രം ഉപയോഗിക്കുന്ന ഒരു തിരശ്ചീന മെനു കേന്ദ്രീകരിക്കുന്നതിനുള്ള ഒരു രീതിയിലൂടെ ഞങ്ങൾ കടന്നുപോകും.

ഈ നിരയിൽ കേന്ദ്രീകരിച്ചിരിക്കുന്ന ഒരു തിരശ്ചീന മെനു ചുവടെയുണ്ട്, അതിൽ രണ്ടാമത്തെ ടാബ് സജീവമാണ്. മെനു എല്ലായ്‌പ്പോഴും കേന്ദ്രീകൃതവും പ്രവർത്തനക്ഷമവുമാണെന്ന് ഉറപ്പാക്കാൻ നിങ്ങൾക്ക് ബ്രൗസർ വിൻഡോയുടെയോ പേജിന്റെയോ വലുപ്പം മാറ്റാൻ ശ്രമിക്കാവുന്നതാണ്.

ഡെമോ പേജിൽ നിങ്ങൾക്ക് തിരശ്ചീനമായി കേന്ദ്രീകരിച്ചിരിക്കുന്ന മെനുവിനുള്ള നിരവധി ഡിസൈൻ ഓപ്ഷനുകൾ കാണാം. അവയിലേതെങ്കിലും നിങ്ങളുടെ പ്രോജക്റ്റുകളിൽ ഉപയോഗിക്കാം.

ഈ ട്യൂട്ടോറിയലിൽ കാണിച്ചിരിക്കുന്ന എല്ലാ മെനുകളും ലളിതമായ ഒരു ഘടനയാണ് ഉപയോഗിക്കുന്നത്. ഇത് ഒരു ഘടകത്തിൽ സ്ഥാപിച്ചിട്ടുള്ള ലിങ്കുകളുടെ ക്രമരഹിതമായ ഒരു സാധാരണ പട്ടികയാണ് ഡിവി.

ആദ്യ ബുക്ക്മാർക്ക്
രണ്ടാമത്തെ ബുക്ക്മാർക്ക്
മൂന്നാമത്തെ ടാബ്
നാലാമത്തെ ടാബ്

മെനു കേന്ദ്രീകരിക്കാൻ ഉപയോഗിക്കുന്ന പൂർണ്ണമായ CSS കോഡ് ചുവടെയുണ്ട്. പ്രവർത്തന തത്വത്തിന്റെ വിശദീകരണം പാഠത്തിൽ പിന്നീട് നൽകിയിരിക്കുന്നു.

#centeredmenu (float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; ) #centeredmenu ul ( clear:left; float:left; list-style :none; margin:0; padding:0; position:relative; left:50%; text-align:center; ) #centeredmenu ul li ( display:block; float:left; list-style:none; margin:0; പാഡിംഗ്:0; സ്ഥാനം:ബന്ധു; വലത്:50%; ) #സെന്റർഡ്മെനു ഉൾ ലി എ (ഡിസ്പ്ലേ:ബ്ലോക്ക്; മാർജിൻ:0 0 0 1px; പാഡിംഗ്:3px 10px; പശ്ചാത്തലം:#ddd; നിറം:#000; ടെക്സ്റ്റ്-അലങ്കാരം: ഒന്നുമില്ല; ലൈൻ-ഉയരം:1.3em; ) #centeredmenu ul li a:hover (പശ്ചാത്തലം:#369; color:#fff; ) #centeredmenu ul li a.active, #centeredmenu ulli a.active:hover (color:# fff; പശ്ചാത്തലം:#000; ഫോണ്ട്-ഭാരം:ബോൾഡ്; )

ഫ്ലോട്ടിംഗ് ബ്ലോക്ക് മൂലകങ്ങളുടെ ആപേക്ഷിക സ്ഥാനത്തെ അടിസ്ഥാനമാക്കിയുള്ളതാണ് രീതിയുടെ പ്രവർത്തനം. ആദ്യം, സ്ഥാനചലനത്തിനൊപ്പം മൂലകങ്ങളുടെ വലുപ്പം എങ്ങനെ മാറുന്നുവെന്ന് നോക്കാം.

ഘടകം ഡിവി(ബ്ലോക്ക്) സ്ഥാനചലനം കൂടാതെ അതിന് ലഭ്യമായ മുഴുവൻ വീതിയിലും നീട്ടുന്നു.

എന്നാൽ നമ്മൾ ഡിവിയെ ഇടതുവശത്തേക്ക് നീക്കിയാൽ, അതിന്റെ ഉള്ളടക്കത്തിന് അനുയോജ്യമായി അത് സ്വയമേവ ചുരുങ്ങും. ഈ മെനു കേന്ദ്രീകൃത രീതി നടപ്പിലാക്കുന്നതിന് കംപ്രഷൻ പ്രധാനമാണ്. മെനു ശരിയായ സ്ഥാനത്തേക്ക് നീക്കാൻ ഇത് നിങ്ങളെ സഹായിക്കുന്നു.

നമുക്ക് ഒരു സാധാരണ ഇടത് വിന്യസിച്ച മെനു എടുത്ത് അത് ഘട്ടം ഘട്ടമായി റീമേക്ക് ചെയ്യാം. വ്യക്തതയ്ക്കായി, ഇനങ്ങൾ വ്യത്യസ്ത നിറങ്ങളിൽ വർണ്ണിച്ചിരിക്കുന്നു, അതിനാൽ എവിടെയാണ് പോകുന്നതെന്ന് പെട്ടെന്ന് വ്യക്തമാകും.

ഇനിപ്പറയുന്ന പോയിന്റുകൾ ദയവായി ശ്രദ്ധിക്കുക:

ഘടകം കേന്ദ്രീകൃത മെനു ഡിവി(നീല ദീർഘചതുരം) ഇടതുവശത്തേക്ക് ഓഫ്‌സെറ്റ് ചെയ്‌തിരിക്കുന്നു, പക്ഷേ 100% വീതിയുണ്ട്, അതിനാൽ ഇത് മുഴുവൻ പേജിലുടനീളം നീട്ടിയിരിക്കുന്നു.
ഘടകം ഉൾ(പിങ്ക് ദീർഘചതുരം) മൂലകത്തിനുള്ളിലാണ് കേന്ദ്രീകൃത മെനു ഡിവിഇടതുവശത്തേക്ക് നീങ്ങുകയും ചെയ്യുന്നു. ഇതിനർത്ഥം അത് അതിന്റെ ഉള്ളടക്കത്തിന്റെ വീതിയിലേക്ക്, അതായത്, എല്ലാ ബുക്ക്മാർക്കുകളുടെയും മൊത്തം വീതിയിലേക്ക് കംപ്രസ് ചെയ്യപ്പെടും എന്നാണ്.
എല്ലാ ലി മൂലകങ്ങളും (പച്ച ദീർഘചതുരങ്ങൾ) മൂലകത്തിനുള്ളിലാണ് ഉൾഇടത്തോട്ട് നീങ്ങുക. അങ്ങനെ, അവ അവയിലെ ലിങ്കുകളുടെ വലുപ്പത്തിലേക്ക് കംപ്രസ് ചെയ്യുകയും ഒരു തിരശ്ചീന രേഖയിൽ നിരത്തുകയും ചെയ്യുന്നു.
ഓരോ ലിങ്കിലും (ഓറഞ്ച് ദീർഘചതുരങ്ങൾ) ബുക്ക്മാർക്ക് ടെക്സ്റ്റ് പ്രദർശിപ്പിക്കും: ബുക്ക്മാർക്ക് 1, ബുക്ക്മാർക്ക് 2, തുടങ്ങിയവ.

അപ്പോൾ ഞങ്ങൾ ഘടകം ഓഫ്സെറ്റ് ചെയ്യുന്നു ഉൾ 50% വലത്തേക്ക് സ്ഥാനം:ബന്ധു; . ഈ വ്യവസ്ഥകളിൽ ഒരു മൂലകം ശതമാനം കൊണ്ട് ഓഫ്സെറ്റ് ചെയ്യുമ്പോൾ, അതിൽ അടങ്ങിയിരിക്കുന്ന മൂലകങ്ങളുടെ മൊത്തം വീതി അതിന്റെ വീതിയല്ല എന്നത് ഓർത്തിരിക്കേണ്ടത് പ്രധാനമാണ്. ഞങ്ങളുടെ കാര്യത്തിൽ, ഓഫ്‌സെറ്റ് ബ്രൗസർ വിൻഡോയുടെ പകുതിയിൽ (അല്ലെങ്കിൽ ഡിസ്പ്ലേയ്ക്ക് ലഭ്യമായ ഇടം) സംഭവിക്കുന്നു. തൽഫലമായി, ഞങ്ങളുടെ മെനു വിൻഡോയുടെ മധ്യത്തിൽ ആരംഭിക്കുകയും ഭാഗികമായി അതിന്റെ അതിരുകൾക്കപ്പുറത്തേക്ക് വ്യാപിക്കുകയും ചെയ്യുന്നു. പിന്നെ നമുക്ക് അടുത്ത ഘട്ടത്തിലേക്ക് കടക്കാം.

എല്ലാ ഘടകങ്ങളും നീക്കുക മാത്രമാണ് അവശേഷിക്കുന്നത് li 50% അവശേഷിക്കുന്നു. ഇത് ഞങ്ങളുടെ ഉൽ മൂലകത്തിന്റെ (മെനു അടങ്ങിയിരിക്കുന്ന കണ്ടെയ്‌നർ) വീതിയുടെ 50% ആണ്. അങ്ങനെ, ബുക്ക്മാർക്കുകൾ കൃത്യമായി വിൻഡോയുടെ മധ്യഭാഗത്തേക്ക് മാറ്റുന്നു.

ഈ കേന്ദ്രീകൃത രീതി ഉപയോഗിക്കുമ്പോൾ, ഓർമ്മിക്കേണ്ട നിരവധി പ്രധാന പോയിന്റുകൾ ഉണ്ട്:

മൂലകം മുതൽ ഉൾഭാഗികമായി വിൻഡോയ്ക്ക് അപ്പുറത്തേക്ക് വ്യാപിക്കുന്നു, ഇത് സ്ക്രോൾ ബാറുകൾ പ്രദർശിപ്പിക്കുന്നതിന് കാരണമാകുന്നു. അതിനാൽ, നിങ്ങൾ ഓവർഫ്ലോ: മറഞ്ഞിരിക്കുന്ന; നിയമം ഉപയോഗിക്കേണ്ടതുണ്ട്. മൂലകത്തിന് കേന്ദ്രീകൃത മെനു ഡിവി. അങ്ങനെ, മൂലകത്തിന്റെ നീണ്ടുനിൽക്കുന്ന ഭാഗം ഡിവിഛേദിക്കപ്പെടും.
മൂലകം മുതൽ ഉൾബുക്ക്‌മാർക്കുകളിലേക്ക് വിന്യസിച്ചിട്ടില്ല, അതിനായി നിങ്ങൾക്ക് വിഷ്വൽ ശൈലികളൊന്നും ഉപയോഗിക്കാൻ കഴിയില്ല. പശ്ചാത്തല വർണ്ണവും ബോർഡറും ഇല്ലാതെ ul ഘടകം വിടുക, അങ്ങനെ അത് പൂർണ്ണമായും അദൃശ്യമാകും. ബുക്ക്മാർക്കുകൾക്കുള്ള ശൈലികൾ ഘടകങ്ങൾക്ക് മാത്രമേ ഉപയോഗിക്കാവൂ li.
ആദ്യത്തേയും അവസാനത്തേയും ബുക്ക്മാർക്കുകൾക്കായി നിങ്ങൾക്ക് പ്രത്യേക ശൈലികൾ സജ്ജീകരിക്കണമെങ്കിൽ, ആദ്യത്തേയും അവസാനത്തേയും ഘടകങ്ങൾക്കായി നിങ്ങൾ ഒരു ക്ലാസ് ചേർക്കേണ്ടതുണ്ട് li, അതിനാൽ നിങ്ങൾക്ക് അവയെ വ്യക്തിഗതമായി സ്റ്റൈൽ ചെയ്യാൻ കഴിയും.

നിർദ്ദിഷ്ട പരിഹാരം എല്ലാ ബ്രൗസറുകൾക്കും അനുയോജ്യമാണ്, JavaScript ഉപയോഗിക്കുന്നില്ല, വലുപ്പം മാറ്റാവുന്ന ടെക്സ്റ്റിനെ പിന്തുണയ്ക്കുന്നു.