Aspeto dos submenus

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

Resolvido Aspeto dos submenus

Mensagem por Diogo Ferreira em 04/03/14, 11:43 am

Qual é minha questão:
Olá.
É possível mudar os aspetos dos menus e consequente hover?

Os meus estão assim: http://gyazo.com/2b456b40744f49156d9da1c9bf88a02f
Queria assim: http://gyazo.com/df6332c261335c8092675c61ff24feed

Queria mudar só mesmo o fundo deles (estilo).
Obrigado.

Endereço do meu fórum:
http://foradjogo.forumeiros.com

Versão do fórum:
PUNBB


Última edição por Diogo Ferreira em 04/03/14, 04:14 pm, editado 1 vez(es)
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

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

Resolvido Re: Aspeto dos submenus

Mensagem por Hancki em 04/03/14, 12:10 pm

Olá!

Use este CSS:
Código:
li.has-sub, li.has-sub ul li {
background-color: #1c3b5f !important;
line-height: 40px !important;
border-bottom: 1px solid grey !important;
}
li.has-sub:nth-child(4) {
background: none !important;
line-height: 12px !important;
border-bottom: 0px !important;
}
Resultado: http://prntscr.com/2xsrki
Foi o melhor que consegui. Não consegui o hover :/
E uma opinião pessoal, prefiro como está, o estilo está mais em contexto.

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Aspeto dos submenus

Mensagem por Diogo Ferreira em 04/03/14, 01:40 pm

Não ficou igual amigo.xD
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

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

Resolvido Re: Aspeto dos submenus

Mensagem por Hancki em 04/03/14, 02:47 pm

Nunca ficará igual porque o outro site tem uma estrutura HTML diferente, classes atribuídas mais diversificadas. É complicado modificar o seu menu, acredite. Não sei como o fazer mais, ou então todo o menu fica desconfigurado.

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Aspeto dos submenus

Mensagem por Diogo Ferreira em 04/03/14, 03:05 pm

Amigo, pode então colocar riscas pretas a dividir como na imagem?
E já agora o mesmo estilo de letra com cor branca.
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

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

Resolvido Re: Aspeto dos submenus

Mensagem por Hancki em 04/03/14, 03:07 pm

Para as linhas pretas:
Código:
li.has-sub, li.has-sub ul li {
border-bottom: 1px solid black !important;
}
li.has-sub:nth-child(4) {
border-bottom: 0px !important;
}
Em relação à cor branca, não aconselho. Não existe uma classe específica para o botão principal e então ficará branco, enquanto que os outros principais são pretos de predefinição.

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Aspeto dos submenus

Mensagem por Diogo Ferreira em 04/03/14, 03:14 pm

Resultou, mas tem como colocar a letra igual? Se tiver posso testar.

Quanto aos submenus em si, aparecem por baixo do avatar, veja:
http://gyazo.com/8280a2dc519bf1b818bfbcb97fb34a89
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

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

Resolvido Re: Aspeto dos submenus

Mensagem por Hancki em 04/03/14, 03:36 pm

Só vejo desta forma possível...
Para o tipo de letra funcionar... nova página JS, investido em todas as páginas com o código:
Código:
WebFontConfig = {
    google: { families: [ 'Titillium+Web::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
E um CSS:
Código:
li.has-sub, li.has-sub ul li {
z-index: 9999 !important;
}
#cssmenu a {
font-family: Titillium Web;
}
Veja o resultado: http://prntscr.com/2xupyq
Destaquei o avatar da ultima mensagem, para ver como esse problema já não ocorre. E repare o tipo de letra. Terá que ser em todo o menu.

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Aspeto dos submenus

Mensagem por Diogo Ferreira em 04/03/14, 03:41 pm

Tá resolvido, muito obrigado.
Uma última dúvida, onde mudo a cor para branco nos submenus?
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

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

Resolvido Re: Aspeto dos submenus

Mensagem por Hancki em 04/03/14, 03:42 pm

Nos códigos CSS que lhe passei, os primeiros, procure pela linha:
Código:
background-color: #1c3b5f !important;
Substitua por:
Código:
background-color: white !important;

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Aspeto dos submenus

Mensagem por Diogo Ferreira em 04/03/14, 04:14 pm

Resolvido, pode fechar e muito obrigado.
avatar

Diogo Ferreira
Usuário destaque

Masculino
Inscrito dia : 24/09/2013
Mensagens : 585
Pontos Ativos : 877

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

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