ఎలా సృష్టించాలి: మేనూ ఐకాన్స్

మేనూ ఐకాన్స్ ఎలా సృష్టించాలి

మొదటి పదక్షతి - HTML జోడించండి:

<div></div>
<div></div>
<div></div>

రెండవ పదక్షతి - CSS జోడించండి:

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

మీరే ప్రయత్నించండి

ఉదాహరణ వివరణాత్మకం:

width మరియు height లక్షణాలు ప్రతి బార్ వెడల్పు మరియు పొడవును నిర్దేశిస్తాయి.

మేము ప్రతి బార్ మధ్యలో అంతరాన్ని సృష్టించడానికి కాలర్ బ్లాక్ బ్యాక్గ్రౌండ్ మరియు పైన క్రమం మరియు క్రిందన బ్యాక్గ్రౌండ్ జోడించాము.

అనిమేషన్ ఐకాన్

CSS మరియు JavaScript ఉపయోగించి, క్లిక్ చేసినప్పుడు మెనూ ఐకాన్ను 'రద్దు/తొలగించు' ఐకాన్గా మార్చండి:

మొదటి పదక్షతి - HTML జోడించండి:

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

రెండవ పదక్షతి - CSS జోడించండి:

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* మొదటి బార్ చుట్టూ పరిమాణం */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* రెండవ బార్ ముక్కించండి */
.change .bar2 {opacity: 0;}
/* అంతిమ బార్ చుట్టూ పరిమాణం */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

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

function myFunction(x) {
  x.classList.toggle("change");
}

మీరే ప్రయత్నించండి

ఉదాహరణ వివరణాత్మకం:

HTML మరియు CSS: మేము ముందుగా ఉన్న స్టైల్స్ ను ఉపయోగించాము, కానీ ఈసారి <div> అంశాలకు ఒక కంటైనర్ అంశాన్ని పరివేషించాము మరియు ప్రతి అంశకు ఒక క్లాస్ పేరును నిర్దేశించాము.

పరికరం అంశం వినియోగదారుడు మౌస్ పరికరాన్ని divs (కప్పకాలు) పైన ముద్దిస్తే ఒక పింటర్ సంకేతాన్ని ప్రదర్శించడానికి ఉపయోగించబడుతుంది. దానిని క్లిక్ చేసినప్పుడు, దానికి ఒక కొత్త క్లాస్ పేరును జోడిస్తుంది అనే జావాస్క్రిప్ట్ ఫంక్షన్ నిర్వహిస్తుంది: ప్రతి స్థాయీ లైన్లు లోపలికి మరియు అంతిమ లైన్లు గా రూపాంతరించబడతాయి మరియు అక్షర 'x' గా చుట్టూ చుట్టూ పరిమాణం చేయబడతాయి. మధ్య లైన్లు క్రమంగా ముక్కించబడతాయి మరియు దృష్టి నుండి కానివి అవుతాయి.