Neatkarīgi no tā, vai jūsu vietnes navigācijas izvēlne ir horizontāla rinda pāri augšai vai vertikāla rinda sānos, tas ir tikai saraksts. Projektējot tīmekļa navigācija, navigācijas izvēlne ir saišu grupa. Programmējot navigāciju, izmantojot XHTML + CSS, varat izveidot nelielu lejupielādējamu (XHTML) un viegli pielāgojamu (CSS) izvēlni.
Darba sākšana
Lai izveidotu navigācijas sarakstu, jums jāizmanto saraksts. Tas var būt standarta nesakārtots saraksts, kas identificēts kā navigācija. Piemēram:
- Mājas
- Produkti
- Pakalpojumi
- Sazinies ar mums
Aplūkojot HTML, saitei Sākums ir ID.
tu esi šeit
Tas ļauj jums izveidot izvēlni, kas identificē jūsu lasītāju pašreizējo atrašanās vietu. Pat ja jūs pašlaik neplānojat savā vietnē izmantot šāda veida vizuālo norādi, varat iekļaut šo informāciju. Ja jūs nolemjat pievienot norādi vēlāk, vietnes sagatavošanai būs mazāk kodēšanas.
Bez neviena CSS stils, šī XHTML izvēlne izskatās kā standarta nesakārtots saraksts. Ir lodes, un saraksta vienumi ir nedaudz ievilkti. Lietojot
viettura saites, vairumā pārlūkprogrammu saites netiek rādītas kā noklikšķināmas (pasvītrotas un zilā krāsā). Ielīmējot HTML Web lapā, navigācija izskatās šādi:- Mājas
- Produkti
- Pakalpojumi
- Sazinies ar mums
Tas nelīdzinās ēdienkartei. Tomēr, pievienojot dažus CSS stilus sarakstam, varat izveidot izvēlni, kas jūs lepojas.
Ja vēlaties saņemt vairāk vertikālo izvēlņu piemēru, veiciet tīmekļa meklēšanu, lai veiktu šādas darbības:
- Veidota vertikāla izvēlne
- Vertikālās izvēlnes pamata veidne
- Stilēta vertikālā izvēlne ar Jūs esat šeit
- Vertikālās izvēlnes pamata veidne ar Jūs esat šeit
Vertikālās navigācijas izvēlne
Vertikālās navigācijas izvēlni ir viegli rakstīt, jo tā tiek parādīta tāpat kā parasts saraksts: augšup un lejup. Saraksta vienumi tiek parādīti vertikāli lejup pa lapu.
Veidojot izvēlnes, sāciet no ārpuses un strādājiet. Vispirms izveidojiet navigācijas stilu:
ul # navigācija
Pēc tam pārejiet uz elementiem un saitēm. Vispirms definējiet izvēlnes platumu. Tas nodrošina, ka, ja izvēlnes vienumi ir gari, vienumi nepārspiež pārējo izkārtojumu un nerada horizontālu ritināšanu.
ul # navigation {width: 12em; }
Pēc platuma iestatīšanas strādājiet pie saraksta vienumiem. Tas ļauj iestatīt tādas lietas kā fona krāsas, apmales, teksta izlīdzināšanu un piemales.
ul # navigation li {
saraksta stils: nav;
fona krāsa: # 039;
apmales augšdaļa: cieta 1px # 039;
text-align: pa kreisi;
starpība: 0;
}
Pēc saraksta elementu pamatu iestatīšanas strādājiet ar to, kā saite apgabalā izskatās izvēlne. Vispirms izveidojiet navigācijas stilu:
UL # navigācija LI A
Pēc tam izveidojiet šādu stilu:
A: saite
A: apmeklēja
A: virziet kursoru
A: aktīvs
Saitēm izveidojiet saites par bloka elementu (nevis pēc noklusējuma rindā). Tas liek saitēm aizņemt visu LI vietu un darboties kā rindkopa, padarot saites vieglāk veidojamas kā izvēlnes pogas. Pēc tam noņemiet šo:
pasvītrojums, teksta noformējums: nav; kā
Tādējādi pogas izskatās vairāk kā pogas. Jūsu dizains var būt atšķirīgs.
ul # navigation li a {
displejs: bloks;
teksta noformēšana: nav;
polsterējums: .25em;
apmales apakšdaļa: cieta 1px # 39f;
labā robeža: cieta 1px # 39f;
}
Ar displejs: bloks; iestatīts uz saitēm, var noklikšķināt uz visas izvēlnes vienuma lodziņa, ne tikai uz burtiem. Tas ir labs arī lietojamībai. Iestatiet saites krāsas (saite, apmeklētā, kursora un aktīvā), ja vēlaties, lai saites atšķirtos no noklusējuma zilās, sarkanās un violetās.
a: saite, a: apmeklēta {color: #fff; }
a: virziet kursoru, a: active {color: # 000; }
Varat arī nedaudz pievērst uzmanību kursora stāvoklim, mainot fona krāsu.
a: virziet kursoru {background-color: #fff; }
Horizontālās navigācijas izvēlne
Horizontālo navigācijas izvēlņu izveide ir nedaudz sarežģītāka nekā vertikālās navigācijas izvēlnes, jo jums ir jāatsver fakts, ka HTML saraksti dod priekšroku attēlot vertikāli. Tāpat kā horizontālajā izvēlnē, izveidojiet navigācijas izvēlņu sarakstu:
- Mājas
- Produkti
- Pakalpojumi
- Sazinies ar mums
Lai izveidotu horizontālu izvēlni, rīkojieties tāpat kā ar vertikālo izvēlni. Sāciet ar ārpusi un strādājiet. Lai sāktu navigāciju kreisajā stūrī, iestatiet to ar 0 kreiso malu un polsterējumu un peldiet pa kreisi.
Pierodiet iestatīt platumu tā, lai jūsu izvēlne neaizņemtu vairāk vai mazāk vietas, nekā plānojat. Horizontālajām izvēlnēm tas parasti ir pilns dizaina platums. Jūs varat arī pievienot fona krāsa sarakstā, lai būtu vieglāk lasīt.
ul # navigation {
pludiņš: pa kreisi;
starpība: 0;
polsterējums: 0;
platums: 100%;
fona krāsa: # 039;
}
Horizontālās navigācijas izvēlnes noslēpums ir saraksta vienumos. Saraksta vienumi parasti ir bloķēšanas elementi, kas nozīmē, ka šiem vienumiem pirms un pēc katra ir jauna rindiņa. Pārslēdzot displeju no bloka uz iekļauto, jūs piespiežat saraksta elementus horizontāli izvietoties blakus viens otram.
ul # navigation li {display: inline; }
Apstrādājiet saites tieši tāpat kā vertikālās navigācijas izvēlne, ar vienādām krāsām un teksta apdari. Pievienojiet augšējo apmali, lai iezīmētu pogas, kad lietotājs novieto kursoru virs pogas. Pēc tam noņemiet displejs: bloks; jo tas atkal ievieto līnijas un iznīcina horizontālo izvēlni.
Informācija par atrašanās vietu
Vēl viens HTML aspekts ir šis identifikators:
tu esi šeit
Ja vēlaties mainīt izvēlni, lai norādītu lietotāju pašreizējo atrašanās vietu, izmantojiet šo ID, lai definētu citu fona krāsu vai citu stilu. Pārvietojiet šo atribūta ID uz pareizo izvēlnes vienumu citās lapās, lai pašreizējā lapa vienmēr tiktu izcelta.
Ja saliekat šos stilus savā lapā, varat izveidot horizontālu vai vertikālu izvēlņu joslu, kas darbojas ar jūsu vietni, ir ātri lejupielādējama un viegli atjaunināma. Izmantojot XHTML + CSS, saraksti kļūst par spēcīgu dizaina rīku.
Ja vēlaties saņemt vairāk horizontālo izvēlņu piemēru, meklējiet tīmeklī:
- Veidota horizontāla izvēlne
- Pamata horizontālās izvēlnes veidne
- Veidota horizontāla izvēlne ar Jūs esat šeit
- Pamata horizontālās izvēlnes veidne ar Jūs esat šeit