[tutorial] menu no footer

Cʀɑzy · 1 [tutorial] menu no footer Dom 25 Nov 2012 - 17:58

Membro Avançado

Mensagens : 288
<b>Moedas</b>

Moedas : 452
Reputação : 6

Olá Convidado
para ver o conteudo tera de Comentar~~

[TUTORIAL] Menu no Footer

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

Funciona 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> | Desenvolvido por: Switch</p></div>'); });

Marque para todas as páginas.

3º - Resultado final

[tutorial] menu no footer 359xx8x

© Switch | Sp-Design & -Naruto

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

">

**T-Lord** · 2 Re: [tutorial] menu no footer Qua 16 Jan 2013 - 13:43

Administrador

Mensagens : 9792
<b>Moedas</b>

Moedas : 234353
Reputação : 278

Essa ai é boa, eu já sabia, vou depois disponibilar umas melhores!

MakyBory

Membro Lendário

Mensagens : 878
<b>Moedas</b>

Moedas : 1081
Reputação : 34

Excelente Tutorial!

juan™

Administrador

Mensagens : 2054
<b>Moedas</b>

Moedas : 48794
Reputação : 203

Obrigado Por Compartilhar

**T-Lord**

Administrador

Mensagens : 9792
<b>Moedas</b>

Moedas : 234353
Reputação : 278

Esse código está melhor, caso queira é só editar!

Código:: $(document).ready(function(){ $('body').append('<div id="footerSw"> <ul> <li><h2>Suportes</h2></li> <li><a href="/f246-pedidos-de-codigos">Suporte para Fórum</a></li> <li><a href="/f1-pedidos">Pedidos Gráficos</a></li> <li><a href="/f68-suporte">Suporte Geral</a></li> <li><a href="#">Suporte Games(logo acima nas categorias)</a></li> </ul> <ul> <li><h2>ZoneToony </h2></li> <li><a href="/f30-area-zonetoony">Área ZoneToony</a></li> <li><a href="/f91-termos-de-uso">Termos de Uso</a></li> <li><a href="/f8-apresentacoes">Apresentações</a></li> </ul> <ul> <li><h2>Games</h2></li> <li><a href="/f259-ddtank">DDTank</a></li> <li><a href="/f257-habbo">Habbo</a></li> <li><a href="/f258-transformice">Transformice</a></li> <li><a href="/f37-brasfoot-2013">Brasfoot 2013</a></li> </ul> <ul> <li><h2>Consoles</h2></li> <li><a href="/f152-xbox-360">XBox 360</a></li> <li><a href="/f153-playstation-3">Playstaion 3</a></li> <li><a href="/f146-games-para-computador">Games para PC</a></li> <li><a href="/f154-nintendo-wii">Nintendo Wii</a></li> </ul> <p></p></div>'); });

Conteúdo patrocinado

1 [tutorial] menu no footer Dom 25 Nov 2012 - 17:58