Menu em dropdown

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

Resolvido Menu em dropdown

Mensagem por ZeMuhammad em 08/09/12, 12:24 pm

Qual é minha questão:
Já pesquisei por isso aqui no FDF mas todos códigos que encontrava era customizado para tal fórum, gostaria que criassem para mim também,

Os menus que eu gostaria que tivesse dropdown são: (em imagem)
-About
-My Stuff
-Community

Tem como deixar em Dropdown com imagem?

Links e imagens do meu problema:
Não é necessário.

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

Versão do meu fórum:
PHPBB3


Última edição por ZeMuhammad em 09/09/12, 11:13 am, editado 1 vez(es)
avatar

ZeMuhammad
Nível 9

Masculino
Inscrito dia : 31/08/2012
Mensagens : 150
Pontos Ativos : 236

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

Resolvido Re: Menu em dropdown

Mensagem por Convidado em 08/09/12, 12:32 pm

Olá amigo,
não fazemos este tipo de suporte somente oferecemos código se você quer um menu do jeito em que esta falando e edite você mesmo lamento pela comprienção!

Convidado
Convidado


Resolvido Re: Menu em dropdown

Mensagem por ZeMuhammad em 08/09/12, 12:35 pm

Poderia me dar o código?
avatar

ZeMuhammad
Nível 9

Masculino
Inscrito dia : 31/08/2012
Mensagens : 150
Pontos Ativos : 236

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

Resolvido Re: Menu em dropdown

Mensagem por Sennior em 08/09/12, 12:37 pm

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

Resolvido Re: Menu em dropdown

Mensagem por ZeMuhammad em 08/09/12, 12:58 pm

Estes tutoriais estão customizados para tais fóruns, não entendo como editar. Poderia me ajudar?
avatar

ZeMuhammad
Nível 9

Masculino
Inscrito dia : 31/08/2012
Mensagens : 150
Pontos Ativos : 236

Ver perfil do usuário http://battlefieldplay4free.forumeiros.com
  • 0

Resolvido Re: Menu em dropdown

Mensagem por Sennior em 08/09/12, 01:48 pm

Olá,

Poderia então explicar mais como deseja?

Até mais!
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

Resolvido Re: Menu em dropdown

Mensagem por ZeMuhammad em 08/09/12, 03:13 pm

Poderia me dar os códigos apenas com urls de exemplo? Eu modifico e adiciono as urls certas no lugar.

Obrigado
avatar

ZeMuhammad
Nível 9

Masculino
Inscrito dia : 31/08/2012
Mensagens : 150
Pontos Ativos : 236

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

Resolvido Re: Menu em dropdown

Mensagem por Sennior em 08/09/12, 05:34 pm

Olá,

Aqui está, apenas modifique à área chamada LINK URL pelo link do fórum que deseja ao clicar:

Código:
jQuery(document).ready(function(){jQuery('.navlinks li a[href="/forum"]').after('<div class="ulhome"><ul><li class="limenup"><a href="http://br-designerforever.forumeiros.com/f1-regras">Regras</a><br></li><li class="limenup"><a href="http://br-designerforever.forumeiros.com/f16-eventos">Eventos</a><br></li><li class="limenup"><a href="LINK URL">Shop</a><br></li><li class="limenup"><a href="LINK URL">Pedidos</a><br></li><a href="LINK URL">Tutoriais</a><br></li><a href="LINK URL">Recursos</a><br></li><a href="LINK URL">Apresentações</a><br></li><a href="LINK URL">Bate Papo</a><br></li><a href="LINK URL">Sugestões</a><br></li></ul></div>')});

Até mais.
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

Resolvido Re: Menu em dropdown

Mensagem por ZeMuhammad em 08/09/12, 05:50 pm

Apenas crio um JS, não precisa de nada na CSS ou é procedimento padrão?
avatar

ZeMuhammad
Nível 9

Masculino
Inscrito dia : 31/08/2012
Mensagens : 150
Pontos Ativos : 236

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

Resolvido Re: Menu em dropdown

Mensagem por Sennior em 08/09/12, 05:55 pm

