ఎలా సృష్టించాలి: సైడ్ నేవిగేషన్

సానుకూల సిద్ధించిన సైడ్ నేవిగేషన్ స్థాపించండి

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

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">గురించి</a>
  <a href="#">సేవలు</a>
  <a href="#">క్లయింట్స్</a>
  <a href="#">సంప్రదించండి</a>
</div>
<!-- ఏ మేకపు ఉపయోగించి సైడ్ నేవిగేషన్ ను తెరిచివేయండి -->
<span onclick="openNav()">open</span>
<!-- మీరు సైడ్ నేవిగేషన్ పేజీ సారాంశాన్ని కుడిపట్టాలి అని ఆశిస్తున్నట్లయితే, అన్ని పేజీ సారాంశాలను ఈ div లోపల పెట్టండి (మీరు సైడ్ నేవిగేషన్ పేజీ పైకి ఉంచాలి అని ఆశిస్తున్నట్లయితే, ఈ అమర్పును ఉపయోగించవద్దు) -->
<div id="main">
  ...
</div>

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

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

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

ఈ ఉదాహరణలో, సైడ్‌నేవిగేషన్ స్లైడ్ ఇన్ అవుతుంది మరియు సైడ్‌నేవిగేషన్ వెడిథ్ ను 250px చేయబడుతుంది:

సైడ్‌నేవిగేషన్ కవర్ ఉదాహరణ

/* సైడ్‌నేవిగేషన్ వెడిథ్ ను 250px చేయండి */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* సైడ్‌నేవిగేషన్ వెడిథ్ ను 0 చేయండి */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

亲自试一试

ఈ ఉదాహరణలో, సైడ్‌నేవిగేషన్ స్లైడ్ ఇన్ అవుతుంది మరియు పేజీ కంటెంట్ కు ఎడమకు కదిలుతుంది (సైడ్‌నేవిగేషన్ వెడిథ్ అంచెను పేజీ కంటెంట్ కు ఎడమ బాహ్య మార్గం అంచెను ఉపయోగిస్తారు):

సైడ్‌నేవిగేషన్ కంటెంట్ కు కదిలుస్తుంది

/* సైడ్‌నేవిగేషన్ వెడిథ్ ను 250px చేయండి, పేజీ కంటెంట్ కు ఎడమ బాహ్య మార్గం 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* సైడ్‌నేవిగేషన్ వెడిథ్ ను 0 చేయండి */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

亲自试一试

ఈ ఉదాహరణలో సైడ్‌నేవిగేషన్ స్లైడ్ ఇన్ అవుతుంది మరియు పేజీ కంటెంట్ కు ఎడమకు కదిలుతుంది. అయితే, ఈ సారి మేము body ఎలిమెంట్ కు 40% అనుప్రయోగించబడుతున్న కాల్పనిక రెడ్డి బ్యాక్‌గ్రౌండ్ కలిగించాము మరియు సైడ్‌నేవిగేషన్ ను "అధికారణం" చేయండి.

అనుప్రయోగించబడుతున్న సైడ్‌నేవిగేషన్ అనుప్రయోగం

/* సైడ్‌నేవిగేషన్ వెడిథ్ ను 250px చేయండి, పేజీ కంటెంట్ కు ఎడమ బాహ్య మార్గం 250px, మరియు body కు కాల్పనిక రెడ్డి బ్యాక్‌గ్రౌండ్ కలిగించండి */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* సైడ్‌నేవిగేషన్ వెడితం 0 గా నిర్వహించండి, పేజీ కంటెంట్ ఎక్స్‌టర్నల్ మార్జిన్ లెఫ్ట్ 0, బాడీ బేక్గ్రౌండ్ కలర్ తెలుపు */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

亲自试一试

ఈ ఉదాహరణలో, సైడ్‌నేవిగేషన్ కుడి పక్క నుండి స్లైడ్ అవుతుంది మరియు పూర్తి పేజీ వెడితంలో ఉంటుంది (వెడితం 100%):

పూర్తి వెడితం గల సైడ్‌నేవిగేషన్:

/* సైడ్‌నేవిగేషన్ను తెరవడం */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}
/* సైడ్‌నేవిగేషన్ను మూసివేయడం/దాచడం */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

亲自试一试

సైడ్‌నేవిగేషన్ మెనూను తెరవడం మరియు మూసివేయడంలో ఏ అనిమేషన్ లేని ఈ ఉదాహరణ చూపుతుంది.

ఎండింగ్ లేని Sidenav

/* సైడ్‌నేవిగేషన్ను తెరవడం */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}
/* సైడ్‌నేవిగేషన్ను మూసివేయడం/దాచడం */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

亲自试一试

కుడిపక్క నేవిగేషన్ మెనూ సృష్టించాలి అని ఈ ఉదాహరణ చూపుతుంది:

కుడిపక్క నేవిగేషన్:

.sidenav {
  right: 0;
}

亲自试一试

ఎలా ఒక ఎల్లప్పుడూ చూపబడే సైడ్‌నేవిగేషన్ మెనూ సృష్టించాలి అని ఈ ఉదాహరణ చూపుతుంది (ఫిక్సెడ్ స్థానం):

ఎల్లప్పుడూ చూపబడే సైడ్‌నేవిగేషన్:

/* సైడ్‌నేవిగేషన్ */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* పేజీ కంటెంట్ */
.main {
  margin-left: 200px; /* సైడ్‌నేవిగేషన్ వెడితను అనుగుణంగా */
}

亲自试一试

相关页面

教程：CSS 导航栏