Efeito hover nos botões do menu

3 participantes

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

Tópico resolvido Efeito hover nos botões do menu

Mensagem por br.uno 11.01.19 16:30

Detalhes da questão


Endereço do fórum: http://aguilda.forumeiros.com/
Versão do fórum: phpBB2

Descrição


olá!

ontem eu apliquei este efeito no menu do meu fórum e eu gostaria que, sempre que o botão "pulasse", ele mudasse de cor.

este é o botão sem efeito:

Efeito hover nos botões do menu Botzeo35

este é com o efeito, como eu quero que fique quando ele "pula":

Efeito hover nos botões do menu Botzeo50

eu preciso criar uma imagem com os dois botões?

valeu, pessoas!
br.uno

br.uno
**

Membro desde : 04/02/2016
Mensagens : 73
Pontos : 118

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos botões do menu

Mensagem por Key of Destiny 11.01.19 20:00

Boa tarde,

Sim, você vai ter que criar mais imagens nesse estilo para podermos prosseguir. No caso, uma para cada um dos botões.
Key of Destiny

Key of Destiny
****

Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno 12.01.19 3:47

o espaço entre os dois botões precisa ser igual ao tamanho do pulo? 5 pixels, no caso. e o nome do efeito é hover mesmo?
br.uno

br.uno
**

Membro desde : 04/02/2016
Mensagens : 73
Pontos : 118

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito hover nos botões do menu

Mensagem por RafaelS. 12.01.19 15:23

Olá!

Desenvolvi um pequeno código para conseguir esse efeito:
Crie um novo JavaScript com investimento em todas as páginas:

Código:
//* @author RafaelS.
//* @see http://www.ajuda.forumeiros.com
//* adding hover effect to nav links
$(function() {
 
var initindex = $('img#i_icon_mini_index').attr("src");
var forumhover = "https://i.servimg.com/u/f61/19/83/89/52/botzeo50.png";
 
 
$( "a.mainmenu" ).mouseenter(function() {
$(this).find('img#i_icon_mini_index').attr("src", forumhover);
});
$( "a.mainmenu" ).mouseleave(function() {
$(this).find('img#i_icon_mini_index').attr("src",initindex);
});
});

Até mais. Feliz

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno 13.01.19 14:44

muito obrigado, rafa!

agora como eu posso expandir o código para todos os botões? eu quero tentar aprender, mas se precisar, os botões seguem aí embaixo.

Spoiler:
br.uno

br.uno
**

Membro desde : 04/02/2016
Mensagens : 73
Pontos : 118

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos botões do menu

Mensagem por Key of Destiny 13.01.19 22:53

Boa noite,

Peço que substitua o código que o Rafael lhe passou por esse. Talvez demore um pouco para o efeito aparecer, mas acredito que ele está funcionando para todos.

Código:
$(function () {
    var image = [
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo50.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo51.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo52.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo53.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo54.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo55.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo56.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo57.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo58.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo59.png',
        'https://i.servimg.com/u/f61/19/83/89/52/botzeo60.png'
    ];

    $('a.mainmenu').hover(function () {
            var $this = $(this),
                id = $this.find('img').attr('id'),
                src = $this.find('img').attr('src'),
                split = id.split('i_icon_mini_').join('');

            if (split == 'index') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[0]);
                });
            }

            if (split == 'login') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[1]);
                });
            }

            if (split == 'faq') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[2]);
                });
            }

            if (split == 'calendar') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[3]);
                });
            }

            if (split == 'members') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[4]);
                });
            }

            if (split == 'search') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[5]);
                });
            }

            if (split == 'logout') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[6]);
                });
            }

            if (split == 'profile') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[7]);
                });
            }

            if (split == 'register') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[8]);
                });
            }

            if (split == 'message') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[9]);
                });
            }

            if (split == 'group') {
                $this.mouseenter(function () {
                    $this.find('img').attr('src', image[10]);
                });
            }

            $this.mouseleave(function () {
                    $this.find('img').attr('src', src);
            });

    });
});

