సృష్టించడం ఎలా: స్థిరమైన పడమర ప్యానల్

ఫిక్స్డ్ సైడ్బార్ సృష్టించండి

మొదటి దశ - హ్ట్మ్ఎల్ జోడించండి:

<!-- సైడ్నేషన్ నేవిగేషన్ -->
<div class="sidenav">
  <a href="#">గురించి</a>
  <a href="#">సేవలు</a>
  <a href="#">క్లయింట్స్</a>
  <a href="#">పరిచయం</a>
</div>
<!-- పేజీ కంటెంట్ -->
<div class="main">
  ...
</div>

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

/* సైడ్బార్ మెనూ */
.sidenav {
  height: 100%; /* పూర్తి పొడవు: మీరు 'ఆటో' పొడవును కావలసినప్పుడు ఈ సెట్ చేయవద్దు */
  width: 160px; /* సైడ్బార్ యొక్క వెడల్పు సెట్ చేయండి */
  position: fixed; /* ఫిక్స్డ్ సైడ్బార్ (స్క్రోల్ చేయడంలో అదే స్థానంలో ఉంచండి) */
  z-index: 1; /* ఎప్పుడూ టాప్ లో ఉంచండి */
  top: 0; /* ఎప్పుడూ టాప్ లో ఉంచండి */
  left: 0;
  background-color: #111; /* నలుపు */
  overflow-x: hidden; /* హోరిజంటల్ స్క్రోల్ నిషేధించండి */
  padding-top: 20px;
}
/* నావిగేషన్ మెనూ లింక్లు */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}
/* మీరు నావిగేషన్ లింక్లపై మౌస్ ని లంకెలో పెట్టినప్పుడు దాని రంగు మార్చండి */
.sidenav a:hover {
  color: #f1f1f1;
}
/* పేజీ కంటెంట్ స్టైల్స్ సెట్ చేయండి */
.main {
  margin-left: 160px; /* సైడ్బార్ యొక్క వెడల్పుతో సమానం */
  padding: 0px 10px;
}
/* 450 పిక్సెల్స్ కంటే తక్కువ పొడవు కలిగిన చిన్న స్క్రీన్లో సైడ్బార్ యొక్క స్టైల్స్ మార్చండి (తక్కువ అంతరాంతరాలు మరియు చిన్న ఫాంట్ సైజ్) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

相关页面

教程：CSS 导航栏

教程：如何创建侧导航栏