Como fazer isso no meu menu

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

Resolvido Como fazer isso no meu menu

Mensagem por viniciusmtn em 15/10/12, 09:21 pm

Qual é minha questão:
Quando o mause não ta encima do menu http://s6.tinypic.com/n391yg_th.jpg
ai quando eu passo o mause encima fica assim oh http://s6.tinypic.com/ipz7f8_th.jpg

Links e imagens do meu problema:
O forum onde eu ve isso foi http://suportedesign.forumeiros.com/

Endereço do meu fórum:
http://forumxbox360.forumais.com/forum

Versão do meu fórum:
PHPBB3


Última edição por viniciusmtn em 16/10/12, 07:21 pm, editado 2 vez(es)
avatar

viniciusmtn
Usuário destaque

Masculino
Inscrito dia : 04/10/2010
Mensagens : 727
Pontos Ativos : 1102

Ver perfil do usuário http://www.forumxo.com.br

Resolvido Re: Como fazer isso no meu menu

Mensagem por Ace em 15/10/12, 09:26 pm

Olá,

Tente o seguintes CSS:

Código:
 #page-header .navbar ul.linklist li{background:url(http://i.imgur.com/indNh.png) bottom;padding:6px 3px 6px 9px}#page-header .navbar ul.linklist li:hover{background:url(http://i.imgur.com/jaLTx.png)}#page-header .navbar{background:url(http://i.imgur.com/indNh.png) bottom;border:1px solid #1293ba;margin-top:-10px}#page-header .navbar ul.linklist li a{color:#fff;font-size:12px;text-shadow:.1em 0 .2em #555}#page-header input.button2{background:#e6b406 url(http://i66.servimg.com/u/f66/11/66/91/15/bg_btn10.png) repeat-x top;color:#4b3b04;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;font-weight:700;padding:5px;width:auto!important} .linklist.navlinks a:hover{-moz-transition:all .2s linear;-o-transition:all .2s linear;-webkit-transition:all .2s linear;background:url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 50% -2px;padding:5px;position:relative;transition:all .2s linear}

Se entendi bem, o que solicita é:

Código:
 .linklist.navlinks a:hover{-moz-transition:all .2s linear;-o-transition:all .2s linear;-webkit-transition:all .2s linear;background:url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 50% -2px;padding:5px;position:relative;transition:all .2s linear}

Até Mais!
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

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

Resolvido Re: Como fazer isso no meu menu

Mensagem por viniciusmtn em 15/10/12, 09:30 pm

então entre no meu forum e olhe como fico queria deixa igual ao do forum que eu coloquei encima
avatar

viniciusmtn
Usuário destaque

Masculino
Inscrito dia : 04/10/2010
Mensagens : 727
Pontos Ativos : 1102

Ver perfil do usuário http://www.forumxo.com.br

Resolvido Re: Como fazer isso no meu menu

Mensagem por Convidado em 15/10/12, 09:32 pm

Boas,
adicione em sua folha de estilo css:
Código:
#page-header .navbar ul.linklist {
    border-bottom: 0px;
    }
    #page-header .navbar span.corners-top, #page-header .navbar span.corners-top span, #page-header .navbar span.corners-bottom, #page-header .navbar span.corners-bottom span {
    display: none;
    }

    #page-header .headerbar span.corners-top, #page-header .headerbar span.corners-top span, #page-header .headerbar span.corners-bottom, #page-header .headerbar span.corners-bottom span {
    background-image: none;
    }
#page-header .navbar ul.navlinks{
background-color: transparent;
}
/*seta no menu ao passar o mouse*/
a.mainmenu{
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 40% -10px;
padding-top: 14px;
position: relative;
transition: all .2s linear;
}
a.mainmenu:hover {
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) 50% 0% no-repeat;
padding-top: 6px;
}
Resultou?

Convidado
Convidado


Resolvido Re: Como fazer isso no meu menu

Mensagem por Tiaguu em 15/10/12, 09:36 pm

Olá para ajeitar aquele erro você precisa do código certo do menu sem o efeito e depois com o efeito.

Eu sei porque eu usava esse menu.


Até amigo.

Tiaguu
Usuário destaque

Masculino
Inscrito dia : 28/08/2011
Mensagens : 644
Pontos Ativos : 977

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

Resolvido Re: Como fazer isso no meu menu

Mensagem por viniciusmtn em 15/10/12, 09:40 pm