Uma dica: criei uma conta no seu fórum para fazer o teste com os demais botões e alguns deles, como o FAQ e Grupos não estão visíveis para usuários. Tive que fazer alguns "chutes" no código por conta disso.  Rindo
Key of Destiny

Key of Destiny
****

Membro desde : 15/12/2015
Mensagens : 273
Pontos : 442

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno 14.01.19 5:35

muito obrigado pela ajuda, key!

o único botão que não funcionou foi o grupo, mas teve esse tempo maior de resposta que você disse... não é possível usar o mesmo código que o rafael mandou aplicado em todos os botões? com ele o efeito é praticamente imediato.
br.uno

br.uno
**

Membro desde : 04/02/2016
Mensagens : 73
Pontos : 118

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito hover nos botões do menu

Mensagem por RafaelS. 14.01.19 20:12

Olá @br.uno

Troque o código que eu lhe passei por este:
Código:
$(function() {
 
var ReplaceLink = [
          {selector: "img#i_icon_mini_index", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo50.png"}, //FORUM
          {selector: "img#i_icon_mini_profile", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo50.png"}, //PERFIL
          {selector: "img#i_icon_mini_message", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo59.png"} //MPs
];
 
    $.each(ReplaceLink, function(key, value) {
      var initbutton = $(value.selector).attr("src");
      $( "a.mainmenu" ).mouseenter(function() {
        $(this).find(value.selector).attr("src", value.imageURL);
       
      });
      $( "a.mainmenu" ).mouseleave(function() {
        $(this).find(value.selector).attr("src", initbutton);
      });
  });
 
});

Procure pela configuração ReplaceLink no código e verá que eu já coloquei o efeito em 3 botões.
Experimente fazer para os restantes botões, se não conseguir eu farei todos. Feliz

Até mais.
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno 15.01.19 3:37

não consegui, bixo =/ parece tão simples, tou bem frustrado ahahaha se você puder fazer com todos os botões, por favor, eu ficarei grato e verei onde errei.
br.uno

br.uno
**

Membro desde : 04/02/2016
Mensagens : 73
Pontos : 118

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito hover nos botões do menu

Mensagem por RafaelS. 15.01.19 13:44

Olá!

Está aqui o código inteiro! Espero que não tenha esquecido de nenhum:
Código:
$(function() {
 
var ReplaceLink = [
          {selector: "img#i_icon_mini_index", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo50.png"}, //FORUM
          {selector: "img#i_icon_mini_profile", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo57.png"}, //PERFIL
          {selector: "img#i_icon_mini_members", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo54.png"}, //MEMBROS
          {selector: "img#i_icon_mini_search", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo55.png"}, //BUSCA
          {selector: "img#i_icon_mini_logout", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo56.png"}, //SAIR
        {selector: "img#i_icon_mini_login", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo51.png"}, //SAIR
          {selector: "img#i_icon_mini_faq", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo52.png"}, //FAQ
        {selector: "img#i_icon_mini_calendar", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo53.png"}, //CALENDARIO
        {selector: "img#i_icon_mini_register", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo58.png"}, //REGISTRAR-SE
          {selector: "img#i_icon_mini_message", imageURL: "https://i.servimg.com/u/f61/19/83/89/52/botzeo59.png"} //MPs
];
 
    $.each(ReplaceLink, function(key, value) {
      var initbutton = $(value.selector).attr("src");
      $( "a.mainmenu" ).mouseenter(function() {
        $(this).find(value.selector).attr("src", value.imageURL);
     
      });
      $( "a.mainmenu" ).mouseleave(function() {
        $(this).find(value.selector).attr("src", initbutton);
      });
  });
 
});

Até mais. Feliz
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno 15.01.19 18:08

censurado... eu não coloquei a vírgula no final da linha com o link dos botões. obrigado, rafael e key, por me ajudarem!

podem mandar esse tópico pra conta.
br.uno

br.uno
**

Membro desde : 04/02/2016
Mensagens : 73
Pontos : 118

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nos botões do menu

Mensagem por Convidado 15.01.19 18:09

Tópico resolvido


Movido para "Questões resolvidas".
Anonymous

Convidado
Convidado


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