如何创建:菜单图标

学习如何使用 CSS 创建菜单图标。

如果您没有使用图标库,您可以使用 CSS 创建一个基本的菜单图标:

菜单图标:

Subukan nang personal

动画菜单图标(点击它):

Subukan nang personal

如何创建菜单图标

Unang hakbang - Magdagdag ng HTML:

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

Ikalawa pang hakbang - Magdagdag ng CSS:

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

Subukan nang personal

Pagsasalin ng halimbawa:

width at height Ang mga attribute ay naghahatid ng lapad at taas ng bawat linya.

Nadagdagan ang kulay ng madilim na background at ang maliit na margin sa itaas at sa ilalim upang lumikha ng puwang sa pagitan ng bawat linya.

Ikonyo ng animasyon

Ginagamit ang CSS at JavaScript upang palitan ang icon ng menu sa icon na 'I-cancel/I-delete':

Unang hakbang - Magdagdag ng HTML:

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

Ikalawa pang hakbang - Magdagdag ng CSS:

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* Mag-rotate ng unang bar */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* Magbubulok ng ikalawang bar */
.change .bar2 {opacity: 0;}
/* Mag-rotate ng huling bar */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

Ikalawa pang hakbang - Magdagdag ng JavaScript:

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

Subukan nang personal

Pagsasalin ng halimbawa:

HTML at CSS: Ginamit namin ang parehong estilo na dati, ngunit ngayon ay sinasambahin ng isang elemento ng konteyner ang bawat <div> na elemento, at pinagbigay ng isang pangalan ng klase sa bawat elemento.

Ang elemento ng konteyner ay ginagamit upang ipakita ang simbolo ng pointer kapag ang mouse ay nasa ibabaw ng divs (linya). Kapag ito ay pinindot, ito ay magsasagawa ng isang JavaScript function, na magadagdag ng isang bagong pangalan ng klase, na magbabago ng estilo ng bawat horizontal na linya: ang unang at huling linya ay magiging likha at mag-rotate sa titik na 'x'. Ang mga gitnang linya ay magiging mabubulok at hindi makikita.