Efeito hover do menu

4 participantes

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

Tópico resolvido Efeito hover do menu

Mensagem por iScroll 04.09.17 21:16

Detalhes da questão


Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: PunBB

Descrição


Eae pessoal, gostaria desse efeito hover : http://prntscr.com/gh35bp nesse menu do meu fórum : http://prntscr.com/gh36yw

Seria possível ?


Última edição por iScroll em 08.09.17 18:32, editado 1 vez(es)
iScroll

iScroll
Super Membro

Masculino
Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover do menu

Mensagem por iScroll 06.09.17 2:18

UP
iScroll

iScroll
Super Membro

Masculino
Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover do menu

Mensagem por Kyo Panda 06.09.17 13:56

CSS:

Código:
.second-level-menu::before {
    display: none;
}

.second-level-menu > li,
.third-level-menu > li {
    background-color: #333 !important;
}

.second-level-menu > li:after  {
    border-color: #fff
}

#community_app_menu a {
    color: #fff !important;
}
Kyo Panda

Kyo Panda
Membro Entusiasta

Masculino
Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5937

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover do menu

Mensagem por iScroll 06.09.17 15:57

Kyo Panda escreveu:CSS:

Código:
.second-level-menu::before {
    display: none;
}

.second-level-menu > li,
.third-level-menu > li {
    background-color: #333 !important;
}

.second-level-menu > li:after  {
    border-color: #fff
}

#community_app_menu a {
    color: #fff !important;
}

Olá Kyo, você apenas personalizou ele, eu queria o efeito hover, a caixa pode deixar do jeito que está.
iScroll

iScroll
Super Membro

Masculino
Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover do menu

Mensagem por Kyo Panda 06.09.17 17:16

Você diz a caixa branca e a borda azul?
Kyo Panda

Kyo Panda
Membro Entusiasta

Masculino
Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5937

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover do menu

Mensagem por iScroll 06.09.17 21:56

Kyo Panda escreveu:Você diz a caixa branca e a borda azul?

Abra o site que falei : http://proxstudio.forumeiros.com/ e passe o mouse sobre o "products" esse efeito que quero, quando passar o mouse, o jeito que aparece, entendeu ?
iScroll

iScroll
Super Membro

Masculino
Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

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

Ir para o topo Ir para baixo

Membro Proficiente

Tópico resolvido Re: Efeito hover do menu

Mensagem por Luiz 08.09.17 16:27

Adicione ao final de seu CSS:
Código:
#primary_nav #community_app_menu li ul {
  display: block !important;
  z-index: 9999 !important;
  transition: none !important;
}

#primary_nav #community_app_menu * {
  transition: none !important;
}

#primary_nav #community_app_menu li > ul::before {
  display: none;
}

#primary_nav #community_app_menu li:hover > ul::before {
  display: block;
}

#primary_nav #community_app_menu li > ul > li {
  height: 0px;
  font-size: 0px;
  opacity: 0;
  visibility: hidden;
  transition: height 200ms linear !important;
}

#primary_nav #community_app_menu li:hover > ul > li {
  height: 32px;
  visibility: visible;
  font-size: 13px;
  opacity: 1;
}

Sou obrigado a dizer que já está complicado de trabalhar sobre o seu fórum, pois existem muitos !important's nele, o que dificulta — e muito — nosso trabalho, nos obrigando a usá-los também, o que prejudica a qualidade de seu CSS.

o/
Luiz

Luiz
Membro Proficiente
Membro Proficiente

Masculino
Membro desde : 23/04/2016
Mensagens : 6644
Pontos : 7447

Ver perfil do usuário https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover do menu

Mensagem por iScroll 08.09.17 18:19

Luiz escreveu:Adicione ao final de seu CSS:
Código:
#primary_nav #community_app_menu li ul {
  display: block !important;
  z-index: 9999 !important;
  transition: none !important;
}

#primary_nav #community_app_menu * {
  transition: none !important;
}

#primary_nav #community_app_menu li > ul::before {
  display: none;
}

#primary_nav #community_app_menu li:hover > ul::before {
  display: block;
}

#primary_nav #community_app_menu li > ul > li {
  height: 0px;
  font-size: 0px;
  opacity: 0;
  visibility: hidden;
  transition: height 200ms linear !important;
}

#primary_nav #community_app_menu li:hover > ul > li {
  height: 32px;
  visibility: visible;
  font-size: 13px;
  opacity: 1;
}

Sou obrigado a dizer que já está complicado de trabalhar sobre o seu fórum, pois existem muitos !important's nele, o que dificulta — e muito — nosso trabalho, nos obrigando a usá-los também, o que prejudica a qualidade de seu CSS.

o/

Perfeito, valeu Feliz
Sobre os !important realmente tenho que tirar algum dia desses pra re-ver todo meu CSS e vê se consigo reduzi-lo para não causar esse tipo de problema, até pq é chato até para mim que tenho uma "base" em CSS e não consigo resolver tais coisas simples...
Enfim.. Obrigado pelo aviso e pelo código.
iScroll

iScroll
Super Membro

Masculino
Membro desde : 08/03/2015
Mensagens : 1701
Pontos : 2311

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

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Efeito hover do menu

Mensagem por Shek 09.09.17 1:48

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Masculino
Membro desde : 11/04/2009
Mensagens : 18763
Pontos : 22612

Ver perfil do usuário https://publipos.net https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

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