Rodapé com efeito slide ao clicar (CSS)
Boa Tarde Pessoal, estou precisando fazer um efeito nesse layout :
http://rodrigosom.com.br/novo/
Para eu ter um efeito semelhante a esse:
http://rodrigosom.com.br/fullscreen/
Como devem ter notado, eu queria deixar aquela div azul clara(#mostrar) colada na div rodapé e quando clicar nessa div fazer aparecer a div rodapé que esta oculta e a div #mostrar subir junto e descendo sempre acompanhando o rodapé como no exemplo do fullscreen
Para quem não tem o firebug postarei os códigos primeiramente do estilo
*{
margin:0;
padding:0;
}html, body {height:100%;}
.geral {
min-height:100%;
position:relative;
width:100%;
background-image: url("../imagens/carbon.jpg");
background-repeat:repeat;
}
.top-bar {
background: none repeat scroll 0 0 #111111;
height: 35px !important;
line-height: 45px;
margin: 0 0 30px;
padding: 0;
width: 100% !important;
}
#mostrar{
position:absolute;
width:100%;
background:#0FF;
height: 30px !important;
line-height: 45px;
float: left;
}
.footer-bar{
position:absolute;
bottom:0;
width:100%;
background: none repeat scroll 0 0 #111111 ;
height: 100px !important;
line-height: 45px;
padding: 0;
display: none;
}.footer-bar .footer-content{
width: 100%;
padding-top:8px;
text-align: center;
font-size: 11px;
line-height: 14px;
padding-bottom: 9px;
}E agora do index.html
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Curso de Foundation para Iniciantes</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/foundation.css">
<link rel="stylesheet" href="stylesheets/app.css">
<link rel="stylesheet" href="stylesheets/estilo.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]-->
<script src="javascripts/jquery.min.js"></script>
<script src="javascripts/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
$(document).ready(function() {
$('#mostrar').click(function(){
$(this).next().slideToggle('slow');
});
});
</script>
</head>
<body>
<div class="geral">
<div class="top-bar"></div>
<div id="mostrar">mostrar</div>
<div class="footer-bar">
<div class="footer-text"></div>
<div class="footer-content"></div>
</div>
</div>
<!-- Included JS Files -->
<script src="javascripts/jquery.reveal.js"></script>
<script src="javascripts/jquery.orbit-1.4.0.js"></script>
<script src="javascripts/jquery.customforms.js"></script>
<script src="javascripts/jquery.placeholder.min.js"></script>
<script src="javascripts/jquery.tooltips.js"></script>
<script src="javascripts/app.js"></script>
</div>
</body>
</html>Agradeço qualquer ajuda.
Discussão (2)
Carregando comentários...