ఎలా సృష్టించాలి: డౌన్ ప్రేష్ మెనూ నేవిగేషన్ బార్

డౌన్ ప్రేష్ మెనూ నేవిగేషన్ బార్ సృష్టించడానికి తెలుసుకోండి.

డౌన్ ప్రేష్ మెనూ నేవిగేషన్ బార్ సృష్టించండి

వినియోగదారుడు నేవిగేషన్ బార్ లోని అంశాన్ని మౌస్ చేర్చినప్పుడు, డౌన్ ప్రేష్ మెనూ కనిపిస్తుంది.

మొదటి చర్య - HTML జోడించండి:

<div class="navbar">
  <a href="#home">హోమ్</a>
  <a href="#news">వార్తలు</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">లింక్ 1</a>
      <a href="#">లింక్ 2</a>
      <a href="#">లింక్ 3</a>
    </div>
  </div>
</div>

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

ఏదైనా అంశాన్ని ఉపయోగించి డౌన్ ప్రేష్ మెనూను తెరుచుకోండి, ఉదా. <button>, <a> లేదా <p> అంశాలు.

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

బటన్ మరియు మరొక <div> అంశాన్ని చుట్టివచ్చి, డౌన్ ప్రేష్ మెనూను సరైనవిధంగా స్థానం కట్టబెట్టండి.

రెండవ చర్య - CSS జోడించండి:

/* నేవిగేషన్ బార్ కంటైనర్ */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* నేవిగేషన్ బార్ లోని లింకులు */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* డౌన్ ప్రేష్ కంటైనర్ */
.dropdown {
  float: left;
  overflow: hidden;
}
/* డౌన్ ప్రేష్ బటన్ */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* మొబైలు పైన వర్తించే విలువలు ముఖ్యమైనది */
  margin: 0; /* మొబైల్ పైన వర్గాల ప్రక్కను ఉంచడానికి ముఖ్యం */
}
/* మౌస్ హోవర్ చేసినప్పుడు నేవిగేషన్ బార్ లింక్లకు రెడ్ బ్యాక్గ్రౌండ్ కలర్ జోడించండి */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* డ్రాప్ డౌన్ మెనూ కంటెంట్ (డిఫాల్ట్గా దాచబడింది) */
.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 {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* మౌస్ హోవర్ చేసినప్పుడు డ్రాప్ డౌన్ మెనూ లింక్లకు గ్రే బ్యాక్గ్రౌండ్ కలర్ జోడించండి */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* మౌస్ హోవర్ చేసినప్పుడు డ్రాప్ డౌన్ మెనూ చూపించండి */
.dropdown:hover .dropdown-content {
  display: block;
}

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

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

మేము నేవిగేషన్ బార్ మరియు నేవిగేషన్ బార్ లింక్లకు బ్యాక్గ్రౌండ్ కలర్, ప్యాడింగ్ మొదలైన స్టైల్స్ సెట్ చేశాము.

మేము డ్రాప్ డౌన్ మెనూ బటన్ కు బ్యాక్గ్రౌండ్ కలర్, ప్యాడింగ్ మొదలైన స్టైల్స్ సెట్ చేశాము.

.dropdown క్లాస్ ఉపయోగించబడింది .dropdown-content కంటైనర్. ఇది <div> ఎల్లెంట్ కాకుండా <a> ఎల్లెంట్ ఉంది కాబట్టి, ఇది లింక్ పైకి ఉండేందుకు ఫ్లోట్ చేయాలి.

.dropdown-content క్లాస్ ఉపయోగించాము మరియు వాస్తవ డ్రాప్ డౌన్ మెనూ ను కలిగిస్తుంది. ఇది డిఫాల్ట్గా దాచబడింది మరియు మౌస్ హోవర్ అయినప్పుడు చూపబడుతుంది (క్రిందికి చూడండి). నోట్: కనీస వెడల్పు 160px అయింది. ఈ సెట్టింగ్ ను మార్చవచ్చు.

కాంతి రంగం ఉపయోగించలేదు, బదులుగా box-shadow అటువంటి అంశంలో డ్రాప్ డౌన్ మెనూ ను ‘కార్డ్’ వలె చూడబడుతుంది. మేము కూడా z-index డ్రాప్ డౌన్ మెనూ ను మరొక మేనుమురుగు ఎల్లెంట్ ముందుకు చొప్పించండి.

:hover వినియోగదారు మౌస్ ను డ్రాప్ డౌన్ మెనూ బటన్ పైకి తీసుకువెళ్ళినప్పుడు డ్రాప్ డౌన్ మెనూ చూపించడానికి కాలింగ్ విండ్ ఉపయోగిస్తారు.

నేవిగేషన్ బార్ లోని క్లిక్ చేయగల డ్రాప్ డౌన్ మెనూ

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

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

శిక్షణాలు:CSS 下拉菜单

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

శిక్షణాలు:CSS 导航栏

శిక్షణాలు:రెస్పాన్సివ్ టాప్ నేవిగేషన్ బార్ సృష్టించడం ఎలా