[TUTORIAL] Menu na lateral do fórum
2 participantes
Página 1 de 1
[TUTORIAL] Menu na lateral do fórum
Menu na lateral do fórum
Neste tutorial, iremos aprender à como adicionar um pequeno menu modificável ao canto inferior direito do fórum. Ele é aberto assim que clicamos numa imagem principal, que podemos chamar de "cesta". Atráves de um clique nesta cesta ela poderá abrir e mostrar diversas funções, tudo isso através de simples códigos e imagens.
--> Tutoriais, dicas e astúcias <--
Menu na lateral do fórum
1º - Trabalhando o código a ser usado:
Primeiramente, antes de tudo, vamos aprender a modificar o código a ser utilizado para fazermos uma pequena cesta ao lado direito do fórum, onde a mesma conterá alguns menus. No caso, o código utilizado é o seguinte:
Substitua os "IMGs" pelos links das imagens que terão os ícones assim que clicada na imagem principal. De acordo com o exemplo que demos anteriormente, você poderia adicionar em um deles a imagem do facebook.
Substitua "SUA-IMAGEM" pelo link da imagem principal, que ao ser clicada exibirá os outros menus no canto inferior direito da tela de seu fórum. Poderia por exemplo ser uma cesta ou algo parecido.
2º - Adicionando o código:
Por fim, teremos de adicionar o código trabalhado no item anterior na mensagem da "Home Page" do vosso fórum, para que assim o efeito do menu seja produzido correctamente:
Painel de controle > Visualização > HomePage > Geral > "Mensagem na Home page"
3º - Resultado atráves de imagens:
Abaixo você confere um dos possíveis resultados, com o código que nós editamos. Lembre-se, os ícons/menus somente aparecerão quando clicar-mos na cesta, ou na imagem principal que vocês escolheram.
©Publicidadenaweb
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Menu na lateral do fórum
Neste tutorial, iremos aprender à como adicionar um pequeno menu modificável ao canto inferior direito do fórum. Ele é aberto assim que clicamos numa imagem principal, que podemos chamar de "cesta". Atráves de um clique nesta cesta ela poderá abrir e mostrar diversas funções, tudo isso através de simples códigos e imagens.
--> Tutoriais, dicas e astúcias <--
Menu na lateral do fórum
1º - Trabalhando o código a ser usado:
Primeiramente, antes de tudo, vamos aprender a modificar o código a ser utilizado para fazermos uma pequena cesta ao lado direito do fórum, onde a mesma conterá alguns menus. No caso, o código utilizado é o seguinte:
- Código:
<style type="text/css">
.stack { position: fixed; bottom: 5px; right: 25px; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
.stack * { margin: 0; padding: 0; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; margin:0; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
display: block;
position: absolute;
top: 17px;
right: 60px;
height: 14px;
line-height: 14px;
background-color:#000;
border: 0;
padding: 3px 10px;
text-align: center;
text-shadow: #000 1px 1px 1px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-size: 12px;
color: #fcfcfc;
border-radius: 10px;
opacity: .85;
filter: alpha(opacity = 85);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li {*right:5px;}
.stack a {text-decoration:none}
</style><div class="stack">
<img src="SUA-IMAGEM" alt="stack"/>
<ul id="stack">
<li><a href="LINK-5"><span>nome</span><img src="IMG-5" alt="nome" /></a></li>
<li><a href="LINK-4"><span>nome</span><img src="IMG-4" alt="nome" /></a></li>
<li><a href="LINK-3"><span>nome</span><img src="IMG-3" alt="nome" /></a></li>
<li><a href="LINK-2"><span>nome</span><img src="IMG-2" alt="nome" /></a></li>
<li><a href="LINK-1"><span>nome</span><img src="IMG-1" alt="nome" /></a></li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.yourjavascript.com/134446808/stack1.js"></script>
Substitua os "IMGs" pelos links das imagens que terão os ícones assim que clicada na imagem principal. De acordo com o exemplo que demos anteriormente, você poderia adicionar em um deles a imagem do facebook.
Substitua "SUA-IMAGEM" pelo link da imagem principal, que ao ser clicada exibirá os outros menus no canto inferior direito da tela de seu fórum. Poderia por exemplo ser uma cesta ou algo parecido.
2º - Adicionando o código:
Por fim, teremos de adicionar o código trabalhado no item anterior na mensagem da "Home Page" do vosso fórum, para que assim o efeito do menu seja produzido correctamente:
Painel de controle > Visualização > HomePage > Geral > "Mensagem na Home page"
3º - Resultado atráves de imagens:
Abaixo você confere um dos possíveis resultados, com o código que nós editamos. Lembre-se, os ícons/menus somente aparecerão quando clicar-mos na cesta, ou na imagem principal que vocês escolheram.
- Incones:
- [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
- [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
- [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
- [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
- [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
©Publicidadenaweb
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Menu na lateral do fórum
Última edição por Netinho em Dom Ago 11, 2013 8:38 am, editado 1 vez(es)
Netinho-
Mensagens : 38
Reputação : 0
Re: [TUTORIAL] Menu na lateral do fórum
Olá, faça a padronização do tutorial.
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Tópicos semelhantes
» [TUTORIAL] ChatBox Personalizado
» [TUTORIAL] Portal Personalizado #01
» [TUTORIAL] Informações dos Membros
» [TUTORIAL] Mensagens de Aviso
» [TUTORIAL] Footer Elegante V1
» [TUTORIAL] Portal Personalizado #01
» [TUTORIAL] Informações dos Membros
» [TUTORIAL] Mensagens de Aviso
» [TUTORIAL] Footer Elegante V1
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Sáb Set 07, 2013 9:14 am por Gmtp
» ffffffffffffffffff
Sex Ago 16, 2013 9:29 pm por Netinho
» ffffffffffffffff
Sex Ago 16, 2013 9:24 pm por Netinho
» Formulario
Qua Ago 14, 2013 8:21 am por diogorocha222
» |FIX| Comunidade Gaming
Ter Ago 13, 2013 11:53 am por diogorocha222
» Recrutamento para equipe publicidadenaweb
Ter Ago 13, 2013 11:08 am por Netinho
» [Assinatura] - Médio
Ter Ago 13, 2013 11:07 am por diogorocha222
» Staff Publicidadenaweb
Ter Ago 13, 2013 11:06 am por Netinho
» Staff do fórum
Dom Ago 11, 2013 8:54 am por Netinho