Como criar um menu semelhante á esse utilizando css

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

Resolvido Como criar um menu semelhante á esse utilizando css

Mensagem por Like em 05/11/10, 09:42 pm

Gostaria de saber como fazer um menu semelhante á esse utilizando código css.
Há algum tempo que venho procurando saber como, mas acho que somente os membros da FDF podem me tirar esta dúvida.

Imagem:



att,
marcelo!
avatar

Like
Usuário destaque

Masculino
Inscrito dia : 29/10/2010
Mensagens : 885
Pontos Ativos : 1327

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

Resolvido Re: Como criar um menu semelhante á esse utilizando css

Mensagem por Itachi Uchiha em 06/11/10, 12:50 am

Olá, poderia dar o endereço do site ou fórum que você viu este efeito?

Até mais.
avatar

Itachi Uchiha
Membro do Fórum

Masculino
Inscrito dia : 14/06/2010
Mensagens : 1292
Pontos Ativos : 1860

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

Resolvido Re: Como criar um menu semelhante á esse utilizando css

Mensagem por Like em 06/11/10, 09:34 am

avatar

Like
Usuário destaque

Masculino
Inscrito dia : 29/10/2010
Mensagens : 885
Pontos Ativos : 1327

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

Resolvido Re: Como criar um menu semelhante á esse utilizando css

Mensagem por Itachi Uchiha em 06/11/10, 11:10 am

Crie um widget , e coloque o seguinte código:
Código:

<span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 3px; -webkit-border-vertical-spacing: 3px; color: #1a0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;"></span>
<table border="0" cellpadding="0" cellspacing="0" style="border-bottom-color: rgb(73, 100, 255); border-left-color: rgb(73, 100, 255); border-right-color: rgb(73, 100, 255); border-top-color: rgb(73, 100, 255); margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><tbody style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<tr style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><td colspan="2" name="conteudo NRF" style="background-color: white; border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-top-color: rgb(204, 204, 204); margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: top;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<ul class="ulmenu" id="nav" style="list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; top: 0px; width: 150px; z-index: 999;">
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/portal.htm" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Portal</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/forum.htm" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Fórum</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/regras-gerais-f10/" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Regras Gerais</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/apresentacoes-f1/" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Apresentações</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/profile.forum?mode=editprofile" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Perfil</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/parcerias-f4/como-funciona-o-sistema-de-parcerias-t133.htm" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Parceria</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/mercado-geral-f24/" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Mercado Geral</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/area-livre-f118/" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Area Livre</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://narutorpgfuture.forumeiros.com/prisao-f36/" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;">Prisão</a></li>
<li class="limenu" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 999;"><a class="off" href="http://www.top30.com.br/cgi/votar.cgi?ID=106481" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://i26.servimg.com/u/f26/14/56/85/28/m_off10.jpg); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #314f99; cursor: default; display: block; font-size: 11px; font-weight: 700; height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 2px; text-decoration: none; z-index: 999;" target="_area">Vota Top 30</a></li>
</ul>
</div>
</td><td background="http://i26.servimg.com/u/f26/14/56/85/28/menu_014.png" style="background-repeat: no-repeat repeat; border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-top-color: rgb(204, 204, 204); margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: top;" width="21"> </td></tr>
<tr style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><td background="http://i26.servimg.com/u/f26/14/56/85/28/menu_015.png" height="23" style="background-repeat: no-repeat no-repeat; border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-top-color: rgb(204, 204, 204); margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: top;" width="21"> </td><td background="http://i26.servimg.com/u/f26/14/56/85/28/menu_016.png" colspan="2" height="23" style="background-repeat: repeat no-repeat; border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-top-color: rgb(204, 204, 204); margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: top;"> </td></tr>
</tbody></table>

Bom é só modificar, tudo o código está se referindo a este fórum que você me mostrou, é só modificar os links e os nomes colocando tudo se referindo ao seu fórum.
Espero ter ajudado.

Até mais.
avatar

Itachi Uchiha
Membro do Fórum

Masculino
Inscrito dia : 14/06/2010
Mensagens : 1292
Pontos Ativos : 1860

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

Resolvido Re: Como criar um menu semelhante á esse utilizando css

Mensagem por Like em 06/11/10, 01:07 pm

Olá, inseri o código mas não está aparecendo os sub menus quando passo o mouse por cima das opçoes. olhe como ficou:

como pode ver a opçao que deveria ter sub menus "forum" esta apagada, junto com a opçao "Portal".

até mais.
avatar

Like
Usuário destaque

Masculino
Inscrito dia : 29/10/2010
Mensagens : 885
Pontos Ativos : 1327

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

Resolvido Re: Como criar um menu semelhante á esse utilizando css

Mensagem por Mikáá em 07/11/10, 09:28 am

Olá!
Porque não criar o menu sem códigos? Seria muito mais facil. E com aquele menu não me recordo nenhum codigo de css que fassa aquele sistema.
Porem posso-lhe ajudar a criar o menu igualzinho só que sem codigos.

O menu é constituido por simplesmento só por imagens, ora veija:

Apenas lhe dei duas imagens daquele menu para exemplo.
Se tiver interessado no menu para ser criado sem css, é só dizer Piscada
avatar

Mikáá
Hiperativo

Masculino
Inscrito dia : 13/02/2010
Mensagens : 3155
Pontos Ativos : 4009

Ver perfil do usuário https://www.facebook.com/amo.e.odeio

Resolvido Re: Como criar um menu semelhante á esse utilizando css

Mensagem por Like em 07/11/10, 08:26 pm

SantolaZ escreveu:Olá!
Porque não criar o menu sem códigos? Seria muito mais facil. E com aquele menu não me recordo nenhum codigo de css que fassa aquele sistema.
Porem posso-lhe ajudar a criar o menu igualzinho só que sem codigos.

O menu é constituido por simplesmento só por imagens, ora veija:

Apenas lhe dei duas imagens daquele menu para exemplo.
Se tiver interessado no menu para ser criado sem css, é só dizer Piscada

Olá, não sei se prestou atenção ao tópico, mas não é deste menu horizontal que me referi e sim do vertical, mostrado nas imagens das postagens acima.

aguardo uma resposta para o css que fique idêntico ao mostrado para que possa modificá-lo sem problemas.

att;
marcelo!
avatar

Like
Usuário destaque

Masculino
Inscrito dia : 29/10/2010
Mensagens : 885
Pontos Ativos : 1327

Ver perfil do usuário http://grandedown.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