Hoe om `n aftrekkieslys met HTML en CSS te skep

Die aftreklys bied `n duidelike en hiërargiese aansig van al die hoofafdelings van `n webblad, sowel as die onderafdelings in elkeen van hulle. Al wat jy moet doen om die onderafdelings te laat verskyn, is om die muiswyser oor die hoofafdelings te skuif. U kan `n aftreklys maak met slegs HTML en CSS.

conținut

Stappe
Deel 1skryf die html-kode
Deel 2skryf die css kode
Wenke

stappe

Deel 1
Skryf die HTML-kode

Prent getiteld Skep `n aftreklys in HTML en CSS Stap 1

Skep die navigasie afdeling. Normaalweg is dit beter om te gebruik

wanneer blykbaar nie een van die ander opsies beter pas nie. Plaas hierdie gedeelte binne `n element

sodat jy styl aan beide die houer en dieselfde spyskaart kan toepas.

Prent getiteld Skep `n aftreklys in HTML en CSS Stap 2

Gee elke afdeling `n klas eienskap. U sal later die klasattribuut gebruik om styl aan hierdie elemente toe te pas met behulp van CSS. Gee een klas eienskap aan die houer en `n ander een vir die spyskaart.

klas ="nav-wrapper">

Prent getiteld Skep `n aftreklys in HTML en CSS Stap 3

Voeg `n lys van spyskaartitems by. Die slordige lys (

) bevat die items in die topkieslys (items in die lys

) waarop die gebruiker die muisaanwyser kan slaag om die aftreklys te sien. Voeg klas toe "clearfix" In jou lysitem sal jy dit later gebruik wanneer jy die CSS-blad ontwikkel.

inleiding

bydraers

Kontak ons

Prent getiteld Skep `n aftreklys in HTML en CSS Stap 4

Voeg skakels in As die boonste spyskaartitems ook aan jou eie bladsye gekoppel is, voeg nou die ooreenstemmende skakels. Alhoewel hulle nie aan enige ander werf gekoppel is nie, sluit dit skakels na `n nie-bestaande anker in (byvoorbeeld "#!") sodat die gebruiker se wyser sy voorkoms verander. In hierdie voorbeeld, "Kontak ons" Dit lei nie na enige plek nie, maar die ander twee spyskaarte doen:

inleiding

bydraers

Kontak ons

Prent getiteld Skep `n aftreklys in HTML en CSS Stap 5

Skep sub lyste vir die items in die hangkieslys. Sodra u die style toegepas het, sal hierdie lyste `n aftrekkieslys word. Nes die lyste binne die item van die lys waarop die gebruiker die wyser sal verby. Sluit `n klasattribuut en `n skakel in, soos jy vroeër gedoen het.

Deel 2
Skryf die CSS kode

Prent getiteld Skep `n aftreklys in HTML en CSS Stap 6

Maak jou CSS-stylblad oop Voeg `n skakel by die CSS-stylvel in die afdeling "kop" (kop) van u HTML-dokument as u dit nog nie gedoen het nie. Hierdie artikel dek nie die basiese aspekte van CSS nie, soos die vestiging van `n lettertipe en `n agtergrondkleur.

Prent getiteld Skep `n aftreklys in HTML en CSS Stap 7

Voeg die kode by "clearfix". Onthou jy die klas "clearfix" Wat het jy in die kieslys bygevoeg? Gewoonlik het die elemente van `n aftreklys `n deursigtige agtergrond en druk die ander elemente na ander rigtings. U kan hierdie probleem oplos met `n vinnige CSS-instelling. Hier het u `n praktiese en maklike oplossing, hoewel dit nie verenigbaar is met Internet Explorer 7 en vorige weergawes nie:

.clearfix: na {

inhoud: ""-

vertoon: tafel-

}

Prent getiteld Skep `n aftreklys in HTML en CSS Stap 8

Skep die basiese ontwerp. Hierdie kode sal jou kieslys bo-aan die bladsy sorteer en die keuselysitems versteek. Dit is opsetlik `n beperkte voorbeeld, om slegs op die betrokke kode te fokus. Dan kan jy dit verbeter deur addisionele CSS-eienskappe by te voeg, soos "padding" (vulsel) en "marge" (Marge).

.nav-wrapper {

breedte: 100% -

agtergrond: # 999-

}

.nav-menu {

posisie: relatiewe-

vertoon: inlyn-blok-

}

.nav-menu li {

vertoon: inline-

lys-styl-tipe: geen-

}

.subkieslys {

posisie: absolute-

vertoon: geen-

agtergrond: # ccc-

}

Prent getiteld Skep `n aftreklys in HTML en CSS Stap 9

Maak die afrol-items verskyn wanneer jy die wyser verbysteek. Die items in die aftreklys is tans ingestel om nie vertoon te word nie. Hier sal jy sien hoe om `n volledige sublys te laat verskyn deur te beweeg oor die lys waaraan dit behoort:

.NAV-menu ul li: hover > ul {

vertoon: inlyn-blok-

}

Nota: as die items in die keuselys lei tot addisionele spyskaarte (swaai kontroles), sal al die eienskappe wat u hier byvoeg, hulle almal beïnvloed. As jy wil dat die styl slegs van toepassing is op die eerste vlak van aftrekkies, gebruik ".nav-spyskaart > ul".

Prent getiteld Skep `n aftreklys in HTML en CSS Stap 10

Dui die aftrekkieslys aan met `n pyltjie. Webontwerpers wys gewoonlik dat `n item `n aftreklys oopmaak met `n pyltjie wat wys. Hierdie kode voeg die pyltjie by elk van die spyskaartitems toe:

.nav-spyskaart > ul > li: na {

inhoud: " 25BC"- / * Unicode-kode van die afpyltjie * /

font-grootte: .5em-

vertoon: inline-

posisie: relatiewe-

}

Nota: maak die nodige aanpassings om die posisie van die pyl te verander deur die eienskappe te gebruik "top" (Bo), "onderkant" (Onder), "reg" (regs) of "links" (Links).

Let wel: moenie alle spyskaartitems pyltjies wys nie, moenie die styl in die hele klas toepas nie "nav-spyskaart". Plaas eerder `n ander klas (byvoorbeeld, "dropdown") in elke element

van HTML waar jy die pyl wil hê om te verskyn. In die vorige kode, verwys na hierdie laaste klas.

Prent getiteld Skep `n aftreklys in HTML en CSS Stap 11

Pas die invul, agtergrond en ander eienskappe aan. Jou spyskaart sal nou werk, maar dit sal goed wees om `n skoonheidsbehandeling te doen. As jy nie vertroud is met die basiese eienskappe van CSS nie, kan jy soek vir `n aanlyn-gids oor hoe om in CSS te program. Gebruik hierdie eienskappe om ander veranderinge in die voorkoms en posisie van elke elementsklas te maak.