ఎలా సృష్టించాలి: స్క్రూబు మెనూ

స్క్రూబు మెనూ సృష్టించండి

మొదటి చర్య - హైల్టెక్ పేజీలో జోడించండి:

<!-- ఆవరణ -->
<div id="myNav" class="overlay">
  <!-- మూసివేసిన ఆవరణ నేవిగేషన్ బటన్ -->
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <!-- Overlay content -->
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>
/* ఆవర్ లేయర్ నేవిగేషన్ మెనూను తెరిచినప్పుడు ఉపయోగించిన ఏ అంశాన్ని ఉపయోగించండి */
<span onclick="openNav()">open</span>

రెండవ దశ - CSS జోడించండి:

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

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

ఈ ఉదాహరణలో, ప్రారంభించినప్పుడు పైకప్పు నావిగేషన్ మెనూను ఎడమ నుండి కుడికి స్లైడ్ చేస్తాయి (0 నుండి 100% వెడల్పు వరకు):

పరిధి నుండి కుడికి స్లైడ్ చేయండి

/* <span> మెటాడ్యుల్ నొక్కినప్పుడు తెరుచుకోండి */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}
/* వినియోగదారు పైకప్పులో "x" చిహ్నాన్ని నొక్కినప్పుడు మూసివేయండి */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

亲自试一试

దిగువ ఉన్న ఉదాహరణలు పైకప్పు నావిగేషన్ మెనూను పై నుండి క్రిందకు స్లైడ్ చేస్తాయి (0 నుండి 100% అడుగును వరకు).

గమనించండి:ఈ ఉదాహరణలో, దిగువ ఉన్న ఉదాహరణలతో క్రిందకు మారిన CSS గా ఉంది (మొదటి అడుగును 0 గా, వెడల్పు 100% గా మరియు overflow-y కొరకు అదృశ్యము（వర్తికిని అడుగును నిలిపివేయండి, చిన్న స్క్రీన్ తప్ప））：

పై నుండి క్రిందకు స్లైడ్ చేయండి

/* 打开 */
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}
/* 关闭 */
function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

亲自试一试

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

అనిమేషన్ లేకుండా మెనూను తెరుచుకోండి

/* 打开 */
function openNav() {
  document.getElementById("myNav").style.display = "block";
}
/* 关闭 */
function closeNav() {
  document.getElementById("myNav").style.display = "none";
}

亲自试一试

相关页面

教程：CSS 导航栏