Met `n aftrekkieslys skep jy `n duidelike en hiërargiese oorsig van alle belangrike dele op die bladsy en die onderafdelings wat die bladsy bevat. Jy hoef net jou muis oor die hoofafdelings te beweeg om die onderafdelings te laat verskyn. U kan `n aftreklys skep deur slegs HTML en CSS te gebruik.
Trappe
Deel 1 van 2: Skryf die HTML
1. Skep jou navigasie-afdeling. Normaalweg gebruik jy
2. Gee elke afdeling `n klaskenmerk. Ons sal later die klaskenmerk gebruik om hierdie elemente met CSS te styl. Gee beide die houer en die spyskaart hul eie klaskenmerk.
klas="nav-omhulsel">
klas="nav spyskaart">
3. Voeg `n lys spyskaartitems by. Die ongeordende lys (
4. Voeg skakels by. As hierdie topvlak-kieslysitems ook na hul eie bladsye skakel, kan jy nou die skakels invoeg. Skakel na `n nie-bestaande anker (soos "#!"), selfs al skakel hulle na niks nie, so die gebruiker se wyser lyk anders. In hierdie voorbeeld lei Kontak nêrens nie, maar die ander twee menu-items doen:
5. Skep sublyste vir die aftrek-items. Nadat die styl geskep is, vorm hierdie lyste die aftreklys. Plaas die lys in die lysitem waaroor die gebruiker sal beweeg. Voeg `n klaskenmerk en `n skakel by net soos voorheen.
Deel 2 van 2: Skryf van die CSS
1. Maak jou CSS-stylblad oop. Plaas `n skakel na jou CSS-stylblad in die kopgedeelte van jou HTML-dokument as die skakel nie reeds daar is nie. In hierdie artikel sal ons nie die basiese beginsels van CSS dek nie, soos die opstel van `n lettertipe en agtergrondkleur.
2. Voeg clearfix-kode by. Onthou jy toe jy die "duidelike regstelling"-klas na die spyskaartlys? Normaalweg het die elemente van die aftreklys `n deursigtige agtergrond, wat ander elemente toelaat om te verskuif. `N Eenvoudige CSS-aanpassing kan hierdie probleem oplos. Hier is `n goeie, vinnige oplossing, hoewel dit nie in Internet Explorer 7 en vroeër sal werk nie:
.clearfix:after {
inhoud: "";
vertoon: tafel;
}
3. Skep die basiese ontwerp. Met hierdie kode kan jy jou spyskaart bo-aan die bladsy plaas en die aftrekelemente versteek. Dit is doelbewus baie nugter sodat ons op die betrokke kode kan fokus. Jy kan dit later pasmaak met bykomende CSS-kode, soos opvulling en kantlyn.
.nav-omhulsel {
breedte: 100%;
agtergrond: #008B8B;
}
.navigasiekieslys {
posisie: relatief;
vertoon: inlynblok;
}
.subkieslys {
posisie: absoluut;
vertoon: geen;
agtergrond: # 555;
}
4. Laat die aftrek-items verskyn wanneer jy jou muis oor hulle beweeg. Die elemente in die aftreklys is nou so gestel dat hulle nie gewys word nie. Hier is hoe om `n hele sublys te laat verskyn sodra jy verby is "ouer" beweeg:
.navigasiemenu ul li: hover > ul {
vertoon:blok;
}
Let wel - as die kieslysitems in die aftrekkieslys addisionele spyskaarte bevat, sal die eienskappe wat hier bygevoeg word op alle spyskaarte van toepassing wees. As jy wil hê dat die styl net op die eerste vlak van die aftreklys moet toepas, gebruik eerder ".nav spyskaart > ul".
5. Dui met `n pyltjie aan dat daar `n aftrekkieslys is. Webontwerpers wys gewoonlik met `n afpyltjie dat `n element `n aftreklys oopmaak. Hierdie kode voeg daardie pyltjie by elke element in jou spyskaart:
.nav spyskaart > ul > li:na {
inhoud: "25BC"; /*ontsnap unicode vir die afpyltjie*/
skrifgrootte: .5em;
vertoon: blok;
posisie: absoluut;
}
Let wel — Pas die posisie van die pyl aan deur die eienskappe van bo, onder, regs of links te gebruik.
Let wel - As nie al jou menu-items aftreklys het nie, moenie die hele klas navigasie-kieslys herontwerp nie. Voeg eerder `n ander klas (soos aftreklys) by elke li-element waar jy `n pyl wil hê. Verwys na daardie klas in die kode hierbo.
6. Pas die opvulling, agtergrond en ander eienskappe aan. Die spyskaart behoort nou te werk, maar dit is nog nie baie mooi nie. Die eienskappe in CSS laat jou toe om aan te pas hoe elke klas of element lyk en waar hulle geleë is.
Wenke
As jy `n aftreklys by `n vorm wil voeg, is dit baie maklik in HTML5 met die element