Campo de busca

Categoria Front-End

CSS
Menu drop-down responsivo

Menu drop-down responsivo

Por | 30 de abril, 2013 | 39 comentários

Com a onda do Design Responsivo, temos visto vários sites que possuem um menu drop-down. E ai surgiu a dúvida, como deve ficar o menu drop-down em um celular ou tablet? Resolvemos criar um exemplo base e disponibilizá-lo para vocês. :)

Antes de qualquer coisa, é bom ter em mãos o mapa do site, para saber o que será necessário estar no menu.

Eu preparei as Medias Queries de acordo com uma pré-definição que escolhi, com todas as resoluções disponíveis para celulares, tablets, notebooks e desktops.

/* Estilos para celulares de no máximo 176 x 220
========================================================================== */
@media all and (max-width: 319px) {
	/*aqui vai o css*/
}
 
/* Estilos para celulares principais - 320 x 568
========================================================================== */
@media all and (min-width: 320px) and (max-width: 532px) {
	/*aqui vai o css*/
}
 
/* Estilos para tablet de no mínimo 533 x 853
========================================================================== */
@media all and (min-width: 533px) and (max-width: 800px) {
	/*aqui vai o css*/
}
 
/* Estilos para desktop/notebook a partir de 801 x n
========================================================================== */
@media all and (min-width: 801px) {
	/*aqui vai o css*/
}

O visual do menu vai depender do que você quer. Mas basicamente, o funcionamento via CSS se baseia nisso:

.menu { display: block; position: relative }
.menu ul  { clear: both; list-style: none; margin: 0; padding: 0; z-index: 1000 }
.menu ul > li { float: left; position: relative }
.menu ul > li a { display: block; text-decoration: none; position: relative }
.menu ul > li ul { display: none; position: absolute; visibility: hidden; vertical-align: middle; padding: 0 }
.menu ul > li:hover ul { display: block; visibility: visible }
.menu ul > li li { float: none; margin: 0; position: relative; white-space: nowrap }
.menu ul > li li a { display: block; text-decoration: none }
.menu ul > li li ul { left: 100%; top: -1px }

Para a versão Mobile, é necessário “ocultar” o menu para que ele não ocupe tanto espaço. Com um jQuery é possivel transformá-lo em um botão que esconde o menu. O código que usei, foi esse abaixo:

$(".menu>ul").addClass("js");
$(".menu>ul").addClass("js").before('<div>Menu</div>'); 
$(".atalho").click(function(){ 
    $(".menu > ul").toggle(); 
}); 
$(window).resize(function(){ 
    if(window.innerWidth > 768) { 
        $(".menu > ul").removeAttr("style"); 
    } 
});

Se tiverem alguma dúvida ou observação, deixe seu comentário :D

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[39] Comentários  

Samuel

Muito massa! Parabéns.

30-04-2013 às 17:38 Responder

Rodolfo

Boa Eliane, ficou bonitão! No Windows Phone ficou 100%.

30-04-2013 às 19:48 Responder

Caio

Parabéns! Um ótimo menu, além de clean e responsivo o codigo está bem estruturado. Já tem o meu curtir S2 rsrs

14-11-2013 às 10:15 Responder

Eliane Garone

Eliane Garone

Em resposta a Caio

Oi Caio! Fico feliz que gostou! :D

14-11-2013 às 12:06 Responder

leandro vinicius de moura

Em resposta a Eliane Garone

seu menu e show 2 anos sou desenvolvedor web uns dos menus mais show q ja vi vc alem de ser linda esta de parabens!!!!!!!!!!!!!!

27-06-2014 às 07:29 Responder

Juhan Pablo

Muito bem escrito os breaking points, foi um dos pouquíssimos que FUNCIONA em todas as resoluções, no meu Lumia e no Galaxy funcionaram perfeitamente, parabéns. E obrigado pela postagem será uma referência.

06-12-2013 às 11:13 Responder

Eliane Garone

Eliane Garone

Em resposta a Juhan Pablo

Oi Juhan! :D Muitíssimo obrigada pelo comentário! Fico feliz que deu certo para o Lumia também *-*

06-12-2013 às 11:42 Responder

André

Testado e aprovado! Obrigado por compartilhar!

21-12-2013 às 11:47 Responder

Pablo

