Si Të Krijoni Një Menu Popup

Përmbajtje:

Si Të Krijoni Një Menu Popup
Si Të Krijoni Një Menu Popup

Video: Si Të Krijoni Një Menu Popup

Video: Si Të Krijoni Një Menu Popup
Video: 32 Si të krijoni një filtër në Excel 2024, Nëntor
Anonim

Me ndihmën e kodit HTML kompetent dhe rregullave të thjeshta CSS, ju mund të krijoni një meny pop-up, ta plotësoni dhe ta modifikoni. Duke përdorur tabelat kaskadë dhe mjetet e gjuhës së shënjimit, mund të siguroheni që vetë menuja funksionon si duhet në të gjithë shfletuesit.

Si të krijoni një menu popup
Si të krijoni një menu popup

Udhëzimet

Hapi 1

Më parë mbajeni në shiritin bazë të menusë. Krijoni një listë të veçantë të numëruar me një nënmeny në një redaktues teksti. Zakonisht "Notepad" përdoret për këto qëllime. Nënmenyja vepron si një element i listës prindërore. Për shembull: Elementi i parë Elementi i përmbytjes Elementi i përmbytjes2 Elementi i fushës3 Elementi i fushës4 Elementi i fushës5

Hapi 2

Ruani këtë listë në një skedar të veçantë html. Pastaj krijoni një skedar.css. Vendosni të gjithë parametrat e kërkuar të fletës së stilit. Bëni këtë me shumë kujdes, sepse një gabim dhe menuja që shfaqet nuk do të shfaqet siç duhet ose nuk do të funksionojë fare.

Hapi 3

Hiqni çdo plumb dhe mbushje të aplikuar në listën e plumbave. Vendosni gjerësinë e menusë duke përdorur mjetet CSS: ul -style: asnjë; gjerësia: 200px; }

Hapi 4

Shënoni pozicionin relativ të të gjithë artikujve në listë me një atribut të quajtur pozicion: ul li: relativ; }

Hapi 5

Pastaj rregulloni nën menunë, elementet e së cilës do të shfaqen nga menuja mëmë në të djathtë kur kursori i miut është mbi artikullin: li ul: absolute; majtas: 199px; lart: 0; shfaqje: asnjë; }

Hapi 6

Atributi i majtë është një pixel më pak se gjerësia e vetë menusë. Kjo lejon që artikujt e pop-up të pozicionohen si duhet pa krijuar kufij të dyfishtë. Atributi i ekranit përdoret për të fshehur nën menunë kur hapni faqen.

Hapi 7

Stilizoni lidhjet sipas nevojës duke përdorur opsionet e duhura css. Përfshini parametrin ekran: bllok në mënyrë që lidhjet të zënë të gjithë hapësirën e rezervuar për to. Për ta bërë menunë të shfaqet kur kursori i miut qëndron mbi të, vendosni kodin e mëposhtëm: li: hover ul: bllok; }

Hapi 8

Vendosni mundësi shtesë për shfaqjen e artikujve të listës dhe lidhjeve sipas dëshirës. Përfshini një atribut në skedarin.html. Menuja që shfaqet është gati për t'u përdorur.

Recommended: