Siga-nos em...
Follow us on Twitter Follow us on Facebook Watch us on YouTube
Registro

HGIDC
Resultados 1 a 1 de 1
  1. #1

    Avatar de FusioN
    Data de Ingresso
    Jul 2010
    Localização
    Rio de Janeiro - Brasil
    Idade
    24
    Posts
    434
    Agradecido
    18
    Agradeceu
    14
    Peso da Avaliação
    19

    Padrão Menu Flutuante com Efeito

    Bom para quem não sabe esse menu é aquele que fica do lado da pagina, para ver melhor o que é veja no final do tópico o resultado do tutorial:

    # TUTORIAL #


    Acesse seu AdminCP -> Look & Feel -> sua skin -> GlobalTemplate -> globalTemplate

    Vamos procurar por:

    Código PHP:
            </body>
    </
    html
    Logo acima dele adicione este código abaixo:

    Código PHP:
    <div id="menuflutuante" class="hide">
    <
    img id="mfimagem" src="SUA IMAGEM" width="33" height="82">
    <
    iframe id="mfframe" scrolling="no" frameborder="0"  style="overflow:hidden; width:238px; height:365px;background:#FFF;"  allowTransparency="false"></iframe>
    </
    div>
    <
    script type="text/javascript">
    var 
    animating=false,
    effect_in=false,
    effect_out=false,
    inout=false;

    Event.observe(window'load', function()
    {
    $(
    'menuflutuante').className='show';
    Event.observe($('mfimagem'), 'click', function()
    {
    if ( 
    inout )
    {
    if( 
    typeof effect_in == 'object' )
    {
    effect_in.cancel();
    }

    effect_out = new Effect.Morph('menuflutuante',
    {
    style: {
    right'-242px'
    },
    transitionEffect.Transitions.spring
    });
    inout false;
    } else {
    if ( !$(
    'mfframe').src )
    {
    $(
    'mfframe').src='PÁGINA DO MENU';
    }

    if( 
    typeof effect_out == 'object' )
    {
    effect_out.cancel();
    }

    effect_in = new Effect.Morph('menuflutuante',
    {
    style: {
    right'-2px'
    },
    transitionEffect.Transitions.spring
    });
    inout true;
    }
    });
    }
    );
    </
    script
    Agora vamos acessar a aba CSS -> ipb_styles.css

    No final de todo o código do "ipb_styles.css"iremos adicionar o seguinte código abaixo:

    Código PHP:
    #menuflutuante
    {
            
    width:272px;
            
    height:370px;
            
    positionfixed;
            
    top60px;
            
    right: -240px;
            
    overflowhidden;
            
    z-index:9999;
    }

    #menuflutuante iframe
    {
            
    floatleft;
    }

    #menuflutuante img
    {
            
    floatleft;
            
    cursorpointer;

    Agora edite o "LINK DA IMAGEM" e "LINK DO MENU". Vamos por passos, pegue uma imagem que quer utilizar, por exemplo a imagem abaixo:


    Ela ficará flutuando no lado direito do fórum!

    Agora o "LINK DO MENU", você deverá fazer qualquer html com seu menu, e faser upload para o seu ftp.

    Agora pegue o link do seu iframe, e adicione corretamente ao primeiro código citado acima.

    Ex.: "[Somente usuários registrados podem vem os links. ]

    Resultados:






    Informação

    Você pode obter resultados mais interessantes usando CSS!



    Creditos: Gustavo
    Fonte: SOS INVISION

  2. O Seguinte Usuário Agradeceu FusioN Por este Post Útil:


 

 

Informações de Tópico

Usuários Navegando neste Tópico

Há 1 usuários navegando neste tópico. (0 registrados e 1 visitantes)

Tópicos Similares

  1. |Dúvida| Box flutuante Facebook
    Por Bullet no fórum Suportes|Dúvidas|Pedidos
    Respostas: 17
    Último Post: 04-03-2014, 12:12 PM
  2. |Dúvida| Menu de Opções [C++]
    Por Bullet no fórum C++
    Respostas: 0
    Último Post: 07-11-2013, 10:01 AM
  3. |Pedido| Box Flutuante Aparecer Mensagem
    Por Bullet no fórum Suportes|Dúvidas|Pedidos
    Respostas: 5
    Último Post: 15-06-2013, 01:40 PM
  4. |Tutorial| Box flutuante de redes sociais.
    Por Bruno Lucena no fórum IPB | Tutoriais
    Respostas: 0
    Último Post: 23-02-2013, 04:59 AM
  5. |Tutorial| Efeito Menu Ativo no HTML e CSS
    Por kaka no fórum Tutoriais
    Respostas: 0
    Último Post: 07-07-2011, 08:45 PM

Marcadores

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •