[TUTORIAL] Menu na lateral do fórum

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

  • 0

[TUTORIAL] Menu na lateral do fórum Empty [TUTORIAL] Menu na lateral do fórum

Mensagem por Cream 03.04.12 22:01

[TUTORIAL] Menu na lateral do fórum Html   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




    - 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>
    
   Seta Substitua os "LINKs" pelos links que serão apresentados nos ícones que serão abertos ao clicar em alguma imagem que você selecionou. Como por exemplo o link do facebook, vai de sua escolha.
   Seta 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.
   Seta 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.

    - 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"

   
(carregue na imagem para aumentar)
   [TUTORIAL] Menu na lateral do fórum Untitl22


    - 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.

   
Exemplo | Código
Menu lateral no fórum
[TUTORIAL] Menu na lateral do fórum 2m64fnq
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="http://www.addthis.com/cms-content/images/gallery/stack.png" alt="stack"/>
            <ul id="stack">

            <li><a href="http://pt-br.facebook.com/"><span>Facebook</span><img src="http://www.addthis.com/cms-content/images/gallery/facebook.png" alt="nome" /></a></li>

            <li><a href="http://ajuda.forumeiros.com/f12-discussoes-gerais"><span>Discussões</span><img src="http://www.addthis.com/cms-content/images/gallery/stumbleupon.png" alt="nome" /></a></li>

            <li><a href="http://ajuda.forumeiros.com/f48-sugestoes-e-melhoras"><span>Sugestões</span><img src="http://www.addthis.com/cms-content/images/gallery/reddit.png" alt="nome" /></a></li>

            <li><a href="http://ajuda.forumeiros.com/c2-atendimento-ao-usuario-forumeiros"><span>Suporte</span><img src="http://www.addthis.com/cms-content/images/gallery/digg.png" alt="nome" /></a></li>

            <li><a href="http://ajuda.forumeiros.com/forum"><span>Favoritos</span><img src="http://www.addthis.com/cms-content/images/gallery/addthis.png" 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>
    
       
--> FAQ <--
        Menu na lateral do fórum  



       

  • Gostaria de colocar o efeito em todo o fórum, como fazer?
           Para isso você poderá adicionar o código em um widget, seja do portal ou do fórum em si. Para saber mais, recomendamos que leia:
       Seta [FAQ] Gerenciar os Widgets do Fórum


   


   
©️ Fórum dos Fóruns



   
[TUTORIAL] Menu na lateral do fórum Act_bottom 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
Cream

Cream
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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