如何创建：菜单图标

如何创建菜单图标

Tathmini ya Kwanza - Ongeza HTML:

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

Tathmini ya Pili - Ongeza CSS:

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

Tafadhali tukiongezea mbinu yako

Mafanikio ya mbinu:

width na height Mfano wa hatua:

Tumewakilisha rangi ya mabara ya mawingu ya kawaida na mawingu ya kumpiga kati ya kila mabara.

Ikononi za mbinu

Tumewakilisha CSS na JavaScript, inasababisha kubadilika tabia ya ikona ya menyu kwa ikona ya kufungua/kufichwa:

Tathmini ya Kwanza - Ongeza HTML:

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

Tathmini ya Pili - Ongeza CSS:

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* Inarotisha mabara ya kwanza */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* Inafikia uonekaji kwa mabara ya pili */
.change .bar2 {opacity: 0;}
/* Inarotisha mabara ya kikamilifu */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

Tathmini ya Tatu - Ongeza JavaScript:

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

Tafadhali tukiongezea mbinu yako

Mafanikio ya mbinu:

HTML na CSS: Tumewakilisha katika ujenzi wa hivi karibuni, lakini tumeongeza kina container kwa kila kitu cha <div> na kumuhesha kina class kwa kila kitu.

Ela inayofanya kama mtu anapiga kichwa cha koma kwa divs (mstari) inaonyesha ishara ya kifua. Kama inatikia ukurasa, inafanya kiwango cha JavaScript ambalo kinasaidia kuihakika kina ujenzi mpya wa kina class, ambao kinasababisha kugusa mabara ya winguzi: mabara ya kwanza na ya kikamilifu inaonekana kama herufi X. Mabara ya kati inapungua na inaonekana kama inayofikia uonekaji.