Menu Widget em CSS

2 participantes

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

Tópico resolvido Menu Widget em CSS

Mensagem por kakakoro 05.08.15 15:07

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


www.mundonegro.forumeiros.com

kakakoro

kakakoro
Super Membro

Membro desde : 06/08/2012
Mensagens : 1006
Pontos : 1582

http://www.rpgorigem.forumeiros.com

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Menu Widget em CSS

Mensagem por Fraise 05.08.15 15:18

Olá!

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

Até mais.
Fraise
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu Widget em CSS

Mensagem por kakakoro 05.08.15 15:53

@Fraise claro! Me desculpe ter me expressado mal. É mais ou menos assim widget - Menu Widget em CSS Free-css-drop-down-menu


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.
kakakoro

kakakoro
Super Membro

Membro desde : 06/08/2012
Mensagens : 1006
Pontos : 1582

http://www.rpgorigem.forumeiros.com

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Menu Widget em CSS

Mensagem por Fraise 05.08.15 15:58

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
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu Widget em CSS

Mensagem por kakakoro 05.08.15 16:10

@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
kakakoro

kakakoro
Super Membro

Membro desde : 06/08/2012
Mensagens : 1006
Pontos : 1582

http://www.rpgorigem.forumeiros.com

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Menu Widget em CSS

Mensagem por Fraise 05.08.15 16:14

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
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu Widget em CSS

Mensagem por kakakoro 05.08.15 21:36

Hey muito bom! Pode fechar amigo @Fraise
kakakoro

kakakoro
Super Membro

Membro desde : 06/08/2012
Mensagens : 1006
Pontos : 1582

http://www.rpgorigem.forumeiros.com

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Menu Widget em CSS

Mensagem por Fraise 05.08.15 22:11

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

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6558
Pontos : 8045

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

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