Me ndihmën e kodit të mirë HTML dhe rregullave të thjeshta CSS, ju mund të krijoni një menu të këndshme që mund të modifikohet dhe plotësohet lehtësisht. Duke përdorur gjuhën e shënjimit dhe Sheets Style Cascading, ju mund të siguroheni që menutë funksionojnë si duhet në të gjithë shfletuesit.
Udhëzimet
Hapi 1
Së pari, ndërtoni strukturën themelore të menusë tuaj. Hapni një redaktues teksti dhe krijoni një listë të numëruar me një nën meny që vepron si një artikull i listës prindërore. Për shembull:
-
Elementi i parë
- Artikull zbritës
- Rënie2
Hapi 2
Ruani listën e gjeneruar në një skedar të veçantë html. Tjetra, krijoni një skedar me një shtrirje.css dhe futni të gjithë parametrat e fletës së stilit.
Hapi 3
Hiqni çdo mbushje dhe plumba që zbatohen në listën e plumbave dhe vendosni gjerësinë e menusë duke përdorur mjetet CSS: ul {list-style: none;
gjerësia: 200px; }
Hapi 4
Vendosni pozicionin relativ të të gjithë artikujve në listë duke përdorur atributin e pozicionit: ul li {pozicioni: relativ; }
Hapi 5
Tjetra, duhet të hartoni një nën meny, secili prej elementeve të së cilës do të shfaqet në të djathtë të menusë mëmë në momentin kur treguesi i miut është në artikull: li ul {pozicioni: absolut;
majtas: 199px;
maja: 0;
ekran: asnjë; } Atributi i majtë është një piksel më pak se gjerësia e vetë menusë. Kjo lejon që artikujt e pop-up të pozicionohen në mënyrë inteligjente pa krijuar kufij të dyfishtë. Atributi i ekranit përdoret për të fshehur nën menunë kur hapni faqen.
Hapi 6
Stilizoni lidhjet sipas dëshirës duke përdorur opsionet e duhura css. Përfshini parametrin ekran: bllok në mënyrë që secila lidhje të marrë të gjithë hapësirën që ka rezervuar për të.
Hapi 7
Për ta bërë menunë të shfaqet në momentin kur kursori është mbi të (rri pezull), duhet të fusësh kodin: li: hover ul {display: block; }
Hapi 8
Vendosni mundësi shtesë për shfaqjen e lidhjeve dhe renditni artikujt sipas dëshirës.
Hapi 9
Menyja pop-up është gati. Tani mbetet të përfshijë atributin në skedarin.html: Menuja që shfaqet
