Como criar o efeito, botão menu ?

Jquery

>

Em 30/01/2017 at 23:51, Caymmi disse:

Eu queria saber como é feito ou o nome de desse efeito desse menu vertical do site do semantic ui, semantic-ui.com

quando clico no botão menu ele aparece deslizando para a direita e some deslizando para a esquerda.

Boa tarde Caymmi, você precisa de um exemplo prático ? Como disse o amigo ali acima, é feito com jquery. Mas também pode ser feito com JavaScript puro. Se precisar de um exemplo prático posso fazer um.

Ou apenas com CSS utilizando MediaQuery

Alguns exemplos com jQuery (tabless s2)

https://tableless.com.br/fazendo-um-slide-menu-mobile-sem-plugin/

https://tableless.com.br/menu-retratil-com-css-e-jquery/

>

2 horas atrás, gabrieldarezzo disse:

Ou apenas com CSS utilizando MediaQuery

Alguns exemplos com jQuery (tabless s2)

https://tableless.com.br/fazendo-um-slide-menu-mobile-sem-plugin/

https://tableless.com.br/menu-retratil-com-css-e-jquery/

Boa! Apenas com css também é possível!

Como já foi dito, pode-se fazer com jQuery, Javascript ou CSS e a ideia é básica: deixa o menu 'visível', porém fora da tela (left: -100%, por exemplo) e quando clicar no ícone do menu muda a propriedade left de -100% para 0. Para parecer melhor com o exemplo do site citado, pode-se utilizar o animation/transition do CSS!

>

11 horas atrás, Cleiton Alves disse:

Como já foi dito, pode-se fazer com jQuery, Javascript ou CSS e a ideia é básica: deixa o menu 'visível', porém fora da tela (left: -100%, por exemplo) e quando clicar no ícone do menu muda a propriedade left de -100% para 0. Para parecer melhor com o exemplo do site citado, pode-se utilizar o animation/transition do CSS!

Sim exato, poderia ser algo assim: no css

#sidebar{
position:fixed;
width:500px;
height:500px;
transition:all .5s;
top:0;
}

.open{
left:0;
}

.closed{
left:-100%;
}

	 

	Utilizando essas classes para realizar a animação de esconder e exibir o menu. Utilize o JS para trocar a classe do elemento com o id sidebar. algo assim :

	 

var $sidebar = document.getElementById('sidebar');

var $btnOpenMenu = document.getElementById('id-do-seu-botao');

$btnOpenMenu.onclick = function(){
	$sidebar.className = $sidebar.className === 'closed' ? 'open' : 'closed';
};

	Isso resolve!

Bom, como eu utilizo o Materializecss, ele próprio tem uns efeitos legais.

http://materializecss.com/