Olá pessoal, vamos a mais um post.
Este post tem a colaboração de Renan Lopes. O linhadecomando.com cresce a cada dia e a cada dia conhecemos pessoas bacanas que gostam de programação e compartilham seus conhecimentos.
Continuem conosco!
Qual é a idéia?
Fazer um menu vertical flutuante, prender-se ao topo do navegador, quando correr a barra de rolagem.
Vamos ao código:
Arquivo css – style.css
*{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
list-style:none;
text-decoration:none;
}
a{ color:#000000 }
a:hover{ color:#FFFFFF; text-decoration:underline }
.center{
margin:0 auto;
overflow:hidden;
}
.clear{ clear:both }
h3{ color:#FFFFFF;padding-bottom:5px; border-bottom:1px solid #FFF; }
#topo{
width:960px;
height: 120px;
background-color:#0099FF;
color:#FFFFFF;
}
#topo p{ text-align:center }
#conteudo {
width: 960px;
min-height:750px; /* altura mínima */
}
#menu{
float:left;
width:200px;
padding:10px;
position:fixed;
background-color:#66CCFF;
z-index:9;
}
ul.menu{ padding-top:5px; }
ul.menu li{ padding: 5px 0; }
#dados {
float:right;
width:700px;
padding:20px;
}
#rodape {
clear:both;
background-color: #ADD8E6;
color: #FFF;
height:200px;
line-height:200px;
font-size:18px;
}
Código que faz a mágica – sempre você, né JQuery!
Código completo – index.html
JQuery - Menu Flutuante com Scroll
CABEÇALHO DO SITE
www.linhadecomando.com
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
RODAPÉ DO SITE
Veja o funcionamento desse script, clicando aqui.
Espero que gostem! Até +