Efeito hover no menu

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

Resolvido Efeito hover no menu

Mensagem por Bruno_Michael em 02/12/17, 08:58 pm

Detalhes da questão


Endereço do fórum: http://brunomichael.forumeiros.com/forum
Versão do fórum: ModernBB

Descrição


Prezados,
boa noite.

Bom quero centralizar o menu do meu fórum e tira o efeito houver branco e coloca o seguinte da imagem.
http://prntscr.com/hiauso

Explicação da ilustração kkk.
Atualmente fica branco o menu selecionado, eu queria que fica se cinza o fundo e aparecer um barra azul em bairro.


Última edição por Bruno_Michael em 07/12/17, 07:49 am, editado 1 vez(es)
avatar

Bruno_Michael
Nível 8

Masculino
Inscrito dia : 04/09/2013
Mensagens : 119
Pontos Ativos : 191

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

Resolvido Re: Efeito hover no menu

Mensagem por Gaaratsu em 02/12/17, 09:23 pm

Olá novamente querido!

Adicione na tua CSS:
Código:
.navbar a:hover {
    background-color: grey;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    color: #000;
    border-top: 5px solid black;
    border-right: 5px solid black;
    border-left: 5px solid black;
    border-bottom: 5px solid dodgerblue;
    line-height: 20px;
}
.navbar {
    text-align: center !important;
    background-color: white !important;
    border: 5px solid black;
    height: 50px;
    line-height: 0;
}
.navbar a {
    border-radius: 0 !important;
    color: black;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    padding: 0 15px;
    position: relative;
    top: -12px;
}

Att! Feliz


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

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

Resolvido Re: Efeito hover no menu

Mensagem por Bruno_Michael em 02/12/17, 09:32 pm

Opa

veja como está http://prntscr.com/hib652

Uma imagem ilustra como eu desejo se for possível.



Edit: Imagem ficou ruim para observar estou colocando o link: https://i62.servimg.com/u/f62/18/65/51/17/gawgaw10.png
avatar

Bruno_Michael
Nível 8

Masculino
Inscrito dia : 04/09/2013
Mensagens : 119
Pontos Ativos : 191

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

Resolvido Re: Efeito hover no menu

Mensagem por Gaaratsu em 02/12/17, 09:34 pm

O código faz isso, é que precisa forçá-lo.

Substitua por este:
Código:
.navbar a:hover {
    background-color: grey !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
    color: black !important;
    border-top: 5px solid black !important;
    border-right: 5px solid black !important;
    border-left: 5px solid black !important;
    border-bottom: 5px solid dodgerblue !important;
    line-height: 20px !important;
}
.navbar {
    text-align: center !important;
    background-color: white !important;
    border: 5px solid black !important;
    height: 50px !important;
    line-height: 0 !important;
}
.navbar a {
    border-radius: 0 !important;
    color: black !important;
    display: inline-block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 0 15px !important;
    position: relative !important;
    top: -12px !important;
}
Se não funcionar, mande-me a tua CSS por gentileza!

Att! Feliz


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

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

Resolvido Re: Efeito hover no menu

Mensagem por Bruno_Michael em 02/12/17, 09:42 pm

Ainda persistir, aqui está o meu css:

Código:
/******MENU ALTERADO**********/
.is-sticky#headerbar-top {
display: none !important;
}
.navbar {
    text-align: center !important;
    background-color: black !important;
}
.navbar a {
    border-radius: none !important;
}
.navbar a:hover {
    background-color: grey !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
    color: black !important;
    border-top: 5px solid black !important;
    border-right: 5px solid black !important;
    border-left: 5px solid black !important;
    border-bottom: 5px solid dodgerblue !important;
    line-height: 20px !important;
}

/******LINHA NO USERINFO POST**********/

div.postprofile {
    border: 1px solid #3793ff !important;
    background-color: #fff !important;
    margin-right: 10px !important;
    margin-top: 27px !important;
}

Imagem das opção abaixo do css: http://prntscr.com/hibb7l
avatar

Bruno_Michael
Nível 8

Masculino
Inscrito dia : 04/09/2013
Mensagens : 119
Pontos Ativos : 191

Ver perfil do usuário http://brunomichael.forumeiros.com/
  • 0

Resolvido Re: Efeito hover no menu

