CSS Dropdown Menu
- Vorige pagina CSS Horizontal Navigation Bar
- Volgende pagina CSS Image Gallery
Maak een hoverbare dropdown-list met behulp van CSS.
Demonstratie: Dropdown-casus
Voorbeeld
Plaats de muispunt op het volgende voorbeeld:
Basis dropdown-menu
Maak een dropdown-balk die verschijnt wanneer de gebruiker de muis over het element beweegt.
Voorbeeld
<style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } </style> <div class="dropdown"> <span>Muis over mij</span> <div class="dropdown-content"> <p>Hello World!</p> </div> </div>
Voorbeeldverklaring:
HTML
Gebruik elk element om de inhoud van de dropdown te openen, bijvoorbeeld <span> of <button>-elementen.
Maak de inhoud van de dropdown met behulp van een container-element (zoals <div>) en voeg daarin elke inhoud toe.
Gebruik <div>-elementen om deze elementen om te geven en de inhoud van de dropdown correct te positioneren met CSS.
CSS
.dropdown
klasse wordt gebruikt position:relative
,wanneer we de inhoud van de dropdown onder de knop willen plaatsen (gebruik position:absolute
)gebruikt moet worden.
.dropdown-content
De klasse slaat de daadwerkelijke inhoud van de dropdown-menu op. Standaard is deze verborgen en wordt getoond bij hover (zie verder). Let op:min-width
Wordt ingesteld op 160px. Deze instelling kan altijd worden gewijzigd. Tip: Als u de breedte van de tekenbalk wilt instellen op dezelfde breedte als de knop, stel dan de breedte in op 100% (instelling overflow:auto
Kan worden weergegeven in een rolbalk op een klein scherm).
We hebben CSS gebruikt. box-shadow
eigenschappen in plaats van randen, zodat het dropdown-menu eruitziet als een "kaart".
wanneer de gebruiker de muis over de dropdown-knop houdt,:hover
Selectors worden gebruikt om het dropdown-menu weer te geven.
Dropdown-menu
Maak een dropdown-menu en laat gebruikers een optie uit een lijst kiezen:
Dit voorbeeld is vergelijkbaar met het vorige, behalve dat we een link hebben toegevoegd aan het dropdown-menu en deze hebben geformatteerd om overeen te komen met de stijl van de dropdown-knop:
Voorbeeld
<style> /* 设置下拉按钮的样式 */ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* 容器 <div> - 需要放置下拉内容 */ .dropdown { position: relative; display: inline-block; } /* 下拉内容(默认隐藏) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* 下拉链接 */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* 悬停时更改下拉链接的颜色 */ .dropdown-content a:hover {background-color: #f1f1f1} /* 悬停时显示下拉菜单 */ .dropdown:hover .dropdown-content { display: block; } /* 显示下拉内容时,更改下拉按钮的背景颜色 */ .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>
Rechts afgevlakte dropdown-menu inhoud
Als je wilt dat de dropdown-menu van rechts naar links schuift in plaats van van links naar rechts, voeg dan toe right: 0;
:
Voorbeeld
.dropdown-content { right: 0; }
Meer voorbeelden
1 - Dropdown-afbeelding
Hoe je afbeeldingen en andere inhoud toevoegt aan een dropdown-box.
Houd de muispunt op het beeld


2 - Dropdown-menu
Hoe je een dropdown-menu aan de navigatiebalk kunt toevoegen.
- Vorige pagina CSS Horizontal Navigation Bar
- Volgende pagina CSS Image Gallery