Para isto leia este tópico:

:seta2: http://ajuda.forumeiros.com/t64872-

Veja à parte do CSS.

Até mais.
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

Resolvido Re: Menu em dropdown

Mensagem por ZeMuhammad em 08/09/12, 05:57 pm

Bom, ainda não deu certo, ele só funciona com texto? Pois meu navbar é feito de imagens.
avatar

ZeMuhammad
Nível 9

Masculino
Inscrito dia : 31/08/2012
Mensagens : 150
Pontos Ativos : 236

Ver perfil do usuário http://battlefieldplay4free.forumeiros.com
  • 0

Resolvido Re: Menu em dropdown

Mensagem por Sennior em 08/09/12, 07:11 pm

Bem, fiz uma embolera aqui Rindo Troque seu JS por este, troque onde esta "Link da imagem".

Código:
jQuery(document).ready(function(){jQuery('.navlinks li a[href="/forum"]').after('<div class="ulhome"><ul><li class="limenup"><a href="LINK URL"><img>link da imagem</img></a><br></li><li class="limenup"><a href="http://br-designerforever.forumeiros.com/f16-eventos"><img>link da imagem</img></a><br></li><li class="limenup"><a href="LINK URL"><img>link da imagem</img></a><br></li><li class="limenup"><a href="LINK URL"><img>link da imagem</img></a><br></li><a href="LINK URL"><img>link da imagem</img></a><br></li><a href="LINK URL"><img>link da imagem</img></a><br></li><a href="LINK URL"><img>link da imagem</img></a><br></li><a href="LINK URL"><img>link da imagem</img></a><br></li><a href="LINK URL"><img>link da imagem</img></a><br></li></ul></div>')});

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

Resolvido Re: Menu em dropdown

Mensagem por ZeMuhammad em 08/09/12, 07:15 pm

Bom, você me deu os códigos, mas, ainda não entendi qual imagem substituir e qual LINK URL devo colocar.
avatar

ZeMuhammad
Nível 9

Masculino
Inscrito dia : 31/08/2012
Mensagens : 150
Pontos Ativos : 236

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

Resolvido Re: Menu em dropdown

Mensagem por Sennior em 08/09/12, 07:23 pm

Simples! Onde está escrito "LINK URL" você deve colocar o link que ira aparecer no menu ao colocar o mouse sobre o mesmo.

"LINK DA IMAGEM" e a imagem que deseja colocar nas abas.

Até mais.
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

Resolvido Re: Menu em dropdown

Mensagem por ZeMuhammad em 08/09/12, 07:27 pm

Então devo deletar o que eu coloquei no Menus?

EDIT: Está ativado a opção "Exibir apenas as imagens no menu de navegação"

EDIT²: Poderia me passar novamente o código que devo colocar na folha de estilos CSS?
avatar

ZeMuhammad
Nível 9

Masculino
Inscrito dia : 31/08/2012
Mensagens : 150
Pontos Ativos : 236

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

Resolvido Re: Menu em dropdown

Mensagem por ZeMuhammad em 09/09/12, 09:58 am

up
avatar

ZeMuhammad
Nível 9

Masculino
Inscrito dia : 31/08/2012
Mensagens : 150
Pontos Ativos : 236

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

Resolvido Re: Menu em dropdown

Mensagem por Convidado em 09/09/12, 10:23 am



Menu em dropdown

Em alguns fóruns, inclusive o fórum PowerSing, têm um efeito no menu, com vários links, esses links dentro do link do menu é chamado de, dropdown, e neste tutorial você irá saber como adicionar em seu fórum, esse efeito, com dois códigos extremamente simples e de dificuldade baixa para a edição dos códigos. Sem mais demora, vamos começar este tutorial.

--> Tutoriais Forumeiros <--
Menu em dropdown