Eliane, primeiramente parabéns pelo post. Li uma publicação hoje mesmo em outro site dizendo que o JQuery não é tão boa ideia quando se trata de mobile, escreveram isso baseado no tempo de carregamento e na péssima velocidade de internet que encontramos no Brasil atualmente, inclusive deram uma boa alternativa um pouco mais limitada que é o zepto, porém, minha pergunta é a seguinte, como eu faria para esconder esse menu dessa mesma forma mais sem usar o JQuery de maneira simples?

11-02-2014 às 01:46 Responder

Victor Miguez

Victor Miguez

Em resposta a Pablo

Bom dia, Pablo! Tudo certo?

Então cara, como você mesmo disse, o Zepto é uma ótima alternativa. Nesse exemplo onde a Eliane usou o jQuery, ele pode ser simplesmente substituído pelo Zepto e sem nenhuma alteração no código, pois a sintaxe é a mesma que se você estivesse usando jQuery.

Então faça o download do Zepto.js e chame-o ao invés do jQuery.

Abraço!

11-02-2014 às 09:02 Responder

Pablo

Em resposta a Victor Miguez

Show de bola Victor, obrigado pela resposta! =]

11-02-2014 às 09:20 Responder

João Gustavo Balestrin dos Santos

Olá Eliane! Parabéns pela postagem, me ajudou muito!!

Até a Próxima;

29-03-2014 às 13:44 Responder

Luciano Cipirano

Boa Tarde, Elaine.

Obrigado pelo post e pelo download, eu estava procurando e vc me ajudou e muito, e já coloquei vc nos meus favoritos, adorei seus posts, continue assim.
Elaine, ve se voce pode me ajudar, tem algum site que voce conheça, que explica como faz AQUELAS LETRAS GRANDES NO MEIO DO SITE.

07-04-2014 às 15:57 Responder

Lucas

Otima dica vou usar no meu projeto , obrigado

10-04-2014 às 12:24 Responder

Silvana

Ola Eliane! Tudo bem!?
Só tenho uma dúvida, estou fazendo um blog em wordpress, onde coloco o jquery?

Obrigada
beijos

16-05-2014 às 12:33 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Silvana

Coloca antes de fechar a tag </body>.

23-05-2014 às 17:39 Responder

Ivan


Parabéns pela iniativa mas tive um problema: o Avast detectou vírus no arquivo.

29-07-2014 às 17:08 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Ivan

Xi! Deve ser falso positivo :)

20-08-2014 às 18:19 Responder

rafael

legal , me ajudou bastante.

02-08-2014 às 09:50 Responder

Igor Roberto

Parabéns Elaine, muito bom !

23-08-2014 às 19:16 Responder

natan martins

Oi tudo bem estou fazendo um site, gostaria de saber se posso usar o seu código com algumas alteração até que eu aprenda mais sobre o tema, escrevendo assim o meu próprio.

23-09-2014 às 11:23 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a natan martins

Fala Natan,

Pode usar o código sim, sem problemas!

Abs!

08-10-2014 às 10:56 Responder

Cidrin

Boa tarde amigos!
Bom, quero parabenizar Eliane pelo post.
Testei o menu no meu galaxy e funcionou perfeitamente. Gostei muito.
Tentei fazer esse menu no meu blog e simplesmente não aparece o Menu.
Vocês podem conferir no link: http://testemenuresponsivo.blogspot.com.br/?m=1 Vocês poderiam me ajudar? Agradeceria muito desde já!

26-11-2014 às 18:52 Responder

Cidrin

Em resposta a Cidrin

Continuo na peleja kkk
Detalhe pessoal, eu já tentei chamando o menu com Zepto.js e jQuery, mas nada. Será que é possível mesmo no blogspot? Com certeza esse menu, ajudaria muito os blogueiros. Eu agradecia muito pessoal, se vocês conseguirem.

27-11-2014 às 12:12 Responder

Eliane Garone

Em resposta a Cidrin

Oi! O blogspot não aceita links de javascript/jquery :/ Mas se você tentar em alguma hospedagem própria, vai ver que vai funcionar ;)

18-12-2014 às 21:08 Responder

Ângelo Márcio

Eliane, bom dia.

Excelente post. Comecei a desenvolver sites em wordpress, mas nunca usei menu dropdown nos meus layouts. Gostaria de usar este exemplo em um site que estou desenvolvendo, mas não tenho ideia de como aplicar o api. Você teria como me passar o api para eu aplicar no site? Desde já agradeço.

05-02-2015 às 12:14 Responder

Jhonathan

Muito bom, serviu perfeitamente para minha necessidade. Obrigado!

04-05-2015 às 09:17 Responder

Gilberto

Show de bola, muito obrigado!!

