Menu

Home » Blog » Aprenda a fazer um slide menu responsivo

Aprenda a fazer um slide menu responsivo

tutoriais webdesign • 28-01-2014

Olá pessoal. Hoje explico como fazer um slide menu que se adapta a qualquer aparelho. O slide menu é um menu de navegação onde, através de um botão, ele pode aparecer e desaparecer com um movimento de abrir e fechar.

Para fazermos o slide menu, nós iremos utilizar além o html e css, uma função jQuery.

Abaixo segue o código completo. Clique nas abas html, css, js para ver o código e no botão MENU para ver a animação.

 

Explicando o código.

No html nós criamos a div id="botaoMenu" para utilizarmos como uma chave de acesso ao menu principal. É necessário também colocarmos um id no menu principal. No nosso exemplo coloarmos id="menu".

No css nós colocamos todas as larguras e alturas em porcentagem. Desta forma, nossa página irá se adaptar a qualquer aparelho. Observe que colocamos display:none para a ul. Assim, quando a página carregar, o menu estará oculto, cabendo ao jQuery a função de mostrá-lo e escondê-lo.

A função jQuery funciona da seguinte forma: Quando clicar no #botaoMenu $("#botaoMenu").click(function(){ , execute a função .slideToggle() no #menu $("#menu").slideToggle(); .

A função .slideToggle() é responsável por mostrar e esconder o menu com a animação de abrir e fechar.

Bom pessoal, espero que tenham gostado. Até a próxima.



comments powered by Disqus

» Categorias