CSS 下拉菜单

CSS ద్వారా హోవర్ డ్రాప్‌డౌన్ జాబితా సృష్టించండి.

ప్రదర్శన: డ్రాప్‌డౌన్ ఉదాహరణ

实例

క్రింది ఉదాహరణపై మౌస్ పంపిణీ చేయండి:

డ్రాప్‌డౌన్ టెక్స్ట్

Hello World!

Link 1 Link 2 Link 3
చిత్రం:కాఫీ
కాఫీ
కాఫీ

బేసిక్ డ్రాప్‌డౌన్ మెనూ

ఉపయోగదారుడు కంపొనెంట్‌పై మౌస్ పైన వచ్చే డ్రాప్‌డౌన్ బాక్స్ సృష్టించడానికి.

实例

<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>మీరు నాకు మూసిపెట్టండి</span>
  <div class="dropdown-content">
    <p>Hello World!</p>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ వివరణ:

HTML

డ్రాప్‌డౌన్ కంటెంట్‌ను తెరిచేండి ఏదైనా కంపొనెంట్‌ను ఉపయోగించండి, ఉదా. <span> లేదా <button> కంపొనెంట్‌లు.

డ్రాప్‌డౌన్ కంటెంట్‌ను సృష్టించడానికి కన్నులు ఉపయోగించండి (ఉదా. <div>), అన్ని కంటెంట్‌ను లోపల జోడించండి.

ఈ మేలు పెట్టిన కెలిపెట్టును ఉపయోగించండి, డ్రాప్‌డౌన్ కంటెంట్‌ను సరైన రీతిలో స్థానం కాకుండా స్థానం పెట్టండి.

CSS

.dropdown క్లాస్ ఉపయోగించండి position:relativeడ్రాప్‌డౌన్ కంటెంట్‌ను డ్రాప్‌డౌన్ బటన్ పైన చేర్చాలి అయితే (ఉపయోగించండి) position:absolute). ఈ క్లాస్ ఉపయోగించడానికి అవసరం ఉంటుంది.

.dropdown-content క్లాస్ స్టోరేజ్ చేయబడిన డ్రాప్‌డౌన్ కంటెంట్ ను స్టోరేజ్ చేయండి. అప్రమేయంగా ఇది మరుగుపడి ఉంటుంది మరియు హోవర్ చేసినప్పుడు చూపబడుతుంది (క్రిందికి చూడండి). గమనిక: ఇది క్లాస్ ఉపయోగించడానికి అవసరం ఉంటుంది.min-width 160px గా సెట్ చేయండి. ఈ సెట్టింగ్‌ను ఏ సమయంలోనైనా మార్చవచ్చు. సూచన: మీరు డ్రాప్‌డౌన్ కంటెంట్ వెడల్పును డ్రాప్‌డౌన్ బటన్ వెడల్పుతో సమానంగా కావాలని కావాలి అయితే, 100％ గా వెడల్పును సెట్ చేయండి (సెట్ చేయండి). overflow:auto చిన్న స్క్రీన్‌లో స్క్రాల్ చేయవచ్చు).

మేము సిఎస్ఎస్ వినియోగించాము box-shadow అంతేకాకుండా కాంటర్ ఉపయోగించి బార్డర్ కాకుండా డౌన్‌లోడ్‌మెనూ అనిపించేలా చేయడానికి అనుమతిస్తాం:

వినియోగదారు డౌన్‌లోడ్‌బాటన్ పైకి మౌస్ ను కరస్తే ఉంటాం పరిణామం అవుతుంది::hover డౌన్‌లోడ్‌మెనూ ప్రదర్శించడానికి వినియోగించే సెలెక్టర్

డౌన్‌లోడ్‌మెనూ

ఒక డౌన్‌లోడ్‌మెనూ సృష్టించండి మరియు వినియోగదారుకు జాబితా నుండి ఒక ఎంపిక చేయడానికి అనుమతించండి:

Link 1 Link 2 Link 3

ఈ ఉదాహరణ ముంది ఉదాహరణతో సమానం, కానీ మేము డౌన్‌లోడ్‌బాక్స్‌లో లింకులను జోడించాము మరియు దానికి డౌన్‌లోడ్‌బాటన్ స్టైల్స్ అనుగుణంగా స్టైల్స్ అనుసరించాము:

实例

<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">
    Link 1
    Link 2
    Link 3

స్వయంగా ప్రయత్నించండి

右对齐的下拉菜单内容

Link 1 Link 2 Link 3
Link 1 Link 2 Link 3

如果希望下拉菜单从右到左而不是从左到右，请添加 right: 0;：

实例

.dropdown-content {
  right: 0;
}

స్వయంగా ప్రయత్నించండి

更多实例

1 - డ్రాప్‌డౌన్ ఇమేజ్

డ్రాప్‌డౌన్ బాక్స్‌లో చిత్రం మరియు ఇతర కంటెంట్ జోడించడం ఎలా.

చిత్రంపై మౌస్ పింటర్ పెట్టండి:

కాఫీ
కాఫీ
కాఫీ

స్వయంగా ప్రయత్నించండి

2 - డ్రాప్‌డౌన్ నేవిగేషన్

నేవిగేషన్ బార్లో డ్రాప్‌డౌన్ మెనూ జోడించండి ఎలా.

స్వయంగా ప్రయత్నించండి