Meniuri derulante în CSS

Dropdown-uri CSS

Un dropdown CSS dezvăluie o listă de opțiuni sau alt conținut după ce utilizatorul dă clic sau trece cu mausul peste un element, cum ar fi un buton sau o legătură de navigare.

Două părți îl fac să funcționeze. Prima este un element declanșator (precum <div>, <button>, <p>, <a> etc.), lucrul pe care utilizatorul dă clic sau peste care trece cu mausul.

A doua este conținutul dropdown: un element container (de ex. <div>) care ține ascuns materialul, care poate fi text, legături, imagini etc., până când declanșatorul îl afișează.

Casetă Dropdown CSS cu Text

În această primă versiune, trecerea cu mausul peste un element <div> face să apară o casetă dropdown care conține puțin text.

Casetă dropdown cu text

Creați o casetă dropdown CSS cu conținut text. Folosiți un div container cu clasa „dropdown” care conține textul „Mouse over me!” ca declanșator. În interiorul acestuia, plasați un div ascuns cu clasa „dropdown-content” conținând textul „Hello World!”. Containerul dropdown trebuie să folosească position: relative. Conținutul dropdown trebuie ascuns implicit (display: none), să folosească position: absolute, să aibă un fundal gri deschis (#f9f9f9), o lățime minimă de 130px, un box-shadow de 0px 8px 16px 0px rgba(0,0,0,0.2) și padding de 12px 16px. La trecerea cursorului peste containerul dropdown, conținutul dropdown trebuie să devină vizibil (display: block).

> Rezultat: pagină HTML completă

Prompt

Creați o casetă dropdown CSS cu conținut text. Folosiți un div container cu clasa „dropdown” care conține textul „Mouse over me!” ca declanșator. În interiorul acestuia, plasați un div ascuns cu clasa „dropdown-content” conținând textul „Hello World!”. Containerul dropdown trebuie să folosească position: relative. Conținutul dropdown trebuie ascuns implicit (display: none), să folosească position: absolute, să aibă un fundal gri deschis (#f9f9f9), o lățime minimă de 130px, un box-shadow de 0px 8px 16px 0px rgba(0,0,0,0.2) și padding de 12px 16px. La trecerea cursorului peste containerul dropdown, conținutul dropdown trebuie să devină vizibil (display: block).

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Dropdown Box with Text</title>
<style>
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 130px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h2>Dropdown Text</h2>
<p>Mouse over the text below to see the dropdown content.</p>

<div class="dropdown">Mouse over me!
  <div class="dropdown-content">Hello World!</div>
</div>

</body>
</html>

Explicația Exemplului

Pentru ca conținutul dropdown, care folosește position:absolute, să ajungă chiar sub elementul declanșator, clasa .dropdown are nevoie de position:relative.
Conținutul dropdown se află în clasa .dropdown-content, ascuns implicit până când un hover îl afișează.
Aici este setat un min-width de 130px, și poți să-l schimbi cum vrei! Pentru a se potrivi cu lățimea elementului declanșator, folosește width la 100%, plus overflow:auto ca să se poată derula pe ecrane mici.
Aspectul de „card” al conținutului dropdown vine din proprietatea box-shadow, folosită în locul unei borduri.
În final, selectorul :hover dezvăluie conținutul dropdown după ce utilizatorul trece cu mausul peste elementul <div> dropdown.

Meniu Dropdown CSS

Un meniu dropdown îi permite utilizatorului să aleagă o opțiune dintr-o listă.

Se bazează pe exemplul anterior, iar singura diferență este un buton plus legături puse în caseta dropdown, toate stilizate ca să se potrivească butonului dropdown.

Meniu dropdown cu buton

Creați un meniu dropdown CSS cu un buton declanșator. Folosiți un div container cu clasa „dropdown” (position: relative). În interiorul acestuia, plasați un buton cu clasa „dropbtn” etichetat „Dropdown Menu”, stilizat cu un fundal verde (#4CAF50), text alb, padding de 16px, dimensiune font de 16px, fără bordură și cursor pointer. Sub buton, adăugați un div ascuns cu clasa „dropdown-content” (display: none, position: absolute, background-color: #f9f9f9, min-width: 200px, box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)) conținând trei legături: „Link 1”, „Link 2” și „Link 3”. Stilizați legăturile cu culoare neagră, padding de 12px 16px, fără text-decoration și display: block. La trecerea cursorului peste legătură, aplicați un fundal gri deschis (#f1f1f1). La trecerea cursorului peste containerul dropdown, afișați conținutul dropdown (display: block) și schimbați fundalul butonului într-un verde mai închis (#3e8e41).

> Rezultat: pagină HTML completă

Prompt

Creați un meniu dropdown CSS cu un buton declanșator. Folosiți un div container cu clasa „dropdown” (position: relative). În interiorul acestuia, plasați un buton cu clasa „dropbtn” etichetat „Dropdown Menu”, stilizat cu un fundal verde (#4CAF50), text alb, padding de 16px, dimensiune font de 16px, fără bordură și cursor pointer. Sub buton, adăugați un div ascuns cu clasa „dropdown-content” (display: none, position: absolute, background-color: #f9f9f9, min-width: 200px, box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)) conținând trei legături: „Link 1”, „Link 2” și „Link 3”. Stilizați legăturile cu culoare neagră, padding de 12px 16px, fără text-decoration și display: block. La trecerea cursorului peste legătură, aplicați un fundal gri deschis (#f1f1f1). La trecerea cursorului peste containerul dropdown, afișați conținutul dropdown (display: block) și schimbați fundalul butonului într-un verde mai închis (#3e8e41).

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Dropdown Menu</title>
<style>
.dropdown {
  position: relative;
}

/* Style the dropdown button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside dropdown content */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change background color of dropdown button on hover */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Dropdown Menu</h2>
<p>Mouse over the button to see the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown Menu</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>