Met behulp van goeie HTML-kode en eenvoudige CSS-reëls, kan u 'n lekker pop-upmenu skep wat maklik aangepas en aangevul kan word. Deur die opmaaktaal en Cascading Style Sheets te gebruik, kan u verseker dat spyskaarte in alle blaaiers korrek werk.
Instruksies
Stap 1
Bou eers die basiese struktuur van u spyskaart. Open 'n teksredigeerder en skep 'n genommerde lys met 'n submenu wat dien as 'n ouerlysitem. Byvoorbeeld:
-
Eerste element
- Vervolgitem
- Uitsending2
Stap 2
Stoor die gegenereerde lys in 'n aparte html-lêer. Skep vervolgens 'n lêer met die.css-uitbreiding en voer al die stylvelparameters in.
Stap 3
Verwyder die vulling en koeëls wat van toepassing is op die kolpunte en stel die spyskaartwydte in met behulp van CSS-gereedskapstukke: ul {list-style: none;
breedte: 200px; }
Stap 4
Stel die relatiewe posisie van alle items in die lys met behulp van die posisie-attribuut: ul li {posisie: relatief; }
Stap 5
Vervolgens moet u 'n submenu ontwerp wat elk van die elemente regs van die ouermenu sal verskyn op die oomblik dat die muiswyser op die item staan: li ul {posisie: absoluut;
links: 199px;
bo: 0;
vertoon: geen; } Die linkerkenmerk is een pixel minder as die breedte van die kieslys self. Hierdeur kan die pop-up-items intelligent geposisioneer word sonder om dubbele rande te skep. Die kenmerk vertoon word gebruik om die submenu te verberg wanneer u die bladsy oopmaak.
Stap 6
Styl die skakels na wense met behulp van die toepaslike css-opsies. Sluit die parameter display: block in, sodat elke skakel al die spasie in beslag neem wat daarvoor gereserveer is.
Stap 7
Om die spyskaart te laat verskyn op die oomblik as die wyser daaroor (hover) is, moet u die kode invoer: li: hover ul {display: block; }
Stap 8
Stel addisionele opsies om skakels en lysitems na wense te vertoon.
Stap 9
Die pop-up menu is gereed. Nou moet die kenmerk in die.html-lêer: pop-upmenu opgeneem word