Mensagem por Gaaratsu em 02/12/17, 10:44 pm

Marque a opção "Melhorar CSS" por gentileza!

Substitua a tua CSS por esta:
Código:
/******MENU ALTERADO**********/
.is-sticky#headerbar-top {
display: none !important;
}
.navbar a:hover {
    background-color: grey !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
    color: black !important;
    border-top: 5px solid black !important;
    border-right: 5px solid black !important;
    border-left: 5px solid black !important;
    border-bottom: 5px solid dodgerblue !important;
    line-height: 20px !important;
}
.navbar {
    text-align: center !important;
    background-color: white !important;
    border: 5px solid black !important;
    height: 50px !important;
    line-height: 0 !important;
}
.navbar a {
    border-radius: 0 !important;
    color: black !important;
    display: inline-block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 0 15px !important;
    position: relative !important;
    top: -12px !important;
}

/******LINHA NO USERINFO POST**********/

div.postprofile {
    border: 1px solid #3793ff !important;
    background-color: #fff !important;
    margin-right: 10px !important;
    margin-top: 27px !important;
}

Att! Feliz


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

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

Resolvido Re: Efeito hover no menu

Mensagem por Bruno_Michael em 02/12/17, 11:22 pm

Olá,

O menu foi resolvido agora ele está centralizado.
Sobre o efeito houve não era daquela maneira então seguindo a base do seu código conseguir fazer porém estou com um problema agora.

Imagem como ficou o seu: https://i62.servimg.com/u/f62/18/65/51/17/screen10.png
Imagem como ficou com minha alteração: https://i62.servimg.com/u/f62/18/65/51/17/screen11.png

Agora observar a segunda imagem o que o efeito houver não está no top do menu ele está com um espaço queria tira aquele espaço.
avatar

Bruno_Michael
Nível 8

Masculino
Inscrito dia : 04/09/2013
Mensagens : 119
Pontos Ativos : 191

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

Resolvido Re: Efeito hover no menu

Mensagem por Ketholy em 03/12/17, 12:20 am

Olá,

O senhor pode me repassar o código que está utilizando para determinado efeito.

Até mais!


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Ketholy — Ajudeira
avatar

Ketholy
Ajudeira
Ajudeira

Feminino
Inscrito dia : 20/01/2017
Mensagens : 858
Pontos Ativos : 1036

Ver perfil do usuário http://jogosrpg-com-br.forumais.com/forum http://assuntosgeral-com-br.forumais.com https://twitter.com/Ketholy Suan

Resolvido Re: Efeito hover no menu

Mensagem por Bruno_Michael em 03/12/17, 10:28 am

Segue o css do menu:

Código:
/******MENU ALTERADO**********/
.is-sticky#headerbar-top {
display: none !important;
}
.navbar a:hover {
    background: #888;
    border-bottom: #2ea3f2 3px solid;
    color: #fff!important;
    height: 50px;
    transition: .2s;
 
}
.navbar {
    text-align: center !important;
    background-color: black !important;
    border: 1px solid black !important;
    height: 50px !important;
    line-height: 0 !important;
    margin: 0 auto;
    max-width: 1400px;
    width: 94%;
}
.navbar a {
    border-radius: 0 !important;
    color: #fff !important;
    display: inline-block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 0 15px !important;
    position: relative !important;
    top: -12px !important;
}
avatar

Bruno_Michael
Nível 8

Masculino
Inscrito dia : 04/09/2013
Mensagens : 119
Pontos Ativos : 191

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

Resolvido Re: Efeito hover no menu

Mensagem por while em 03/12/17, 01:35 pm

Olá autor, boa tarde

Adicione mais esse código em sua folha de estilo css:

Código:
.navbar a:hover {
    border-bottom: #2ea3f2 4px solid!important;
    height: 30px!important;
}

Até.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3152
Pontos Ativos : 4600

Ver perfil do usuário http://www.ajuda.forumeiros.com https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Efeito hover no menu

Mensagem por Bruno_Michael em 03/12/17, 06:38 pm

avatar

Bruno_Michael
Nível 8

Masculino
Inscrito dia : 04/09/2013
Mensagens : 119
Pontos Ativos : 191

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

Resolvido Re: Efeito hover no menu

Mensagem por Ketholy em 03/12/17, 06:42 pm


