Efeito hover nos botões do menu

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

Atendido / Resolvido Efeito hover nos botões do menu

Mensagem por br.uno em 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
Nível 6

Masculino
Inscrito dia : 04/02/2016
Mensagens : 73
Pontos Ativos : 118

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por Key of Destiny em 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
Nível 10

Masculino
Inscrito dia : 15/12/2015
Mensagens : 255
Pontos Ativos : 417

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno em 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
Nível 6

Masculino
Inscrito dia : 04/02/2016
Mensagens : 73
Pontos Ativos : 118

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por RafaelS. em 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'




Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"Suba na vida, mas não faça de seus amigos os degraus de sua escada, vença pela sua capacidade sempre com Honestidade,Caráter e Amor!"

Efeito hover nos botões do menu 2169
Efeito hover nos botões do menu 15074
RafaelS.

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4695
Pontos Ativos : 5747

Ver perfil do usuário http://techmais.forumeiros.com/

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno em 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:
Efeito hover nos botões do menu Botzeo51

Efeito hover nos botões do menu Botzeo52

Efeito hover nos botões do menu Botzeo53

Efeito hover nos botões do menu Botzeo54

Efeito hover nos botões do menu Botzeo55

Efeito hover nos botões do menu Botzeo56

Efeito hover nos botões do menu Botzeo57

Efeito hover nos botões do menu Botzeo58

Efeito hover nos botões do menu Botzeo59

Efeito hover nos botões do menu Botzeo60
br.uno

br.uno
Nível 6

Masculino
Inscrito dia : 04/02/2016
Mensagens : 73
Pontos Ativos : 118

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por Key of Destiny em 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
Nível 10

Masculino
Inscrito dia : 15/12/2015
Mensagens : 255
Pontos Ativos : 417

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno em 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
Nível 6

Masculino
Inscrito dia : 04/02/2016
Mensagens : 73
Pontos Ativos : 118

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por RafaelS. em 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.




Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"Suba na vida, mas não faça de seus amigos os degraus de sua escada, vença pela sua capacidade sempre com Honestidade,Caráter e Amor!"

Efeito hover nos botões do menu 2169
Efeito hover nos botões do menu 15074
RafaelS.

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4695
Pontos Ativos : 5747

Ver perfil do usuário http://techmais.forumeiros.com/

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno em 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
Nível 6

Masculino
Inscrito dia : 04/02/2016
Mensagens : 73
Pontos Ativos : 118

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por RafaelS. em 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




Eu sou o RafaelS.,
Eu aconselho-lhe ler os seguintes tópicos:

Seta Para evitar ser punido é importante que leia  o regulamento geral do Fórum dos fóruns.
Seta Antes de criar o seu pedido de suporte certifique-se de ler o regulamento da seção de suporte.
Seta Quando for criar o seu tópico tente ser o mais específico possível, para que nós possámos entender!

"Suba na vida, mas não faça de seus amigos os degraus de sua escada, vença pela sua capacidade sempre com Honestidade,Caráter e Amor!"

Efeito hover nos botões do menu 2169
Efeito hover nos botões do menu 15074
RafaelS.

RafaelS.
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 26/04/2014
Mensagens : 4695
Pontos Ativos : 5747

Ver perfil do usuário http://techmais.forumeiros.com/

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por br.uno em 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
Nível 6

Masculino
Inscrito dia : 04/02/2016
Mensagens : 73
Pontos Ativos : 118

Ver perfil do usuário

Atendido / Resolvido Re: Efeito hover nos botões do menu

Mensagem por Roger123 em 15.01.19 18:09

Tópico resolvido


Movido para "Questões resolvidas".


Seja bem-vindo ao Fórum dos Fóruns!
Veja aqui alguns links importantes a saber:



Roger123 - Ajudeiro

Efeito hover nos botões do menu Pmb0kx10
Roger123

Roger123
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 30/06/2018
Mensagens : 1404
Pontos Ativos : 1696

Ver perfil do usuário https://todosostemas.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum