- 用于定位下拉菜单内容所需的元素 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉菜单内容（默认隐藏） */
.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;
}
/* డౌన్ లోక్ మెనూలోని లింకులు */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* మౌసు సమీపంలో డౌన్ లోక్ లింకు రంగును మార్చు */
.dropdown-content a:hover {background-color: #ddd;}
/* డౌన్‌లోడ్‌ మెనూను చూపించండి (వినియోగదారు డౌన్‌లోడ్‌ మెనూ బటన్ నొక్కినప్పుడు జావాస్క్రిప్ట్ ఈ క్లాస్‌ను .dropdown-content కంటెయినర్‌కు జోడిస్తుంది) */
.show {display:block;}
ఉదాహరణ వివరణ:
మరియు మేము డౌన్‌లోడ్‌ మెనూ బటన్ కు బ్యాక్‌గ్రౌండ్ కలర్, ప్యాడింగ్, హోవర్ ప్రభావాలు మొదలైన స్టైల్స్‌ను అనుసరిస్తాము.
.dropdown క్లాస్‌ను ఉపయోగించి position:relativeమరియు మేము డౌన్‌లోడ్‌ మెనూ సంక్లిష్టతను డౌన్‌లోడ్‌ మెనూ బటన్ క్రిందన పెట్టడానికి కావలసినప్పుడు ఉపయోగిస్తాము position:absoluteఅవసరం.
.dropdown-content క్లాస్‌ను ఉపయోగించి వాస్తవ డౌన్‌లోడ్‌ మెనూను ఉంచండి. ఇది మూసివుండి ఉంటుంది మరియు మౌస్ హోవర్ చేసినప్పుడు చూపబడుతుంది (క్రింద చూడండి). నోటిస్: మీరు డౌన్‌లోడ్‌ మెనూ సంక్లిష్టతను బటన్ విస్తీర్ణంతో సమానంగా కనిపించాలి అని కోరుకున్నారేమో అప్పుడు వీధిని 100% చేయండి (చిన్న స్క్రీన్‌లో ఉపయోగించండి) overflow:auto స్క్రోల్‌ను చేర్చడానికి ఉపయోగించండి).
మేము కాంతిరేఖలను ఉపయోగించకుండా ఉంటాము మరియు box-shadow అంశంను ఉపయోగించి డౌన్‌లోడ్‌ మెనూను ఒక కార్డ్‌లాగా కనిపించేలా చేయండి. మేము కూడా ఉపయోగిస్తాము z-index డౌన్‌లోడ్‌ మెనూను ఇతర మెనూలకు ముందు పెట్టండి
మూడవ చర్య - జావాస్క్రిప్ట్‌ని జోడించండి
/* వినియోగదారు బటన్ నొక్కినప్పుడు డౌన్‌లోడ్‌ మెనూ సంక్లిష్టతను మార్చండి */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// వినియోగదారు డౌన్‌లోడ్‌ మెనూ బయటన క్లిక్ చేసినప్పుడు డౌన్‌లోడ్‌ మెనూ మూసివేయండి
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
స్వయంగా ప్రయత్నించండి