Gostaria de saber como fazer um "menu fixo" para todas as paginas de um site. Por exemplo, tenho um arquivo com o menu de navegação de um site, banner-home e rodapé. Sei como fazer isso usando php, gostaria de saber se é possível fazer usando html5 e css3. Bom, acho que consegui explicar a minha dúvida. abraços

perguntou Apr 15 '12 às 12:45

pedroalbani's gravatar image

pedroalbani
235669

editou Apr 16 '12 às 14:38

Rebecca's gravatar image

Rebecca ♦♦
14.3k283049


A resposta curta é: sim, dá pra fazer. Eu faria uma ressalva. Se você tem um site com bastante conteúdo, é melhor usar ajax (o javascript carrega o conteúdo externo e põe o resultado onde você mandar), mas para um site com pouco conteúdo, você pode fazer tudo em uma página só e através do CSS fazer com que apareça uma seção de cada vez. É uma ótima alternativa para muitos designers fazer o site com uma página só.

A navegação se dá através de hatchtag (#):

<a href="#algumasecao">Ir para "alguma seção"</a>

Você já deve ter visto isso funcionando em algum site. Quando clica no link com hatchtag, ele rola a página para mostrar algum elemento (se houver) que tenha um id correspondente ao nome chamado após o caractere de hatchtag (#). No caso do exemplo acima, você precisaria ter um elemento qualquer na página com um id correspondente, assim:

<section id="algumasecao"> <p>A página vai rolar até aqui.</p> </section>

Mas até aqui ainda não é o que você queria. O truque no final é, através do CSS, criar um container para as seções ficarem "escondidas" (eu prefiro mascaradas), exibindo apenas uma de cada vez. Quando você então clicar num link, o container vai rolar o seu conteúdo para atender ao chamado do hatchtag, mas de uma forma velada, sem dar a impressão de que já estava lá, criando a impressão de um site superultrarrápido.

link permanente

respondeu Apr 19 '12 às 12:32

johnylab's gravatar image

johnylab
864

Muito bom johnylab! Tirou 2 dúvidas minhas! Vou ter que estudar Ajax!rs Esse lance do CSS é interessante para uma pagina onde queremos listar algumas categorias também. Muito obrigado pela ajuda, grande abraço!

(Apr 19 '12 às 14:46) pedroalbani pedroalbani's gravatar image

deixa eu ver se entendi, tu tá criando arquivos HTML separados como banner, menu, cabeçalho e rodapé e daí pega eles com o PHP para formar uma página? cara, descreve mais o teu projeto ai que a gente pode até te recomendar algum sistema mais profissional e seguro para teu site.

link permanente

respondeu Apr 15 '12 às 13:22

raposa's gravatar image

raposa
2.1k6814

editou Apr 15 '12 às 13:23

Acho que eu expliquei muito mal mesmo. Vamos lá, eu estou procurando uma maneira de fazer um site bem simples, gostaria de saber se existe uma maneira de criar um layout fixo para todas as paginas. Tipo, já entrou em alguma site e quando clicou em outra categoria do menu, apenas o conteúdo da página abaixo foi carregado? Isso faz com o que a pagina seja carregada mais rápida, pois o menu, rodapé, banner não são recarregados. Eu não estou usando php, eu só disse que já fiz isso usando php, mas quero saber se é possivel apenas com html e css...

Tipo eu crio um menu.html e dentro do index eu chamo em determinado momento o menu html. Isso tbm garante que eu não precise escrever o cabeçalho da pagina, em todas as outras paginas html. Com php é tranquilo fazer, mas com a evolução do html e css acredito que já seja possível fazer. Se alguém souber o nome desse recurso já ajudaria, pois nao achei nada no google. Abraço

(Apr 15 '12 às 13:30) pedroalbani pedroalbani's gravatar image

aah' só com HTML e CSS você não vai conseguir fazer isso não.

link permanente

respondeu Apr 15 '12 às 14:45

raposa's gravatar image

raposa
2.1k6814

qual metodo vc usaria?

(Apr 15 '12 às 14:46) pedroalbani pedroalbani's gravatar image

Wordpress mesmo.

(Apr 15 '12 às 15:32) raposa raposa's gravatar image

eu publiquei isso no meu site, dê uma opinião: Navegação de site com uma página só.

link permanente

respondeu Apr 19 '12 às 22:43

johnylab's gravatar image

johnylab
864

Sua resposta
mudar para preview

Siga esta pergunta

Por Email:

Uma vez que você entrar você poderá se inscrever para todas as atualizações aqui

Por RSS:

Respostas

Respostas e Comentários

Markdown Básico

  • *italico* ou __italico__
  • **negrito** or __negrito__
  • link:[texto](http://url.com/ "titulo")
  • imagem?![alt texto](/path/img.jpg "titulo")
  • lista numerada: 1. Foo 2. Bar
  • para adicionar uma quebra de linha basta adicionar dois espaços onde você gostaria que a nova linha estivesse.
  • tags HTML básicas também são suportadas

Tags

×35
×15
×9
×8
×3
×3

pergunta feita: Apr 15 '12 às 12:45

pergunta lida: 7,670 vezes

última alteração: Apr 19 '12 às 22:43


TechTudo.com.br © Copyright 2010-2013 Globo Comunicação e Participações S.A. Política de Privacidade