Gwida pass pass
Jekk il-menu ta 'navigazzjoni tiegħek huwiex ringiela orizzontali tul il-quċċata jew ringiela vertikali fin-naħa, għadu biss lista. Meta tfassal in-navigazzjoni tal-web, spiss ikun faċli li tinsa li menu tan-navigazzjoni huwa biss grupp glorified ta 'links. Imma jekk tippjana n-navigazzjoni bl-użu ta 'XHTML + CSS, tista' toħloq menu żgħir biex tniżżel (l-XHTML) u faċli biex tippersonalizza (is-CSS).
Kif tibda
Biex tibda tfassal lista għan-navigazzjoni, għandek bżonn tuża lista.
Jista 'jkun lista standard mhux immarkata li ġiet identifikata bħala n-navigazzjoni:
Jekk tħares mill-qrib lejn l-HTML, tinduna li l-link "Home" għandu wkoll ID ta 'int hawn. Dan jippermettilek li toħloq menu li tidentifika l-post attwali għall-qarrejja tiegħek. Anki jekk ma tippjanax li jkollok dak it-tip ta 'viżiv viżibbli fis-sit tiegħek issa, tista' tinkludi dik l-informazzjoni. Jekk tiddeċiedi li żżid il-buttuna aktar tard, ikollok inqas kodifikazzjoni biex tipprepara s-sit tiegħek.
Mingħajr xi grafika CSS , dan il-menu XHTML jidher bħal lista standard mhux immarkata. Hemm balal u l -oġġetti tal-lista huma kemmxejn indentati. Minħabba li qed nagħmel użu minn links ta 'placeholder , il-biċċa l-kbira tal-browsers ma jurux il-links bħala ikklikkja (enfasizzat u bl-ikħal). Jekk inti paste fl-HTML t'hawn fuq f'websajt, in-navigazzjoni tiegħek se tidher bħal din:
- Dar
- Prodotti
- Servizzi
- Ikkuntatjana
Dan huwa pjuttost boring u ma jidhirx ħafna bħal menu. Imma bi ftit stili CSS miżjuda mal-lista, tista 'toħloq menu li sirt kburi.
Menu ta 'Navigazzjoni Vertikali
Menu ta 'navigazzjoni vertikali hija faċli ħafna biex tikteb għax turi l-istess mod bħal lista normali:' il fuq u 'l isfel.
L-oġġetti tal-lista juru vertikalment il-paġna.
Meta jien menus tal-grafika, nixtieq nibda minn barra u naħdem. Permezz ta 'dan, nirreferi għall-istil tal-ewwel l-ul # navigazzjoni u mbagħad niċċaqlaq għall-elementi li u mbagħad ir-rabtiet, eċċ Allura għal dan il-menu, l-ewwel inti tiddefinixxi l-wisa 'tal-menu. Dan jiżgura li anki jekk l-oġġetti tal-menu huma twal, ma jimbuttawx il-kumplament tat-tqassim jew jikkawżaw scrolling orizzontali.
ul # navigazzjoni {wisa ': 12em; }
Ladarba sibt il-wisa ', nista' nilgħab mal-oġġetti tal-lista. Dan jippermettili li niffukaw affarijiet simili (biex jeħles mill-balal), kuluri fl-isfond, fruntieri, allinjament tat-test, u marġini.
ul # navigazzjoni li {
list-style: xejn;
kulur fl-isfond: # 039;
top tal-fruntiera: solidu 1px # 039;
text-align: left;
marġni: 0;
}
Ladarba tkun waqqfet il-punti bażiċi għall-oġġetti tal-lista tista 'tibda tilgħab ma' kif il-menu tidher fiż-żona tal-links. L-ewwel stil, in-navigazzjoni UL # A u mbagħad ir-rabta A: A: miżjura, A: imbagħad ma ', u A: attiva (jekk tridhom). Għar-rabtiet, jien nagħmel il-links element block (minflok il-default in-line). Dan jġiegħelhom jieħdu l-ispazju kollu tal-LI - u huma jaġixxu aktar bħal paragrafu, li jagħmilhom eħfef għall-istil bħala buttuni tal-menù. Il-ħaġa oħra li jien dejjem nagħmel hija li tneħħi l-enfasi (test-dekorazzjoni: xejn;), Peress li dan jagħmel il-buttuni tħares aktar bħal buttuni għalija.
Iżda ovvjament, id-disinn tiegħek jista 'jkun differenti.
ul # navigazzjoni li a {
wiri: blokka;
dekorazzjoni tat-test: ħadd;
ikkuttunar: .25em;
qiegħ tal-qiegħ: solidu 1px # 39f;
dritt tal-fruntiera: solidu 1px # 39f;
}
Avviż li bil-wiri: blokka; Imwaqqaf fuq il-links, il-kaxxa kollha tal-oġġett tal-menu tista 'tintgħamel clickable, mhux biss l-ittri. Dan huwa wkoll tajjeb għall-użabilità. Kun żgur li tissettja l -kuluri tal-link (link, miżjura, imqabbża u attiva) jekk trid li tkun differenti mill-default blu, aħmar u vjola.
a: link, a: miżjur {kulur: #fff; }
a: il-qlib, a: attiv (kulur: # 000; }
Nixtieq ukoll nagħti ftit aktar attenzjoni lill- istat li qieghed jixbah billi tbiddel il-kulur ta 'l-isfond.
a: hover {background-color: #fff; }
Jekk tixtieq aktar eżempji ta 'menus vertikali, ikkonsulta l-lista hawn taħt.
- Menu Vertikali Styled
- Mudell Bażiku ta 'Menu Vertikali
- Menu vertikali styled miegħek hawn
- Mudell Bażiku ta 'Menu Vertikali miegħek Int Hawnhekk
Menu ta 'Navigazzjoni Oriġinali
Il-ħolqien ta 'menus ta' navigazzjoni orizzontali huwa kemmxejn iktar diffiċli mill-menus ta 'navigazzjoni vertikali għax trid tikkumpensa l-fatt li l-listi HTML jippreferu juri b'mod vertikali. Bħal fil-menu orizzontali, l-ewwel toħloq il -lista tal-menu tan - navigazzjoni tiegħek:
Biex toħloq menu orizzontali, taħdem l-istess bħalma għamilt bil-menu vertikali. Ibda bil-barra u taħdem. Peress li rrid li n-navigazzjoni tiegħi tibda fil-kantuniera tax-xellug, jien waħħalha b'marġni tax-xellug 0 u ikkuttunar, u jien niċċarjah lejn ix-xellug. Għandek ukoll tieħu l-vizzju li tissettja l-wisa 'sabiex il-menu tiegħek ma jkollux aktar jew inqas spazju milli għandek il-ħsieb. Għal menus orizzontali, dan normalment ikun il-wisa 'sħiħ tad-disinn. I żied ukoll kulur fl-isfond mal-lista sħiħa biex tagħmilha aktar faċli biex tinqara.
ul # navigazzjoni {
float: left;
marġni: 0;
padding: 0;
wisa ': 100%;
kulur fl-isfond: # 039;
}
Imma s-sigriet tal-menu tan-navigazzjoni orizzontali huwa fil-punti tal-lista. L-oġġetti tal-lista huma normalment elementi ta 'blokk, li jfisser li se jkollhom linja ġdida mqiegħda qabel u wara kull waħda. Billi taqleb il-wiri minn blokk għal ieħor, għandek tolqot l-elementi tal-lista biex tlaqqa 'ħdejn xulxin orizzontalment.
ul # navigation li {display: inline; }
Jiena ttrattajt il-links eżattament bħal I ittrattahom fil-menu ta 'navigazzjoni vertikali, bl-istess kuluri u dekorazzjoni tat-test. I żied il-fruntiera ta 'fuq biex tiddelinea l-buttuni meta jittajpja. L-unika ħaġa li ridt kienet il-wiri: blokk; minħabba li dan ser ipoġġi l-linji ġodda lura u jeqred il-menu orizzontali.
ul # navigazzjoni li a {
dekorazzjoni tat-test: ħadd;
ikkuttunar: .25em 1em;
qiegħ tal-qiegħ: solidu 1px # 39f;
top fuq il-fruntiera: solidu 1px # 39f;
dritt tal-fruntiera: solidu 1px # 39f;
}
a: link, a: miżjur {kulur: #fff; }
ul # navigation li a: hover {
sfond kulur: #fff;
kulur: # 000;
}
Int qiegħed hawn Informazzjoni dwar il-Post
Aspett ieħor ta 'l-HTML huwa l-identifikatur youarehere. Jekk trid timmodifika l-menu tiegħek biex tindika l-post attwali tal-utenti tiegħek, sempliċement tuża din l-ID biex tiddefinixxi kulur tal-isfond differenti jew stil ieħor. Mexxi dak l-attribut ta 'l-ID għall-oġġett korrett tal-menu fuq paġni oħra sabiex il-paġna kurrenti tkun dejjem enfasizzata.
ul # navigation li # youarehere a {background-color: # 09f; }
Jekk tpoġġi dawn l-istili flimkien fuq il-paġna tiegħek, tista 'toħloq bar tal-menu orizzontali jew vertikali li taħdem mas-sit tiegħek imma hija ta' malajr biex tniżżel u faċli ħafna biex taġġorna fil-futur. Bl-użu ta 'XHTML + CSS dawriet il-listi tiegħek f'għodda qawwija ħafna għad-disinn.
Jekk tixtieq aktar eżempji ta 'menus orizzontali, ikkonsulta dan li ġej.
- Menu Stilizzata orizzontali
- Mudell Bażiku tal-Menu Orizzontali
- Menu orizzontali styled miegħek hawn
- Mudell bażiku tal-Menu Orizzontali miegħek hawn