Ajuda para criar menu responsivo
Amigos, alguém poderia me ajudar a criar um menu desses que fica na parte superior da tela e que quando visualizamos de um smartphone ou redimensionamos o browser,
ele "encolhe" e aparece uma opção para expandir? Tipo essa da própria DevMedia.
obrigado.
ele "encolhe" e aparece uma opção para expandir? Tipo essa da própria DevMedia.
obrigado.
Marcelo Pastore
Curtidas 0
Respostas
Joel Rodrigues
31/12/2013
Olá, Marcelo.
Existem alguns frameworks/plugins/soluções prontas que já fazem esse tipo de menu, bastando referenciar alguns arquivos CSS e JS. Eu indico o uso do Bootstrap, que principalmente na sua nova versão, já traz nas configurações default recursos de responsividade que quebram um galho na hora de desenvolver interfaces com esse requisito.
Dê uma olhada no framework e se tiver dificuldade para criar o menu, volte a avisar aqui.
Site: Bootstrap.
Existem alguns frameworks/plugins/soluções prontas que já fazem esse tipo de menu, bastando referenciar alguns arquivos CSS e JS. Eu indico o uso do Bootstrap, que principalmente na sua nova versão, já traz nas configurações default recursos de responsividade que quebram um galho na hora de desenvolver interfaces com esse requisito.
Dê uma olhada no framework e se tiver dificuldade para criar o menu, volte a avisar aqui.
Site: Bootstrap.
GOSTEI 0
Marcelo Pastore
31/12/2013
na criação do menu, ele ja deixa como eu quero, ou existe algumas configurações prorprias?
GOSTEI 0
Fernanda Acacia
31/12/2013
Joel, uma perguntinha, posos usar o bootstrap com C#?
GOSTEI 0
Roniere Almeida
31/12/2013
olá amigos, fiquei interessado nesse menu, igual o da devmedia, acompanhando...
GOSTEI 0
Joel Rodrigues
31/12/2013
Joel, uma perguntinha, posos usar o bootstrap com C#?
O Bootstrap é um framework front-end, sendo assim, você pode usar na construção de páginas web com qualquer tecnologia server-side, afinal, ele não interage diretamente com a linguagem de programação.
GOSTEI 0
Joel Rodrigues
31/12/2013
na criação do menu, ele ja deixa como eu quero, ou existe algumas configurações prorprias?
Existem várias configurações, mas o comportamento original dele já é de ser responsivo.
GOSTEI 0
Marcelo Pastore
31/12/2013
na criação do menu, ele ja deixa como eu quero, ou existe algumas configurações prorprias?
Existem várias configurações, mas o comportamento original dele já é de ser responsivo.no site oficial tem a documentação dele? e em portugues?
GOSTEI 0
Fernanda Acacia
31/12/2013
Joel, uma perguntinha, posos usar o bootstrap com C#?
O Bootstrap é um framework front-end, sendo assim, você pode usar na construção de páginas web com qualquer tecnologia server-side, afinal, ele não interage diretamente com a linguagem de programação.que otimo, isso ajudará bastante em criar layouts, obrigada.
GOSTEI 0
Joel Rodrigues
31/12/2013
na criação do menu, ele ja deixa como eu quero, ou existe algumas configurações prorprias?
Existem várias configurações, mas o comportamento original dele já é de ser responsivo.no site oficial tem a documentação dele? e em portugues?
GOSTEI 0
Marcelo Pastore
31/12/2013
pode deixar, ja estou acompanhando. obrigado.
GOSTEI 0
Joel Rodrigues
31/12/2013
pode deixar, ja estou acompanhando. obrigado.
Se conseguir, poste aqui os resultados, ou como fez.
GOSTEI 0
Marcelo Pastore
31/12/2013
só não consegui colocar o bootstrap, eu uso o src ou href?
GOSTEI 0
Joel Rodrigues
31/12/2013
Na página Getting Started da documentação explica tudo que é necessário para importar o Bootstrap. Dê uma olhada lá.
GOSTEI 0
Marcelo Pastore
31/12/2013
desculpa, mas não consegui.
GOSTEI 0
Joel Rodrigues
31/12/2013
Poste aqui o que já fez.
GOSTEI 0
Marcelo Pastore
31/12/2013
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Menu Horizontal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap-3.0.3" rel="stylesheet">
</head>
<body>
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Sobre</a></li>
<li><a href="">Artigos</a></li>
<li><a href="">Estudos</a></li>
<li><a href="">Diretorio</a></li>
<li><a href="">CURSO</a></li>
<li><a href="">Links</a></li>
<li><a href="">Contato</a></li>
</ul>
</div>
</body>
</html>
GOSTEI 0
Joel Rodrigues
31/12/2013
Bom, tem algumas coisas erradas. Comece vendo a página Getting Started, baixe o Bootstrap e copie o código contido na seção "Basic example" ou "Exemplo básico".
Depois visite a página Components e veja o componente Navbar. Lá também tem o código de exemplo.
Depois de fazer isso, cole seu código aqui.
Depois visite a página Components e veja o componente Navbar. Lá também tem o código de exemplo.
Depois de fazer isso, cole seu código aqui.
GOSTEI 0
Marcelo Pastore
31/12/2013
não consegui, queria apenas colocar o bootstrap no meu projeto, é src ou href? não deu certo. obrigado.
GOSTEI 0
Fernanda Acacia
31/12/2013
tambem tentei fazer algo basico e não consegui!!!
GOSTEI 0
Joel Rodrigues
31/12/2013
Como eu disse, na página Getting Started tem um código de exemplo lá que pode ser copiado. Basta, é claro, verificar o diretório dos arquivos e fazer os devidos ajustes para apontar para os caminhos certos.
Novamente: lá tem uma seção Basic Example que contém a estrutura básica de um arquivo HTML que usa Bootstrap. Basta copiar esse código, colar num editor de texto e salvar com extensão html.
Abraço a todos.
Novamente: lá tem uma seção Basic Example que contém a estrutura básica de um arquivo HTML que usa Bootstrap. Basta copiar esse código, colar num editor de texto e salvar com extensão html.
Abraço a todos.
GOSTEI 0
Fernanda Acacia
31/12/2013
entendi mais ou menos, mas é que esqueci esse pequenos detalhes do html, principalmente essa questão dos diretorios, acredito que o Marcelo tb esteja com a mesma dificuldade.
GOSTEI 0
Marcelo Pastore
31/12/2013
eu ainda vou ver isso, estou meio ocupado com outras coisas. obrigado.
GOSTEI 0