Retire o código repassado por while e substitua por esse:

Código:
.navbar a:hover {
    background: #888;
    border-bottom: #2ea3f2 4px solid!important;
    color: #fff!important;
    height: 25px!important;
    transition: .2s;
}

Resulta?


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Ketholy — Ajudeira
avatar

Ketholy
Ajudeira
Ajudeira

Feminino
Inscrito dia : 20/01/2017
Mensagens : 858
Pontos Ativos : 1036

Ver perfil do usuário http://jogosrpg-com-br.forumais.com/forum http://assuntosgeral-com-br.forumais.com https://twitter.com/Ketholy Suan

Resolvido Re: Efeito hover no menu

Mensagem por Bruno_Michael em 03/12/17, 06:49 pm

Resulta porém não pegar no menu preto fica pequeno http://prntscr.com/himoy2
avatar

Bruno_Michael
Nível 8

Masculino
Inscrito dia : 04/09/2013
Mensagens : 119
Pontos Ativos : 191

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

Resolvido Re: Efeito hover no menu

Mensagem por Gaaratsu em 03/12/17, 07:38 pm

Olá novamente!

Para testes, troque todo o código do menu, por este:
Código:
.navbar {
    background: black !important;
    margin: -12px 0 12px 0 !important;
}
.navbar a {
    color: white !important;
    display: inline-block !important;
    font-family: "Trebuchet MS", Sans-serif, Arial, Verdana !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    height: 40px !important;
    line-height: 39px !important;
    padding: 0 12px !important;
    transition-duration: 300ms !important;
    text-shadow: none !important;
}
.navbar a:hover {
    border-bottom: #2ea3f2 2px solid !important;
    background-color: grey !important;
}
Mas antes, retire os códigos passados por @while e @Ketholy Positivo

OBS: Todos, exceto este código:
Código:
.is-sticky#headerbar-top {
display: none !important;
}
E os demais que não tenha relação com o menu.

Att! Feliz


Última edição por Gaaratsu em 03/12/17, 08:25 pm, editado 1 vez(es)


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

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

Resolvido Re: Efeito hover no menu

Mensagem por Bruno_Michael em 03/12/17, 07:55 pm

Ficou assim http://prntscr.com/hinjkl com o efeito ativado vai fica assim http://prntscr.com/hinjsd
avatar

Bruno_Michael
Nível 8

Masculino
Inscrito dia : 04/09/2013
Mensagens : 119
Pontos Ativos : 191

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

Resolvido Re: Efeito hover no menu

Mensagem por Ketholy em 05/12/17, 04:21 pm

@Bruno_Michael escreveu:Ficou assim http://prntscr.com/hinjkl com o efeito ativado vai fica assim http://prntscr.com/hinjsd

Boa tarde,

Vamos ver se entendi direito, o senhor quer algo parecido com esse efeito?

https://i62.servimg.com/u/f62/19/71/92/43/screen23.png.

Caso não seja isso, poderia específica-se a qual efeito o senhor deseja que o menu possua. No exemplo acima o efeito haver ficar completamente preenchendo a atalho ao mouse ficar por cima do mesmo, seria isso que deseja?


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Ketholy — Ajudeira
avatar

Ketholy
Ajudeira
Ajudeira

Feminino
Inscrito dia : 20/01/2017
Mensagens : 858
Pontos Ativos : 1036

Ver perfil do usuário http://jogosrpg-com-br.forumais.com/forum http://assuntosgeral-com-br.forumais.com https://twitter.com/Ketholy Suan

Resolvido Re: Efeito hover no menu

Mensagem por Bruno_Michael em 05/12/17, 10:38 pm

Sim, segue a imagem que eu fiz no paint onde se encontrar no inicio do post
EXEMPLO MEU: https://image.prntscr.com/image/0dejDr_wSNeZT_4zWQHucQ.png
é o mesmo efeito dessa imagem sua porém com uma borda azul fora da barra do menu.
SUA IMAGEM: https://i62.servimg.com/u/f62/19/71/92/43/screen23.png

Desde de já agradeço pela atenção de todos.
avatar

Bruno_Michael
Nível 8

Masculino
Inscrito dia : 04/09/2013
Mensagens : 119
Pontos Ativos : 191

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

Resolvido Re: Efeito hover no menu

Mensagem por Lemon~ em 06/12/17, 01:19 am

