ఎలా సృష్టించాలి: డౌన్ మ్యాన్యూ ప్యానల్

ప్రక్కవర్తి సూచికలు లో డౌన్ మ్యాన్యూ జోడించడానికి ఎలా నేర్చుకోండి.

ప్రక్కవర్తి ప్యానల్ సూచికలు సృష్టించండి

మొదటి అడుగు - హెచ్ఎంఎల్ జోడించండి:

<div class="sidenav">
  <a href="#about">గురించి</a>
  <a href="#services">సేవలు</a>
  <a href="#clients">క్లయింట్స్</a>
  <a href="#contact">పరిచయం</a>
  <button class="dropdown-btn">డౌన్‌లోడ్
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">లింక్ 1</a>
    <a href="#">లింక్ 2</a>
    <a href="#">లింక్ 3</a>
  </div>
  <a href="#contact">శోధన</a>
</div>

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

ఏదైనా ఎల్లాంటి ఎలమెంట్ ద్వారా డౌన్‌లోడ్ మెనూ తెరిచిపెట్టండి, ఉదా, <button>, <a> లేదా <p> ఎలమెంట్.

డౌన్‌లోడ్ మెనూ జోడించడానికి కంటైనర్ ఎల్లాంటిని ఉపయోగించండి (ఉదా, <div>) మరియు లింక్‌లు జోడించండి. మేము సైడ్‌బార్ పరిధిలోని అన్ని లింక్‌లకు అదే స్టైల్‌ని ఉపయోగిస్తాము.

రెండవ దశ - సిఎస్ఎస్ జోడించండి:

/* పూర్తి ప్రక్షేపణం వాల్యూమ్ సైడ్ నేవిగేషన్ */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* సైడ్‌బార్ లింక్‌లు మరియు డౌన్‌లోడ్ బటన్ స్టైల్‌లు అమర్చు */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}
/* మౌసు అప్ స్థితిలో */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}
/* ప్రధాన కంటెంట్ */
.main {
  margin-left: 200px; /* పక్కవాటి వెడల్పును సమానంగా చేయండి */
  font-size: 20px; /* స్క్రోల్ని చేయడానికి టెక్స్ట్ను పెద్దదిచేయండి */
  padding: 0px 10px;
}
/* కార్యకలాపం చేస్తున్న డౌన్ మెనూ బటన్కు కార్యకలాపం క్లాస్ జోడించండి */
.active {
  background-color: green;
  color: white;
}
/* డౌన్ మెనూ కంటెంట్ కంటైనర్ (డిఫాల్ట్గా దాచినది). ఎంపికలు: డౌన్ మెనూ కంటెంట్కు మరింత కాంట్రాస్టింగ్ బ్యాక్గ్రౌండ్ కలర్ మరియు కుడి అంతరాంతరాన్ని జోడించడం ద్వారా డిజైన్ను మార్చండి */
.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}
/* ఎంపికలు: క్రిందకు దిరిగిన పతకానికి శైలిని అమర్చండి */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

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

మూడవ చర్య - జావాస్క్రిప్ట్ను జోడించండి:

/* అన్ని డౌన్ మెనూ బటన్లను పరిశీలించండి దాని డౌన్ మెనూ కంటెంట్ని మరియు దానిని కనిపించకుండా మార్చడానికి - ఇది ఉపయోగదారుకు అనేక డౌన్ మెనూలను సహాయపడుతుంది మరియు ఏ సంఘర్షణనూ ఏర్పరచదు */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

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

సంబంధిత పేజీలు

పాఠ్యం:CSS 下拉菜单

పాఠ్యం:క్లిక్ చేయగల డౌన్ మెనూలను ఎలా సృష్టించాలి

పాఠ్యం:CSS 导航栏

పాఠ్యం:పరిపక్వలో పక్కవాటి నేవిగేషన్ ను ఎలా సృష్టించాలి