Cu ajutorul codului HTML competent și a regulilor CSS simple, puteți crea un meniu pop-up, îl puteți completa și modifica. Utilizând tabelele în cascadă și instrumentele de limbaj de marcare, vă puteți asigura că meniul în sine funcționează corect în toate browserele.
Instrucțiuni
Pasul 1
Țineți mai întâi bara de meniu de bază. Creați o listă numerotată specială cu un submeniu într-un editor de text. De obicei, „Notepad” este utilizat în aceste scopuri. Submeniul acționează ca un element al listei părinte. De exemplu: Primul Element Element Element Flood Element 2 Domeniu Element 3 Element Element 4 Element Element 5
Pasul 2
Salvați această listă într-un fișier html separat. Apoi creați un fișier.css. Introduceți toți parametrii necesari pentru foaia de stil. Faceți acest lucru foarte atent, deoarece o greșeală și meniul pop-up nu se vor afișa corect sau nu vor funcționa deloc.
Pasul 3
Eliminați orice gloanțe și umplutură aplicate în lista de gloanțe. Setați lățimea meniului folosind instrumentele CSS: ul -style: none; width: 200px; }
Pasul 4
Marcați poziția relativă a tuturor articolelor din listă cu un atribut numit poziție: ul li: relativ; }
Pasul 5
Apoi aranjați submeniul, ale cărui elemente vor apărea din meniul părinte în dreapta atunci când cursorul mouse-ului este deasupra elementului: li ul: absolut; stânga: 199px; sus: 0; afișaj: nici unul; }
Pasul 6
Atributul din stânga este cu un pixel mai mic decât lățimea meniului în sine. Aceasta permite poziționarea corectă a elementelor pop-up fără a crea margini duble. Atributul de afișare este utilizat pentru a ascunde submeniul la deschiderea paginii.
Pasul 7
Stilează linkurile după cum este necesar folosind opțiunile CSS corespunzătoare. Includeți parametrul display: block, astfel încât linkurile să ocupe tot spațiul rezervat pentru acestea. Pentru a face meniul să apară când cursorul mouse-ului se deplasează deasupra acestuia, introduceți următorul cod: li: hover ul: block; }
Pasul 8
Setați opțiuni suplimentare pentru afișarea articolelor din listă și a linkurilor, după cum doriți. Includeți un atribut în fișierul.html. Meniul pop-up este gata de utilizare.
