CSS Dropdowns. Conținut dropdown. Elementele span, button. Clasa .dropdown cu position:relative, position:absolute. Clasa .dropdown-content. Proprietatea CSS box-shadow. Selectorul :hover.
Partajeaza in Google Classroom
Partajeaza cu Google Classroom
Susține Lectii-Virtuale!
Memorator: Descriere video Descarcă PDF
Exemplu explicat
HTML) Utilizați orice element pentru a deschide conținutul dropdown, de ex. un element <span> sau un <button>.
Utilizați un element de container (cum ar fi <div>) pentru a crea conținut dropdown și adăugați orice doriți în interiorul acestuia.
Înfășurați un element <div> în jurul elementelor pentru a poziționa corect conținutul dropdown cu CSS.
CSS) Clasa .dropdown folosește position:relative, care este necesară atunci când dorim ca conținutul dropdown să fie plasat chiar sub butonul dropdown (folosind position:absolute).
Clasa .dropdown-content conține conținutul dropdown real. Este ascunsă în mod implicit și va fi afișată pe hover (vezi mai jos). Rețineți că min-width este setată la 160px. Simte-te liber să schimbi asta.
Sfat: Dacă doriți ca lățimea conținutului dropdown să fie la fel de largă ca butonul dropdown, setați lățimea (width) la 100% (și overflow:auto pentru a activa defilarea pe ecrane mici).
În loc să folosim un border, am folosit proprietatea CSS box-shadow pentru a face ca meniul dropdown să arate ca un „card”.
Selectorul :hover este folosit pentru a afișa meniul dropdown atunci când utilizatorul mută mouse-ul peste butonul dropdown.
HTML) Utilizați orice element pentru a deschide conținutul dropdown, de ex. un element <span> sau un <button>.
Utilizați un element de container (cum ar fi <div>) pentru a crea conținut dropdown și adăugați orice doriți în interiorul acestuia.
Înfășurați un element <div> în jurul elementelor pentru a poziționa corect conținutul dropdown cu CSS.
CSS) Clasa .dropdown folosește position:relative, care este necesară atunci când dorim ca conținutul dropdown să fie plasat chiar sub butonul dropdown (folosind position:absolute).
Clasa .dropdown-content conține conținutul dropdown real. Este ascunsă în mod implicit și va fi afișată pe hover (vezi mai jos). Rețineți că min-width este setată la 160px. Simte-te liber să schimbi asta.
Sfat: Dacă doriți ca lățimea conținutului dropdown să fie la fel de largă ca butonul dropdown, setați lățimea (width) la 100% (și overflow:auto pentru a activa defilarea pe ecrane mici).
În loc să folosim un border, am folosit proprietatea CSS box-shadow pentru a face ca meniul dropdown să arate ca un „card”.
Selectorul :hover este folosit pentru a afișa meniul dropdown atunci când utilizatorul mută mouse-ul peste butonul dropdown.
Navigare în lectii
Cumpara abonament
Ajutor
Feedback-ul d-voastră este important pentru noi. Dacă observați vreo neregulă vă rugăm să ne-o semnalați apăsând butonul Trimite Feedback de mai jos.