- Conhecendo os códigos
Primeiramente, devemos antes, conhecer os códigos que utilizaremos no decorrer de nosso tutorial.
1.1) Código CSS:
Código:
/* menu em dropdown - oferecido pelo fórum PowerSing - http://power-sing.forumeiros.com/ - Proíbida a retirada deste copyright */
.navlinks li{position:relative}
.ulhome{left:0px;top:40px;position:absolute !important;display:none;z-index:999;text-align:center !important;
  background-color: #FFFFFF !important; !important;border:1px solid #690;list-style:none;position:relative;z-index:990;}
.ulhome ul{text-align:left;border: 1px solid #CCCCCC;padding:0px 14px 0px 3px;}
.ulhome .limenup an{text-decoration:none;display:block;z-index:900;background-image:none !important;}
li:hover .ulhome{left:0px;display:block;top:13px !important}
/* fim do código do menu em dropdown - oferecido pelo fórum PowerSing - http://power-sing.forumeiros.com/ - Proíbida a retirada deste copyright */

1.2) Código Javascript:
Código:
jQuery(document).ready(function(){jQuery('.navlinks li a[href="LINK-DO-MENU-EM-QUE-O-EFEITO-IRÁ-OCORRER"]').after('<div class="ulhome"><div style="background-color: #F2F2F2"><ul><li class="limenup"><a href="LINK-QUE-APARECERÁ NO EFEITO">NOME-DO-LINK</a><br></li></ul></div></div>')});
Para adicionar mais link no menu em dropdown, adicione o seguinte código, após a tag </li>
Código:
<li class="limenup"><a href="LINK-QUE-APARECERÁ NO EFEITO">NOME-DO-LINK</a><br></li></ul>
LINK-DO-MENU-EM-QUE-O-EFEITO-IRÁ-OCORRER: Adicione o link no qual o efeito em dropdown irá ocorrer, exemplo: /portal, sem o link de seu fórum, somente a barra e o nome do link do menu de navegação do fórum.
LINK-QUE-APARECERÁ NO EFEITO: Adicione o endereço do link no qual o mesmo aparecerá em link no menu, exemplo: /t1-, /h1-, /f1-.
NOME-DO-LINK: Nome do link que aparecerá ao passar o link no menu desejado, que aparecerá no menu em dropdown.

- Aplicando os códigos
Agora, vamos aplicar o código em seu fórum, para isso, faça os seguintes procedimentos:
Código CSS (Código no passo 1.1): [b]Painel de controle Seta Visualização Seta Imagens e cores Seta Cores Seta Folha de estilo CSS
Código Javascript (Código no passo 1.2): Painel de controle Seta Módulos Seta HTML & Javascript Seta Gestão dos códigos Javascript Seta Criar novo Javascript
[quote]Nome: O que desejar
Investimento: Em todas as paginas
Código Javascript: Adicione o código do passo 1.2

--> FAQ do Tutorial <--
Menu em dropdown


  • Se o código Javascript não funcionar, o que devo fazer?
    Em alguns fóruns, o código não surge o efeito desejado, então devemos recorrer ao HTML, para isso faça o seguinte procedimento:
    Painel de controle Seta Módulos Seta HTML & JAVASCRIPT Seta Gestão das paginas HTML Seta Criar nova pagina HTML
    Nome: O que desejar
    Você deseja utilizar o início e o final da página do seu fórum & Usar esta página como página inicial: Selecione nessas duas perguntas Não.
    Código HTML: Adicione o código do passo 1.1 e logo após faça o seguinte procedimento
    Painel de controle Seta Geral Seta Fórum Seta Configuração Seta Descrição do site Seta e adicione o seguinte código
    [quote]<script src=/h[color=red]x[/color=red]-></script>[quote]
    [b]Vermelho
    : Adicione o numero da pagina HTMl que você criou anteriormente, após isso salve!


- Resultado:


© -FireWhip-


Convidado
Convidado


Resolvido Re: Menu em dropdown

Mensagem por ZeMuhammad em 09/09/12, 11:12 am

Obrigado à todos pela ajuda!

Depois deste último tutorial consegui fazer!

Muitíssimo obrigado à todos!
avatar

ZeMuhammad
Nível 9

Masculino
Inscrito dia : 31/08/2012
Mensagens : 150
Pontos Ativos : 236

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