'N stap-vir-stap gids
Of jou navigasiekieslys 'n horisontale ry oor die bokant of 'n vertikale ry langs die kant is, is nog steeds net 'n lys. By die ontwerp van webnavigasie is dit dikwels maklik om te vergeet dat 'n navigasiekieslys net 'n verheerlikte groep skakels is. Maar as jy jou navigering met XHTML + CSS programmeer, kan jy 'n spyskaart skep wat klein is om af te laai (die XHTML) en maklik om te pas (die CSS).
Aan die gang kom
Om te begin met die ontwerp van 'n lys vir navigasie, moet jy 'n lys gebruik.
Dit kan 'n standaard ongeordende lys wees wat as die navigasie geïdentifiseer is:
As jy noukeurig na die HTML kyk, sal jy sien dat die "Tuis" skakel ook 'n ID van jou het. Dit sal jou toelaat om 'n spyskaart te skep wat die huidige ligging vir jou lesers identifiseer. Selfs as jy nie van plan is om daardie soort visuele cue op jou webwerf te hê nie, kan jy daardie inligting insluit. As jy besluit om die cue later by te voeg, sal jy minder kodering hê om jou werf voor te berei.
Sonder enige CSS-stilering lyk hierdie XHTML-kieslys soos 'n standaard ongeordende lys. Daar is koeëls en die lysitems is effens ingedruk. Aangesien ek skakels met plekhouers gebruik , sal die meeste blaaiers nie die skakels vertoon as klikbare (onderstreep en in blou) nie. As u die bogenoemde HTML in 'n webblad plak, sal u navigasie so lyk:
- huis
- produkte
- dienste
- Kontak Ons
Dit is taamlik saai en lyk nie baie soos 'n spyskaart nie. Maar met net 'n paar CSS-style wat by die lys gevoeg word, kan jy 'n spyskaart skep wat jou trots maak.
Vertikale Navigasie Menu
'N Vertikale navigasiekieslys is baie maklik om te skryf omdat dit op dieselfde manier vertoon as 'n normale lys: op en af.
Die lysitems vertoon vertikaal op die bladsy.
As ek stilkies kies, wil ek graag aan die buitekant begin en werk. Hiermee bedoel ek dat ek eers die ul # navigasie styl en dan na die li-elemente beweeg en dan die skakels ens. Dus vir hierdie spyskaart, eers definieer jy die breedte van die spyskaart. Dit sal verseker dat selfs al die spyskaart items lank is, hulle nie die res van die uitleg sal stoot of horisontale blaai veroorsaak nie.
ul # navigasie {breedte: 12em; }
Sodra ek die wydte gestel het, kan ek met die lysitems speel. Dit laat my toe om dinge soos (om van die koeëls ontslae te raak), agtergrondkleure, grense, teksbelyning en marges te stel.
ul # navigation li {
lys-styl: geen;
agtergrondkleur: # 039;
grens-top: soliede 1px # 039;
teks-belyning: links;
marge: 0;
}
Sodra jy die basiese beginsels vir die lysitems ingestel het, kan jy begin speel met hoe die spyskaart in die skakels area lyk. Eerste styl die UL # navigasie LI A en dan die A: skakel, A: besoek, A: beweeg, en A: aktief (as jy dit wil hê). Vir die skakels hou ek daarvan om die skakels 'n blok element (eerder as die standaard inlyn) te maak. Dit dwing hulle om die hele spasie van die LI op te neem en hulle tree meer op soos 'n paragraaf wat hulle makliker maak om te kies as spyskaartknoppies. Die ander ding wat ek altyd doen, is om die onderstreep te verwyder (teksversiering: geen;), aangesien die knoppies meer soos knoppies vir my lyk.
Maar natuurlik kan jou ontwerp anders wees.
ul # navigasie li a {
vertoon: blok;
teks versiering: geen;
vulling: .25em;
grens-bodem: soliede 1px # 39f;
grens-regs: soliede 1px # 39f;
}
Let op dat met die vertoning: blok; Op die skakels, die hele boks van die kieslysitem is klikbaar, nie net die letters nie. Dit is ook goed vir bruikbaarheid. Maak seker dat jy die skakelkleure (skakel, besoek, beweeg en aktief) stel as jy wil hê hulle moet verskil van die standaard blou, rooi en pers.
a: skakel, a: besoek {kleur: #fff; }
a: beweeg, a: aktief (kleur: # 000; }
Ek gee ook graag die hover-staat ' n bietjie meer aandag deur die agtergrondkleur te verander.
a: hover (agtergrond-kleur: #fff; }
As u meer voorbeelde van vertikale spyskaarte wil hê, raadpleeg die onderstaande lys.
- 'N Gestileerde Vertikale Menu
- 'N Basiese Vertikale Menu Sjabloon
- 'N Gestileerde Vertikale Menu met U is hier
- 'N Basiese Vertikale Spyskaart Template Met U is hier
Horisontale Navigasie Menu
Die opstel van horisontale navigasie-spyskaarte is effens moeiliker as vertikale navigasiekiesse, want jy moet die feit verreken dat HTML-lyste verkies vertikaal vertoon. Soos met die horisontale spyskaart, skep eers jou navigasiekieslyslys :
Om 'n horisontale spyskaart te skep, werk dieselfde as wat jy met die vertikale spyskaart gedoen het. Begin met die buitekant en werk. Aangesien ek wil hê dat my navigasie in die linkerhoek begin, stel ek dit met 0 linkermarge en opvulling in, en ek dryf dit na links. Jy moet ook die wydte stel sodat jou spyskaart min of meer ruimte opneem as wat jy beplan. Vir horisontale spyskaarte is dit gewoonlik die volle breedte van die ontwerp. Ek het ook ' n agtergrondkleur by die hele lys bygevoeg om dit makliker te maak om te lees.
ul # navigasie {
dryf: links;
marge: 0;
vulling: 0;
breedte: 100%;
agtergrondkleur: # 039;
}
Maar die geheim vir die horisontale navigasiekieslys is in die lysitems. Lysitems is gewoonlik blokelemente, wat beteken dat hulle 'n nuwe lyn voor en na elkeen sal hê. Deur die skerm van blok na inlyn te skakel, dwing u die lyselemente horisontaal langs mekaar.
ul # navigasie li {vertoon: inline; }
Ek het die skakels behandel presies soos ek hulle behandel het in die vertikale navigasiekieslys, met dieselfde kleure en teksversiering. Ek het 'n boonste grens bygevoeg om die knoppies te definieer wanneer hulle oorbeweeg word. Die enigste ding wat ek verwyder het, was die vertoning: blok; want dit sal die nuwe lyne terugbring en die horisontale spyskaart vernietig.
ul # navigasie li a {
teks versiering: geen;
padding: .25em 1em;
grens-bodem: soliede 1px # 39f;
grens-top: soliede 1px # 39f;
grens-regs: soliede 1px # 39f;
}
a: skakel, a: besoek {kleur: #fff; }
ul # navigasie li a: hover {
agtergrondkleur: #fff;
kleur: # 000;
}
Jy is hier Ligging Inligting
Nog 'n aspek van HTML is die plek waar u identifiseer. As jy jou kieslys wil verander om die huidige ligging van jou gebruikers aan te dui, gebruik hierdie ID net om 'n ander agtergrondkleur of ander styl te definieer. Beweeg daardie ID-kenmerk na die korrekte kieslysitem op ander bladsye sodat die huidige bladsy altyd gemerk word.
ul # navigation li # youherehere a {background-color: # 09f; }
As jy hierdie style saam op jou bladsy sit, kan jy 'n horisontale of vertikale menubalk skep wat met jou werf werk, maar dit is vinnig om te laai en baie maklik om in die toekoms op te dateer. Met behulp van XHTML + CSS word jou lyste in 'n baie kragtige instrument vir ontwerp.
As u meer voorbeelde van horisontale spyskaarte wil hê, raadpleeg die volgende.
- 'N Gestileerde Horisontale Menu
- 'N Basiese Horisontale Kieslys Sjabloon
- 'N Gestileerde Horisontale Menu met U is hier
- 'N Basiese Horisontale Spyskaart Template Met U is hier