Soli pa solim
Neatkarīgi no tā, vai navigācijas izvēlne ir horizontāla rinda pāri augšējai malai vai vertikāla rinda uz leju pusi, tas joprojām ir tikai saraksts. Veidojot tīmekļa navigāciju, bieži vien ir viegli aizmirst, ka navigācijas izvēlne ir tikai izcelta saišu grupa. Bet, ja jūs programmējat savu navigāciju, izmantojot XHTML + CSS, jūs varat izveidot izvēlni, kas ir mazs lejupielādei (XHTML) un viegli pielāgojama (CSS).
Darba sākšana
Lai sāktu izstrādāt navigācijas sarakstu, jums jāizmanto saraksts.
Tas var būt standarta neierobežots saraksts, kas ir identificēts kā navigācija:
Ja paskatās uz HTML tuvu, jūs pamanīsiet, ka saitei "Sākums" ir arī jūsu ID. Tas ļaus jums izveidot izvēlni, kas identificē pašreizējo atrašanās vietu jūsu lasītājiem. Pat ja jūs pašlaik neplānojat izmantot šāda veida vizuālo norādi savā vietnē, varat iekļaut šo informāciju. Ja izvēlēsities vēlāk pievienot cilni, jums būs mazāk kodēšanas, lai sagatavotu jūsu vietni.
Bez CSS stila šī XHTML izvēlne izskatās kā standarta neierobežots saraksts. Ir aizzīmes un saraksta vienumi ir nedaudz nošķelti. Tā kā es izmantoju vietņu saites , lielākā daļa pārlūkprogrammu nerādīs saites kā noklikšķināmas (pasvītrotas un zilas). Ja ielīmēsit iepriekš minēto HTML vietni Web lapā, navigācija izskatīsies šādi:
- Mājas
- Produkti
- Pakalpojumi
- Sazinies ar mums
Tas ir diezgan garlaicīgi un neizskatās kā ēdienkarte. Bet ar dažiem CSS stiliem, kas pievienoti sarakstam, varat izveidot izvēlni, kas lepojas ar jums.
Vertikālās navigācijas izvēlne
Vertikālo navigācijas izvēlni ir ļoti viegli ierakstīt, jo tas tiek parādīts tāpat kā parasts saraksts: uz augšu un uz leju.
Saraksta elementi tiek parādīti lapas vertikāli.
Kad es esmu veidošanas izvēlnes, man patīk sākt no ārpuses un strādāt. Ar to es domāju, ka es pirmo stilu ul # navigācijas un pēc tam pāriet uz elementiem, un tad saites utt Tātad, lai šo izvēlni, vispirms jūs definējat izvēlnes platumu. Tas nodrošinās, ka pat tad, ja izvēlnes vienumi ir garš, tie neizslēgs pārējo izkārtojumu vai neradīs horizontālu ritināšanu.
ul # navigācija {width: 12em; }
Tiklīdz esmu iestatījis platumu, es varu spēlēt ar saraksta vienumiem. Tas ļauj man iestatīt lietas (piemēram, lai atbrīvotos no aizzīmēm), fona krāsas, robežas, teksta izlīdzināšanu un maliņas.
ul # navigācija li {
saraksta stils: nav;
fona krāsa: # 039;
border-top: cietais 1px # 039;
teksta izlīdzināšana: pa kreisi;
starpība: 0;
}
Kad esat iestatījis pamatus saraksta vienumiem, kurus jūs varat sākt spēlēt ar to, kā izvēlne izskatās saišu apgabalā. Pirmais stils UL # navigācija LI A un pēc tam A: saite, A: apmeklēta, A: kursorsviras un A: aktīvs (ja vēlaties tos). Attiecībā uz saitēm, man patīk padarīt saites bloķēt elementu (nevis noklusējuma in-line). Tas liek viņiem aizņemt visu LI vietu - un viņi darbojas vairāk kā punkts, kas padara tos vieglāk stilīgi kā izvēlņu pogas. Cita lieta, ko es vienmēr daru, ir noņemt pasvītrojumu (teksta apdare: neviens;); jo tas padara pogas man izskatās vairāk kā pogas.
Bet, protams, jūsu dizains varētu būt atšķirīgs.
ul # navigācija li a {
displejs: bloks;
teksta apdare: nav;
polsterējums: .25em;
border-bottom: cietā 1px # 39f;
robeža-labā: cietā 1px # 39f;
}
Ievērojiet, ka ar displeju: bloks; iestatiet saites, visas izvēlnes vienības lodziņš ir noklikšķināms, nevis tikai burti. Tas ir arī lietderīgi. Ja vēlaties, lai tie atšķirtos no noklusējuma zilā, sarkanā un violetā krāsā, pārliecinieties, vai esat iestatījis saites krāsas (saites, apmeklēja, novietojiet kursoru un aktivizējat).
a: saite, a: apmeklēja {color: #fff; }
a: hover, a: active {color: # 000; }
Arī man patīk piešķirt pārlūkošanas stāvokli mazliet lielāku uzmanību, mainot fona krāsu.
a: hover {fona krāsa: #fff; }
Ja vēlaties vairāk vertikālo izvēlņu piemēri, skatiet zemāk redzamo sarakstu.
- Vertikāla izvēlne
- Pamata vertikālās izvēlnes veidne
- Vertikāla izvēlne, kurā jūs esat šeit
- Bāzes vertikālās izvēlnes veidne ar jums šeit
Horizontālā navigācijas izvēlne
Horizontālās navigācijas izvēlnes izveidošana ir nedaudz sarežģītāka nekā vertikālās navigācijas izvēlnēs, jo jums ir jākompensē fakts, ka HTML saraksti dod priekšroku vertikāli attēlot. Tāpat kā horizontālajā izvēlnē vispirms izveidojiet navigācijas izvēlņu sarakstu :
Lai izveidotu horizontālu izvēlni, rīkojieties tāpat kā vertikālajā izvēlnē. Sāciet ar ārpusi un strādājiet iekšā. Tā kā es vēlos, lai mana navigācija sāktu kreisajā stūrī, es to iestatīju ar 0 kreiso malu un polsterējumu, un es peldos pa kreisi. Jums vajadzētu arī ierasties iestatīt platumu, 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 viss dizaina platums. Es arī pievienoju fona krāsu visam sarakstam, lai to būtu vieglāk lasīt.
ul # navigācija {
pludiņš: pa kreisi;
starpība: 0;
polsterējums: 0;
platums: 100%;
fona krāsa: # 039;
}
Bet horizontālās navigācijas izvēlnes noslēpums ir saraksta vienībās. Saraksta vienumi parasti ir bloku elementi, kas nozīmē, ka tiem būs jauna līnija pirms un pēc katra. Pārslēdzot displeju no bloka uz inline, jūs piespiežat saraksta elementus horizontāli izvietot blakus viens otram.
ul # navigācija li {displejs: inline; }
Es sazinājās ar saitēm tāpat, kā es viņus apstrādāju vertikālajā navigācijas izvēlnē ar tādām pašām krāsām un teksta apdari. Es pievienoju augšējo robežu, lai apzīmētu pogas, kad tās ir novirzītas. Vienīgais, ko es noņēmu, bija displejs: bloks; jo tas atkal atgriezīsies un iznīcinās horizontālo izvēlni.
ul # navigācija li a {
teksta apdare: nav;
polsterējums: .25em 1em;
border-bottom: cietā 1px # 39f;
border-top: cieta 1px # 39f;
robeža-labā: cietā 1px # 39f;
}
a: saite, a: apmeklēja {color: #fff; }
ul # navigācija li a: hover {
fona krāsa: #fff;
krāsa: # 000;
}
Jūs šeit informācija par atrašanās vietu
Cits HTML aspekts ir jūsu identifikators. Ja vēlaties mainīt savu izvēlni, lai norādītu savu lietotāju pašreizējo atrašanās vietu, vienkārši izmantojiet šo ID, lai noteiktu citu fona krāsu vai citu stilu. Pārvietojiet šo ID atribūtu uz pareizo izvēlnes vienumu citās lapās, lai pašreizējā lapa vienmēr būtu izgaismota.
ul # navigācija ## yourehere {fona krāsa: # 09f; }
Ja jūs savā stilā pievienosit šos stilus, varat izveidot horizontālu vai vertikālu izvēlņu joslu, kas darbojas ar jūsu vietni, bet ir ātra lejupielāde un nākotnē to var viegli atjaunināt. Izmantojot XHTML + CSS, jūsu saraksti kļūst par ļoti spēcīgu dizaina rīku.
Ja vēlaties iegūt vairāk horizontālo izvēlņu piemēru, apskatiet sekojošo.
- Stylized horizontālā izvēlne
- Galvenās horizontālās izvēlnes veidne
- Styled horizontālā izvēlne ar jums šeit
- Galvenā horizontālās izvēlnes veidne ar jums šeit