Menu Widget em CSS

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

Resolvido Menu Widget em CSS

Mensagem por kakakoro em 05/08/15, 11:07 am

Bom dia! Gostaria de colocar um Menu legal como widget no meu fórum. Algum código para teste?


www.mundonegro.forumeiros.com

avatar

kakakoro
Membro do Fórum

Masculino
Inscrito dia : 05/08/2012
Mensagens : 1006
Pontos Ativos : 1587

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

Resolvido Re: Menu Widget em CSS

Mensagem por Fraise em 05/08/15, 11:18 am

Olá!

Desculpe, não entendi o que o senhor deseja. Louco
Poderia explicar melhor e se possível apresentar uma imagem?

Até mais.
Fraise
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5034
Pontos Ativos : 6714

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Menu Widget em CSS

Mensagem por kakakoro em 05/08/15, 11:53 am

@Fraise claro! Me desculpe ter me expressado mal. É mais ou menos assim


Um menu para o RPG onde vou colocar links para shopping, locais de caça e etc. E esse código irei colocar em um widget no fórum e no portal.
avatar

kakakoro
Membro do Fórum

Masculino
Inscrito dia : 05/08/2012
Mensagens : 1006
Pontos Ativos : 1587

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

Resolvido Re: Menu Widget em CSS

Mensagem por Fraise em 05/08/15, 11:58 am

Olá!

Primeiramente, adicione este código à sua folha de estilos:
Código:
.menu{margin:0; padding:0; width:300px; list-style:none;background:rgb(255,255,255);}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('http://i.imgur.com/EV5TaSW.png') 0px 0px no-repeat; text-decoration:none;}
.menu li a:hover{background:url('http://i.imgur.com/EV5TaSW.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menu li a.active, .menu li a.active:hover{background:url('http://i.imgur.com/EV5TaSW.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:40px;}

E no código do widget:
Código:
<ul class="menu">
  <li><a href="Link" class="active"><span>Nome</span></a></li>
  <li><a href="Link"><span>Nome</span></a></li>
  <li><a href="Link"><span>Nome</span></a></li>
  <li><a href="Link"><span>Nome</span></a></li>
  <li><a href="Link"><span>Nome</span></a></li>
  <li><a href="Link"><span>Nome</span></a></li>
</ul>

Cumprimentos.
Fraise
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5034
Pontos Ativos : 6714

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Menu Widget em CSS

Mensagem por kakakoro em 05/08/15, 12:10 pm

@Fraise Hmmm , nao ficou muito legal não. Eu até tentei mudar os códigos e configurar mas ficou muito estranho. Veja se consegue pegar os códigos do menu widget desse fórum.

http://jogodostronos.forumeiros.com/forum
avatar

kakakoro
Membro do Fórum

Masculino
Inscrito dia : 05/08/2012
Mensagens : 1006
Pontos Ativos : 1587

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

Resolvido Re: Menu Widget em CSS

Mensagem por Fraise em 05/08/15, 12:14 pm

Olá!

Algo assim?
Código:
<style type="text/css">.fraise {float:right; width:160px; font-family: 'Verdana', serif; font-size:10px; text-align: center; background-color: #363636; border: 2px #8C705C solid; padding-top:3px; padding:3px; color: #0e2db0; text-transform: uppercase; overflow: hidden; -moz-transition:all 1.5s ease-in-out; -webkit-transition:all 1s ease-in-out; } .fraise:hover {float:right; width:160px; font-family: 'Verdana', serif; font-size:12px; text-align: center; background-color: #363636; border: 2px #f4c8a9 solid; color: #8968CD; padding-top:3px; padding:3px; text-transform: uppercase; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; } </style>
<div class="fraise"><a href="Link">Nome</a></div>
<div class="fraise"><a href="Link">Nome</a></div>
<div class="fraise"><a href="Link">Nome</a></div>
<div class="fraise"><a href="Link">Nome</a></div>
<div class="fraise"><a href="Link">Nome</a></div>
<div class="fraise"><a href="Link">Nome</a></div>
<div style="text-align: center; font-size: 20 px; font-family: 'Verdana', cursive; color: #8C705C; text-transform:uppercase; letter-spacing: 2px; padding-bottom:5px;">Menu</div>
<div style="text-align: center; font-size: 34px; font-family: tahoma', cursive; color: #363636; text-transform:uppercase; letter-spacing: 2px; padding-bottom:5px;"> </div>

Cumprimentos.
Fraise
avatar

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5034
Pontos Ativos : 6714

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Menu Widget em CSS

Mensagem por kakakoro em 05/08/15, 05:36 pm

Hey muito bom! Pode fechar amigo @Fraise
avatar

kakakoro
Membro do Fórum

Masculino
Inscrito dia : 05/08/2012
Mensagens : 1006
Pontos Ativos : 1587

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

Resolvido Re: Menu Widget em CSS

Mensagem por Fraise em 05/08/15, 06:11 pm

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

Fraise
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/06/2015
Mensagens : 5034
Pontos Ativos : 6714

Ver perfil do usuário http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

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