Menu em dropdown

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

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!

Poderia me dar o código?

Olá,

Leia: https://ajuda.forumeiros.com/t64872-sub-menus-em-dropdown?highlight=dropdown

Até mais!

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

Olá,

Poderia então explicar mais como deseja?

Até mais!

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

Obrigado

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.

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

Para isto leia este tópico:

https://ajuda.forumeiros.com/t64872-

Veja à parte do CSS.

Até mais.

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

Bem, fiz uma embolera aqui 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.

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

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.

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?

up

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

1º - 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.

2º - 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 Visualização Imagens e cores Cores Folha de estilo CSS
Código Javascript (Código no passo 1.2): Painel de controle Módulos HTML & Javascript Gestão dos códigos Javascript 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 Módulos HTML & JAVASCRIPT Gestão das paginas HTML 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 Geral Fórum Configuração Descrição do site 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!

3º - Resultado:

---

© -FireWhip-

Obrigado à todos pela ajuda!

Depois deste último tutorial consegui fazer!

Muitíssimo obrigado à todos!