సృష్టించండి: సైడ్ నేవిగేషన్ బటన్

ప్రయోగించదగిన సైడ్ నేవిగేషన్ స్క్రీన్ సృష్టించండి

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

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">నాకు గురించి</a>
  <a href="#" id="blog">బ్లాగ్</a>
  <a href="#" id="projects">ప్రాజెక్టులు</a>
  <a href="#" id="contact">సంప్రదించండి</a>
</div>

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

/* సైడ్ నేవిగేషన్ లింక్ల స్టైల్స్ నిర్ణయించండి */
#mySidenav a {
  position: absolute; /* బ్రౌజర్ విండో పరంగా నిల్వ చేయండి */
  left: -80px; /* వాటిని స్క్రీన్ బయటకు నిల్వ చేయండి */
  transition: 0.3s; /* మౌస్ హోవర్ విధంగా పరివర్తన చేయండి */
  padding: 15px; /* 15px లోపలి పద్ధతి */
  width: 100px; /* ప్రత్యేక వెడల్పు నిర్ణయించండి */
  text-decoration: none; /* అందుకు క్రింది వరుసను తొలగించండి */
  font-size: 20px; /* ఫాంట్ పరిమాణాన్ని పెంచండి */
  color: white; /* వచన రంగును తెలుపు చేయండి */
  border-radius: 0 5px 5px 0; /* కుడి పైకి మరియు కుడి పైకి గుండ్రము */
}
#mySidenav a:hover {
  left: 0; /* మౌస్ హోవర్ విధంగా అంశాన్ని ప్రదర్శించండి */
}
/* about లింక్ చేయండి: పైకి 20px దూరంలో, ఆకుపచ్చ బ్యాక్‌గ్రౌండ్ */
#about {
  top: 20px;
  background-color: #04AA6D;
}
#blog {
  top: 80px;
  background-color: #2196F3; /* నీలి రంగు */
}
#projects {
  top: 140px;
  background-color: #f44336; /* ఎరుపు రంగు */
}
#contact {
  top: 200px;
  background-color: #555 /* పసుపు రంగు */
}

亲自试一试

相关页面

教程：CSS 导航栏