Bem Vindo ao Gold Pixel aqui achará de tudo de bom para sua diversão.

Espero que achem oque precisam, caso não achem é só pedi em um novo tópico, para acessar qualquer conteúdo importante é preciso se Registrar primeiro e depois fazer login.



Participe do fórum, é rápido e fácil

Bem Vindo ao Gold Pixel aqui achará de tudo de bom para sua diversão.

Espero que achem oque precisam, caso não achem é só pedi em um novo tópico, para acessar qualquer conteúdo importante é preciso se Registrar primeiro e depois fazer login.

Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Você não está conectado. Conecte-se ou registre-se

 » Lixeira » Codigos Forumeiros » [tutorial] menu no footer

[tutorial] menu no footer

Ir para baixo  Mensagem [Página 1 de 1]

1[tutorial] menu no footer Empty [tutorial] menu no footer Dom Nov 18, 2012 4:51 am

-Sasuke

-Sasuke
Novato
Novato


[tutorial] menu no footer Pub
[TUTORIAL] Menu no Footer

Nesse tutorial vou estar ensinando como colocar um menu no footer(rodapé) do fórum.

[tutorial] menu no footer Act_bottomFunciona em todas as versões, eu acho.
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Menu no Footer



1º - Adicionar o CSS
Código:
#footerSw {
width: 100%;
background: #262626;
color: #E1E1E1;
padding: 1em 1em 1em 10em;
text-align: center;
display: table;
border-top:3px solid #111;
}

#footerSw > li {
position: absolute;
right: 5em;
bottom: 2em;
}
#footerSw {
position: relative !important;
}
#footerSw p {
margin: 20px 0px;
float: left;
font:12px Tahoma;
}
#footerSw ul {
float: left;
list-style: none;
text-align: center;
margin: 0 auto;
width: 15em;
padding: 1em;
}
#footerSw li {
display: block;
padding: 1px;
text-align: left;
}
#footerSw h2 {
font: 20px "Century Gothic", Verdana, Geneva, sans-serif;
color: #F60;
margin-bottom:6px;
}
#footerSw a {
color: #F1F1F1;
text-decoration: none;
}

2º - Adicionar JS
Código:
$(document).ready(function(){

$('body').append('<div id="footerSw">
<ul>
<li><h2>Ajuda</h2></li>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">Pedidos de Códigos</a></li>
<li><a href="#">Pedidos Gráficos</a></li>
<li><a href="#">Areá VIP</a></li>
</ul>

<ul>
<li><h2>SpDesign </h2></li>
<li><a href="#">Termos e Condições</a></li>
<li><a href="#">Política de Privacidade</a></li>
<li><a href="#">Newsletter</a></li>
</ul>

<ul>
<li><h2>Social</h2></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Blog</a></li>
</ul>

<ul>
<li><h2>Contatos</h2></li>
<li><a href="#">teste@email.com</a></li>
<li><a href="#">Live Chat</a></li>
</ul>

<p>Todos os direitos reservados a SpDesign - 2012 | Desenvolvido por: Switch</p></div>');

});

Marque para todas as páginas.

3º - Resultado final

[tutorial] menu no footer 359xx8x


© Switch | Sp-Design & HenRyqUéè


[tutorial] menu no footer Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[TUTORIAL] Menu no Footer

Ir para o topo  Mensagem [Página 1 de 1]

 » Lixeira » Codigos Forumeiros » [tutorial] menu no footer

Permissões neste sub-fórum
Não podes responder a tópicos