Efni.

• Að stíga
• Hluti 1 af 2: Ritun HTML
• 2. hluti af 2: Að skrifa CSS
• Ábendingar

Með fellivalmynd býrðu til skýrt og stigskipt yfirlit yfir alla mikilvæga hluti á síðunni og undirhlutana sem síðan inniheldur. Þú verður bara að færa músina yfir aðalhlutana til að undirhlutarnir birtist. Þú getur búið til fellivalmynd með aðeins HTML og CSS.

Að stíga

Hluti 1 af 2: Ritun HTML

1. Búðu til leiðsagnarhlutann þinn. Venjulega notarðu nav> fyrir flakkstikuna um heimasíðuna, haus> fyrir smærri krækjukafla sem eru blaðsíðubundnir, eða div> ef enginn annar kostur virðist passa. Settu þetta í div> frumefni svo þú getir stillt stíl bæði ílátsins og matseðilsins sjálfs.
   • div>
   • nav>
   • / nav>
   • / div>
2. Gefðu hverjum hluta kennslueiginleika. Við munum nota flokkareiginleikann síðar til að breyta stíl þessara þátta með CSS. Gefðu bæði ílátinu og matseðlinum sinn eigin eiginleikaflokk.
   • div>
   • nav>
   • / nav>
   • / div>
3. Bættu við lista yfir valmyndaratriði. Óflokkaði listinn (ul>) inniheldur atriðin í aðalvalmyndinni (lista atriði li>), ef notandinn færir músina yfir hann sér hann / hún fellivalmyndirnar. Bættu flokknum „clearfix“ við listaþáttinn þinn; við komum að þessu seinna í CSS töflureikninum.
   • div>
   • nav>
   •       ul>
   •          li> Heim / li>
   •          li> Starfsmenn
   •          li> Tengiliður
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Bæta við krækjum. Ef þessir toppvalmyndaratriði tengjast einnig á sínar eigin síður geturðu nú sett inn krækjurnar. Tengill við akkeri sem ekki er til staðar (svo sem „#!“), Jafnvel þó að þau tengist ekki neinu, þannig að bendill notandans mun líta öðruvísi út. Í þessu dæmi leiðir Contact hvergi, en hinir tveir valmyndaratriðin gera:
   • div>
   • nav>
   • ul>
   • li>a href = "/">Heim/ a>/ li>
   • li>a href = "/ Starfsmenn">Starfsmenn/ a>
   • / li>
   • li>a href = "#!">Hafðu samband/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. Búðu til undirlista fyrir fellilistana. Eftir að stíllinn hefur verið búinn til mynda þessir listar fellivalmyndina. Settu listann í listaatriðið sem notandinn mun músa yfir. Bættu við bekkjareiginleika og krækju eins og áður.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> Heim / a> / li>
   • li> a href = "/ Starfsmenn"> Starfsmenn / a>
   •          ul>
   •             li> a href = "/ borsato"> Marco Borsato / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> Hafðu samband / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Tilkynntu vandamál / a> / li>
   •             li> a href = "/ support"> Þjónustudeild / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

2. hluti af 2: Að skrifa CSS

1. Opnaðu CSS stílblað þitt. Settu tengil á CSS stílblaðið þitt í haushluta HTML skjalsins ef tengillinn er ekki til staðar. Í þessari grein munum við ekki fjalla um grunnatriði CSS, svo sem að setja leturgerð og bakgrunnslit.
2. Bættu við clearfix kóða. Mundu að bæta "clearfix" bekknum við valmyndarlistann? Venjulega hafa þættir fellivalmyndarinnar gagnsæjan bakgrunn sem gerir kleift að færa aðra þætti. Einföld aðlögun að CSS getur leyst þetta vandamál. Hérna er fín, fljótleg leiðrétting, þó hún gangi ekki í Internet Explorer 7 og fyrr:
   • .clearfix: eftir {
   • innihald: "";
   • skjámynd: borð;
   • }
3. Búðu til grunnhönnunina. Með þessum kóða er hægt að setja matseðilinn þinn efst á síðunni og fela fellivalmyndina. Þetta er mjög einfalt viljandi svo að við getum einbeitt okkur að viðkomandi kóða. Þú getur breytt því síðar með viðbótar CSS kóða, svo sem padding og framlegð.
   • .nav-umbúðir {
   • breidd: 100%;
   • bakgrunnur: # 008B8B;
   • }
   •  
   • .nav matseðill {
   • staða: ættingi;
   • sýna: inline-block;
   • }
   •  
   • .sub valmynd {
   • staða: alger;
   • sýna: enginn;
   • bakgrunnur: # 555;
   • }
4. Láttu fellivalmyndina birtast þegar þú flytur músina yfir þá. Þættirnir í fellilistanum eru nú stilltir þannig að þeir séu ekki sýndir. Svona á að láta allan undirlista birtast um leið og þú sveima yfir „foreldrið“:
   • .nav-menu ul li: sveima> ul {
   • sýna: loka;
   • }
   • Athugið - ef viðbótarmatseðlar eru faldir í valmyndaratriðum í fellivalmyndinni munu eiginleikarnir sem hér er bætt við eiga við um alla matseðla. Ef þú vilt aðeins að stíllinn eigi við á fyrsta stigi fellivalmyndanna skaltu nota „.nav-menu> ul“ í staðinn.
5. Tilgreindu með ör að það er fellivalmynd. Vefhönnuðir sýna venjulega með ör niður að þáttur opnar fellivalmynd. Þessi kóði bætir þessari ör við alla þætti í valmyndinni:
   • .nav valmynd> ul> li: eftir {
   • innihald: " 25BC"; / * slapp við unicode fyrir örina niður * /
   • leturstærð: .5em;
   • sýna: loka;
   • staða: alger;
   •    }
   • Athugið - Stilltu stöðu örvarinnar með eiginleikunum efst, neðst, hægri eða vinstri.
   • Athugið - Ef ekki allir valmyndaratriðin eru með fellilistum, ekki breyta útliti alls flokksvalmyndarinnar. Í staðinn skaltu bæta við öðrum flokki (svo sem fellivalmynd) við hvern li-þátt þar sem þú vilt fá ör. Vísaðu til þess flokks í kóðanum hér að ofan.
6. Stilltu bólstrunina, bakgrunninn og aðra eiginleika. Matseðillinn ætti að virka núna, en hann er ekki mjög fínn ennþá. Með eiginleikunum í CSS er hægt að sérsníða hvernig hver bekkur eða þáttur lítur út og hvar þeir eru staðsettir.

Ábendingar

• Ef þú vilt bæta fellivalmynd við eyðublað er það mjög auðvelt í HTML5 með þáttinn velja>.
• Krækjan a href = "#"> flettir efst á síðunni og tengill sem vísar á akkeri sem ekki er til, svo sem href = "#!">, Skrollar ekki. Ef það finnst of slæmt geturðu breytt því hvernig bendillinn lítur út með CSS.
• Þegar þú afritar og límir sýnishornskóðann skaltu fjarlægja allar byssukúlur.