12-05-2015 às 16:21 Responder

Amaral

olá,
Parabéns pelo material.
entendo pouco de programação apenas o basico msmo html e css mas estou fazendo um site em wordpress e quero usar esse MENU pode me ajudar por favor?

coloquei o conteudo do "menu index.html" no meu header.php e o css no main-style.php até ai normal apareceu tudo ok, mas não faz o efeito de compactar qdo abre em mobile...
veja se fiz certo?
coloquei essa chamada do script antes de fechar a tag "body" e o arquivo q baixei "jquery.min.js" solto na pasta do meu tema ok?!

onde estou errando? por favor me de uma dica alguem vlw

obrigado desde ja.

28-05-2015 às 22:31 Responder

Gabriel Ribeiro

Gabriel Ribeiro

Em resposta a Amaral

Amaral,

Geralmente os blogs em wordpress já vem com JQuery, então imagino que não precisaria colocar.

Você pode chegar se não há erro de script, no console do browser.

Aperte f12 e clique na aba console. Veja se ele mostra algum erro que você possa consertar, ou qualquer coisa pode perguntar.

[]s

29-05-2015 às 10:13 Responder

Amaral

Em resposta a Gabriel Ribeiro

Obrigado Gabriel
Vou conferir lá sim, qquer coisa posto o resultado aki vlw.

Grato. E sucesso!
Abraço!

31-05-2015 às 18:08 Responder

josé

tem forma de o codigo js passar para outro ficheiro?

$(".menu>ul").addClass("js");

$(".menu>ul").addClass("js").before('&lt;div&gt;Menu&lt;/div&gt;');

$(".atalho").click(function(){
   $(".menu &gt; ul").toggle();
});

$(window).resize(function(){
   if(window.innerWidth &gt; 768) {
      $(".menu &gt; ul").removeAttr("style");
   }
});

27-06-2015 às 07:07 Responder

Renata

Olá, Eliane, muito bom seu tutorial. Tenho uma dúvida. Na página de demo diz:

Testado em:

" Opera Mobile
Iphone
Ipad 2
Chrome
Firefox
IE9+
Opera "

Não foi testado em Android ou você considerou Chrome como Android?

abs

19-09-2015 às 17:41 Responder

Rodolfo Pereira

Rodolfo Pereira

Em resposta a Renata

Oi Renata!

Creio que a Eliane não chegou a testar no Android.

Abs!

30-09-2015 às 16:58 Responder

Francisco

Parabens Gostei muitooo

30-06-2016 às 15:12 Responder

Walter

Parabéns pelo conteudo do seu blog. Amei.
Tenho um site. Eu mesmo o fiz, a duras penas. É o
www.prolector.com.br
Agora eu queria colocar um menu desses "dropdown", somente com "css".
Baixei o seu código e vi que veio junto o "jquery.min.js".
É mesmo necessário esse "jquery.min.js"?
Notei que funciona sem ele. Será que pode?
sds
Walter Vaccaro.

25-08-2016 às 12:44 Responder

Guilherme Luchesi

Guilherme Luchesi

Em resposta a Walter

Muito boa sua iniciativa Walter.

Então, é necessário o jquery sim. Contudo, analisei seu código e vimos que você já tinha o jquery carregado no site, por isso funcionou mesmo sem ter colocado a parte que chama essa biblioteca.

Bons estudos e continue assim.
Um abraço.

29-08-2016 às 15:43 Responder

Walter Vaccaro

Em resposta a Guilherme Luchesi

É que eu não testei no site. Como é tudo html, eu teste no meu PC, em uma pasta a parte. Montei tudo, e depois tirei o jquery. Continuou funcionando normalmente.
Por isso volto a perguntar. Será que é mesmo necessário?
abraços.
Waltler Vaccaro

30-08-2016 às 08:14 Responder

Guilherme Luchesi

Guilherme Luchesi

Em resposta a Walter Vaccaro

Agora entendi qual sua dúvida.

A parte do dropdown vai continuar funcionando normalmente mesmo sem jQuery, então caso tenha se interessado apenas pelo dropdown, pode usar sem a biblioteca tranquilamente.

Nesse exemplo, o uso do jQuery se faz necessário para que o menu seja responsivo, ou seja, adaptavél a dispositivos móveis.
Para mais informações sobre design responsivo, você pode checar esse nosso outro post: 
http://www.princiweb.com.br/blog/front-end/css/o-que-e-design-responsivo.html

Boa codificação ;)

30-08-2016 às 09:31 Responder