Ícone de navegação móvel fácil ceia com alternância animada.
HTML:
<div class = “mni”> </div>
CSS:
.mni {
posição: absoluta;
topo: 1em;
direita: 1em;
largura: 2em;
altura: 2em;
cursor: ponteiro;
índice z: 9;
cor: # 777777;
transição: .2s facilitam tudo;
}
.mni.active {
transform: rotate (-90deg);
}
.mni: antes de {
conteúdo: “”;
posição: absoluta;
topo: 0;
esquerda: 0;
largura: 100%;
altura: 4px;
borda superior: 5px sólido;
borda inferior: 5px sólido;
}
.mni: após {
conteúdo: “”;
posição: absoluta;
inferior: 0;
esquerda: 0;
largura: 100%;
altura: 4px;
borda superior: 5px sólido;
borda inferior: 5px sólido;
}
JQuery:
$ (document) .on (‘click’, ‘. Mni’, function () {
$ (this) .toggleClass (‘active’);
});