Adicione isso no seu css:
Código:
.navbar{
margin: 0px !important;
}
.navbar li{
margin: 0px !important
}
E onde tem isso
Código:
.navbar a:hover {
    border-bottom: #2ea3f2 2px solid !important;
    background-color: grey !important;
}
Subistitua por isso:
Código:
.navbar a:hover {
background-color: grey !important;
-webkit-box-shadow: 0px 5px 0px 0px #2ea3f2;
-moz-box-shadow: 0px 5px 0px 0px #2ea3f2;
box-shadow: 0px 5px 0px 0px #2ea3f2
}
avatar

Lemon~
Nível 6

Masculino
Inscrito dia : 05/10/2015
Mensagens : 73
Pontos Ativos : 125

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

Resolvido Re: Efeito hover no menu

Mensagem por Bruno_Michael em 06/12/17, 10:34 pm

@Lemon~ escreveu:Adicione isso no seu css:
Código:
.navbar{
margin: 0px !important;
}
.navbar li{
margin: 0px !important
}
E onde tem isso
Código:
.navbar a:hover {
    border-bottom: #2ea3f2 2px solid !important;
    background-color: grey !important;
}
Subistitua por isso:
Código:
.navbar a:hover {
background-color: grey !important;
-webkit-box-shadow: 0px 5px 0px 0px #2ea3f2;
-moz-box-shadow: 0px 5px 0px 0px #2ea3f2;
box-shadow: 0px 5px 0px 0px #2ea3f2
}

Funcionou, só que o texto do menu está um pouco no topo e não centralizado.
Veja: http://prntscr.com/hk3y3e
Código se for preciso.
Código:
.navbar a {
    color: white !important;
    display: inline-block !important;
    font-family: "Trebuchet MS", Sans-serif, Arial, Verdana !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    height: 40px !important;
    line-height: 39px !important;
    padding: 0 15px !important;
    position: relative !important;
    transition-duration: 300ms !important;
    text-shadow: none !important;
    border-radius: 0 !important;
}
avatar

Bruno_Michael
Nível 8

Masculino
Inscrito dia : 04/09/2013
Mensagens : 119
Pontos Ativos : 191

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

Resolvido Re: Efeito hover no menu

Mensagem por Lemon~ em 06/12/17, 11:11 pm

Poderia me mandar o css completo?
avatar

Lemon~
Nível 6

Masculino
Inscrito dia : 05/10/2015
Mensagens : 73
Pontos Ativos : 125

Ver perfil do usuário http://pivot5.forumeiros.com/
  • 0

Resolvido Re: Efeito hover no menu

Mensagem por Gaaratsu em 07/12/17, 03:41 am

Olá novamente!

Na busca da CSS, procure por:
Código:
line-height: 39px!important;
Substitua por:
Código:
line-height: 45px!important;
Esta linha se encontra no código que o senhor nos passou logo acima!

Veja:
.navbar a {
color: white !important;
display: inline-block !important;
font-family: "Trebuchet MS", Sans-serif, Arial, Verdana !important;
font-size: 15px !important;
font-weight: 700 !important;
height: 40px !important;
line-height: 39px !important;
padding: 0 15px !important;
position: relative !important;
transition-duration: 300ms !important;
text-shadow: none !important;
border-radius: 0 !important;
}
Att! Feliz


Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Gaaratsu — Ajudeiro
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

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

Resolvido Re: Efeito hover no menu

Mensagem por Bruno_Michael em 07/12/17, 07:49 am

Obrigado resultou, Agradeço a todos que contribuíram aqui no tópico.
Vocês são censurado.
avatar

Bruno_Michael
Nível 8

Masculino
Inscrito dia : 04/09/2013
Mensagens : 119
Pontos Ativos : 191

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

Resolvido Re: Efeito hover no menu

Mensagem por Ketholy em 07/12/17, 10:35 am

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


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Ketholy — Ajudeira
avatar

Ketholy
Ajudeira
Ajudeira

Feminino
Inscrito dia : 20/01/2017
Mensagens : 858
Pontos Ativos : 1036

Ver perfil do usuário http://jogosrpg-com-br.forumais.com/forum http://assuntosgeral-com-br.forumais.com https://twitter.com/Ketholy Suan

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

- Tópicos similares

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