Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

masterindesign

Site one-page e conteudo oculto

Por , em Desenvolvimento frontend

Recommended Posts

masterindesign    0

masterindesign
Postado

Olá pessoal, estou fazendo o meu site

mas eu gostaria que ele fosse one-page e armazena-se conteudo oculto.

como assim "conteudo oculto"? tipo quando você clica no link do menu, em baixo no rodapé sobe uma faixa continua com o conteudo que eu quero colocar lá? sendo que o conteudo do site fique atras do conteudo a baixo.

e o conteudo do site, que é um one-page, vao ter varios quadrados e sendo que cada um vao ter o seu destino no site, e cada um vai responder o seu chamado, a baixo vai vim o conteudo do menu e o contato e o conteudo do site vai ser mais ou menos assim,

você vai clicar no quadrado aumetará na tela e o conteudo vem da esquerda para direita com o dados do conteudo... e cada quadrado vai ter o seu chamado...

bom, isso será complicado de fazer agora, mas o que eu quero trabalhar agora é no conteudo oculto, no rodapé.

olhe como está:

<!doctype html>
<head>
<meta charset="utf-8">
<title>masterindesign</title>
<link rel="stylesheet" href="corpo.css">
<style>
*{margin:0px;padding:0px;}
html, body {background-image:url(http://i60.tinypic.com/2zyvekm.jpg);}
/*começo do site*/
.imagem-de-lado{position: absolute; background-image: url(http://i58.tinypic.com/2dwdjde.png); 
	; top: -100px; height:790px; width:530px; opacity: 0.5;}
/*menu do site*/
.menu-baixo-corpo{position: absolute; background-image: url(http://i61.tinypic.com/syv0i9.gif); background-repeat: repeat; margin-left: 0px;
	bottom: -30px; width: 100%; height: 600px;}
/*animação do menu*/
#menuBox{ width:100%; height:600px; position: fixed; bottom:-500px;/* hidden */ transition: all 0.7s ease; z-index:9999;}
#menuBox:hover { bottom:0px; padding:25 25 25 10; baseline-shift:baseline;}
</style>
</head>

<body>
<div class="imagem-de-lado"></div>
<div id="menuBox">
<div class="menu-baixo-corpo"></div>
</div>
</body>
</html>

bom, quem puder me ajudar, agradeço.

eu coloquei "hover" por que nao sabia muito bem o que colocar...

Compartilhar este post

Link para o post
Compartilhar em outros sites

masterindesign    0

masterindesign
Postado

não, quando eu clicar no menu a parte de baixo sobe com o conteudo que está abaixo...

quando clicar em contato, vai para cima com o conteudo do contato.. e quando for sobre vai para o conteudo do sobre... sabe?

Compartilhar este post

Link para o post
Compartilhar em outros sites

thyquevedo    6

thyquevedo
Postado

HTML:

<div id="ConteudoMostra">
  <p id="abreMenu">MENU</p>
  <div id="ConteudoOculto">
  <p id="conteudo">Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
  </div>
</div>

JS:

  $('#abreMenu').click(function () {
    $('#ConteudoMostra #ConteudoOculto').slideToggle({
      direction: "up"
    }, 300);
  }); // end click

CSS:

#ConteudoMostra { position: absolute;bottom: 0;width: 100%;z-index: 100;}
#abreMenu {color: #ececec;background: #333;cursor: pointer;font-size: 26px;text-decoration: none;}
#conteudo {background: #333;width: 100%;color: #CCCCCC;text-align: center;font-size: 20px;}
#ConteudoMostra #ConteudoOculto {display: none;}

http://jsfiddle.net/thiagoquevedo/4drLG/4/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito