Cu ajutorul unui cod HTML bun și a unor reguli CSS simple, puteți crea un meniu popup frumos care poate fi ușor modificat și completat. Utilizând limbajul de marcare și Foi de stil în cascadă, vă puteți asigura că meniurile funcționează corect în toate browserele.
Instrucțiuni
Pasul 1
Mai întâi, construiți structura de bază a meniului. Deschideți un editor de text și creați o listă numerotată cu un submeniu care acționează ca element de listă părinte. De exemplu:
-
Primul element
- Element derulant
- Meniu derulant2
Pasul 2
Salvați lista generată într-un fișier html separat. Apoi, creați un fișier cu o extensie.css și introduceți toți parametrii foii de stil.
Pasul 3
Eliminați orice umplutură și gloanțe care se aplică în lista de gloanțe și setați lățimea meniului folosind instrumentele CSS: ul {list-style: none;
lățime: 200px; }
Pasul 4
Setați poziția relativă a tuturor articolelor din listă utilizând atributul de poziție: ul li {poziție: relativă; }
Pasul 5
Apoi, trebuie să proiectați un submeniu, fiecare dintre elementele care vor apărea în dreapta meniului părinte în momentul în care indicatorul mouse-ului se află pe element: li ul {poziție: absolută;
stânga: 199px;
sus: 0;
display: none; } Atributul din stânga este cu un pixel mai mic decât lățimea meniului în sine. Acest lucru permite poziționarea inteligentă a elementelor pop-up fără a crea margini duble. Atributul de afișare este utilizat pentru a ascunde submeniul la deschiderea paginii.
Pasul 6
Stilează linkurile după cum dorești folosind opțiunile CSS corespunzătoare. Includeți parametrul display: block, astfel încât fiecare link să ocupe tot spațiul pe care l-a rezervat.
Pasul 7
Pentru a face meniul să apară în momentul în care cursorul este deasupra acestuia (hover), trebuie să introduceți codul: li: hover ul {display: block; }
Pasul 8
Setați opțiuni suplimentare pentru afișarea linkurilor și a elementelor de listă, după cum doriți.
Pasul 9
Meniul pop-up este gata. Acum rămâne să includeți atributul în fișierul.html: meniu pop-up