então foi a seta agora eu queroa essa barra aqui oh http://i44.servimg.com/u/f44/15/64/80/11/br_bar10.png no menu junto com a seta e junto ao logo igual o forum a cima
avatar

viniciusmtn
Usuário destaque

Masculino
Inscrito dia : 04/10/2010
Mensagens : 727
Pontos Ativos : 1102

Ver perfil do usuário http://www.forumxo.com.br

Resolvido Re: Como fazer isso no meu menu

Mensagem por Convidado em 15/10/12, 09:48 pm

Boas,
troque por este amigo:
Código:
/*menu mas atualizado*/
#page-header .navbar ul.linklist {
    border-bottom: 0px;
    }
    #page-header .navbar span.corners-top, #page-header .navbar span.corners-top span, #page-header .navbar span.corners-bottom, #page-header .navbar span.corners-bottom span {
    display: none;
    }

    #page-header .headerbar span.corners-top, #page-header .headerbar span.corners-top span, #page-header .headerbar span.corners-bottom, #page-header .headerbar span.corners-bottom span {
    background-image: none;
    }

    #page-header .navbar ul.linklist li{
    padding: 6px 3px 6px 5;
    background: url(http://i44.servimg.com/u/f44/15/64/80/11/br_bar10.png) bottom;
    }

    #page-header .navbar ul.linklist li:hover{
    background: url(http://i44.servimg.com/u/f44/15/64/80/11/br_bar10.png);
    }

    #page-header .navbar {
    border: 1px solid #2C5787;
    background: url(http://i44.servimg.com/u/f44/15/64/80/11/br_bar10.png) bottom;
    }

    #page-header .navbar ul.linklist li a{
    color: #fff;
    font-size: 12px;
    text-shadow: 0.1em 0em 0.2em #555;
    }

    #page-header input.button2 {
    width: auto !important;
    padding: 20px 20px;
    font-size: 14px;
    font-weight: bold;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #4b3b04;
    background: #e6b406 url('http://i44.servimg.com/u/f44/15/64/80/11/br_bar10.png') repeat-x top;
    }
#page-header .navbar ul.navlinks{
background-color: transparent;
}

Convidado
Convidado


Resolvido Re: Como fazer isso no meu menu

Mensagem por viniciusmtn em 15/10/12, 10:16 pm

fico ruim olha la no meu forum como fico
avatar

viniciusmtn
Usuário destaque

Masculino
Inscrito dia : 04/10/2010
Mensagens : 727
Pontos Ativos : 1102

Ver perfil do usuário http://www.forumxo.com.br

Resolvido Re: Como fazer isso no meu menu

Mensagem por Convidado em 15/10/12, 10:26 pm

Boas,
amigo tente tirar a caixa de busca e outra, centralize o menu!

Convidado
Convidado


Resolvido Re: Como fazer isso no meu menu

Mensagem por viniciusmtn em 15/10/12, 10:37 pm

então amis fico repetindo a imagem queria que ficase so uma barra em verde
avatar

viniciusmtn
Usuário destaque

Masculino
Inscrito dia : 04/10/2010
Mensagens : 727
Pontos Ativos : 1102

Ver perfil do usuário http://www.forumxo.com.br

Resolvido Re: Como fazer isso no meu menu

Mensagem por Convidado em 15/10/12, 10:39 pm

Boas,
adicione este código em sua folha de estilo depois do código passado para o efeito no menu:
Código:
p.nomargin {
font-size: 1.1em;
line-height: 1.3em;
margin-bottom: 0;
display: none !important;
}

Convidado
Convidado


Resolvido Re: Como fazer isso no meu menu

Mensagem por viniciusmtn em 15/10/12, 10:45 pm

pronto cara agora so falta o efeito cara com a setinha
avatar

viniciusmtn
Usuário destaque

Masculino
Inscrito dia : 04/10/2010
Mensagens : 727
Pontos Ativos : 1102

Ver perfil do usuário http://www.forumxo.com.br

Resolvido Re: Como fazer isso no meu menu

Mensagem por Sennior em 16/10/12, 11:14 am

Olá,

Qual efeito falta agora? Não compreendi, para o mais adicione em teu CSS:

Código:
 a.mainmenu:hover{-moz-transition:all .2s linear;-o-transition:all .2s linear;-webkit-transition:all .2s linear;background:url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 50% -2px;padding:5px;position:relative;transition:all .2s linear}

Até mais. Piscada
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

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