如何创建:可悬停的下拉菜单
- Föregående sida Navigationsfält på bild
- Nästa sida Klicka på rullgardin
学习如何使用 CSS 创建可悬停的下拉菜单。
下拉菜单
下拉菜单是一种可切换的菜单,允许用户从预定义列表中选择一个值:
创建可悬停的下拉菜单
创建一个下拉菜单,当用户将鼠标移动到元素上时显示该菜单。
第一步 - 添加 HTML:
<div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Länk 1</a> <a href="#">Länk 2</a> <a href="#">Länk 3</a> </div> </div>
Exempel på förklaring:
使用任何元素打开下拉菜单,例如 <button>、<a> 或 <p> 元素。
使用容器元素(如 <div>)创建下拉菜单,并在其中添加下拉菜单链接。
使用 <div> 元素将按钮和 <div> 包装起来,以便使用 CSS 正确定位下拉菜单。
第二步 - 添加 CSS:
/* 下拉按钮 */ .dropbtn { background-color: #04AA6D; color: white; padding: 16px; font-size: 16px; border: none; } /* 容器<div> - 用于定位下拉菜单内容 */ .dropdown { position: relative; display: inline-block; } /* Rullgardinsinnehåll (som standard dolt) */ .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Länkar inom rullgardinsmenyn */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Ändra färgen på länkar i rullgardinsmenyn när muspekaren hovrar över */ .dropdown-content a:hover {background-color: #ddd;} /* Visa rullgardinsmenyn när muspekaren hovrar över */ .dropdown:hover .dropdown-content {display: block;} /* Ändra bakgrundsfärgen på rullgardinsknappen när innehållet visas */ .dropdown:hover .dropbtn {background-color: #3e8e41;}
Exempel på förklaring:
Vi har redan ställt in stilar för rullgardinsknappen med bakgrundsfärg, inre marginaler m.m.
.dropdown
klassen används position:relative
när vi vill placera rullgardinsmenyns innehåll precis under rullgardinsknappen (använd position:absolute
)
.dropdown-content
Klassen innehåller den faktiska rullgardinsmenyn. Den är som standard dold och kommer att visas vid muspekarens överdragning (se nedan).Observera att minsta bredd är satt till 160px. Vänligen justera denna inställning. Tips: Om du vill att rullgardinsmenyns innehålls bredd ska vara lika bred som rullgardinsknappen, sätt bredden till 100% (och sätt overflow:auto
för att aktivera rullning på små skärmar).
Vi använder inte kanter utan box-shadow
egenskap för att göra rullgardinsmenyn ser ut som en 'karta'. Vi använder också z-index
Placera rullgardinsmenyn framför andra element.
:hover
Väljare används för att visa rullgardinsmenyn när användaren flyttar muspekaren över rullgardinsknappen.
Högerjusterad rullgardinslista
Navigationsfältets rullgardinslista
Relaterade sidor
Tutorials:CSS rullgardin
Tutorials:Hur man skapar en klickbar rullgardin
- Föregående sida Navigationsfält på bild
- Nästa sida Klicka på rullgardin