Met behulp van bekwame HTML-kode en eenvoudige CSS-reëls, kan u 'n pop-upmenu skep, aanvul en wysig. Deur die omringende tabelle en opmaaktaalhulpmiddels te gebruik, kan u verseker dat die spyskaart in alle blaaiers korrek werk.
Instruksies
Stap 1
Hou eers die basiese menubalk vas. Skep 'n spesiale genommerde lys met 'n submenu in 'n teksredigeerder. Gewoonlik word "Notepad" vir hierdie doeleindes gebruik. Die submenu dien as 'n element van die ouerlys. Byvoorbeeld: First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
Stap 2
Stoor hierdie lys in 'n aparte html-lêer. Skep dan 'n.css-lêer. Voer al die vereiste stylvelparameters in. Doen dit baie versigtig, want een fout, en die pop-upmenu sal nie korrek vertoon of glad nie werk nie.
Stap 3
Verwyder die koeëls en vullings wat in die koeëllys aangebring is. Stel die breedte van die menu in met CSS-gereedskapstukke: ul -style: none; breedte: 200px; }
Stap 4
Merk die relatiewe posisie van al die items in die lys met 'n kenmerk genaamd posisie: ul li: relatief; }
Stap 5
Rangskik dan die submenu, waarvan die elemente in die hoofmenu aan die regterkant verskyn as die muispyltjie oor die item is: li ul: absoluut; links: 199 px; bo: 0; vertoon: geen; }
Stap 6
Die linkerkenmerk is een pixel minder as die breedte van die menu self. Hierdeur kan pop-up-items korrek geposisioneer word sonder om dubbele rande te skep. Die kenmerk vertoon word gebruik om die submenu te verberg wanneer u die bladsy oopmaak.
Stap 7
Styl die skakels soos nodig met behulp van die toepaslike css-opsies. Sluit die display: block-parameter in, sodat die skakels al die spasie wat daarvoor gereserveer is, inneem. Om die spyskaart te laat verskyn as die muisaanwyser daaroor sweef, voer die volgende kode in: li: hover ul: block; }
Stap 8
Stel addisionele opsies om lysitems en skakels na wense te vertoon. Sluit 'n kenmerk in die.html-lêer in. Die pop-up menu is gereed om te gebruik.
