Adicionar menu-dropdown na navegação

Detalhes da questão

Endereço do fórum: http://www.online-winxclub.com/
Versão do fórum: PhpBB3

Descrição

Eu queria complementar o meu fórum com uma ferramenta bem útil e que já notei ser possível na fórumeiros. Achei um tópico a falar disto algum tempo atrás mas era para versão PunBB e não resultou.

Vou direto ao assunto:
Quando um membro novo quer procurar páginas e está na página inicial, aqui:


Geralmente ele vai se aventurar nas páginas, mas acaba por se cansar [até eu me canso, na verdade], uma vez que ele vai... por exemplo: Para anúncios.
Ele lê um anúncio e depois quer ler artigos. Tem de clicar no botão back, e depois regressa à pagina anterior, depois clica em outro outro botão back, e assim sucessivamente e torna-se muito chato.

Então... gostava de saber como adicionar isto:


Ao passar com o rato isso aparecia e o membro só tinha de clicar para ir para uma das 3 páginas.

Veja essa pesquisa:
https://ajuda.forumeiros.com/search?search_keywords=Drop+Down

Aqui um tutorial, passo a passo:
https://ajuda.forumeiros.com/t93901-tutorial-sub-links-nos-menus

Sobre o código não funcionar por ser de outra versão é uma questão muito simples de se resolver, é só olhar os seletores de cada versão e modificar de acordo com a estrutura do seu fórum.

 

Atenciosamente,
Cepheus!

Eu segui tudo à risca e li inúmeros tópicos... mas nenhum me foi útil... não há maneira de tentar criar um menu igual ao da imagem para mim, se não for abusar é claro.

up

up

up...

up.......

juleic1123 escreveu:Eu segui tudo à risca e li inúmeros tópicos... mas nenhum me foi útil... não há maneira de tentar criar um menu igual ao da imagem para mim, se não for abusar é claro.

A varias possibilidades, uma delas era você seguir o tutorial que lhe passei acima:

Adicione no seu css:

Código:

/* Cepheus */   
ul#linklist {
  position: relative
    display:block;
}
ul#linklist li {
  position: relative
    display:block;
}
li:hover #prof-cp {
  background: #CC076B url(http://i.imgur.com/AEEkL5P.png);
  display: block;
  position: absolute;
  margin-left: -15px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
li:hover #prof-cp a {
  display: table-cell;
  font-family: sans-serif, arial;
  font-size: 12px;
  padding: 5px;
  color: #fff;
}
li:hover #prof-cp a:hover {
  color: #FFEBDD;
}
#prof-cp {
  display: none;
}    
   

Agora crie um JS com investimento em todas as paginas
e adicione:

Código:

jQuery(document).ready(function(){
/* Cepheus */
$('ul.linklist li a[href*="/portal?pid=46"]').after(
     '<div id="prof-cp"> '+
     '<a href="URL-DO-LINK">Announncements</a> '+
     '<a href="URL-DO-LINK">Events</a>'+
     '<a href="URL-DO-LINK">Articles</a>'+
     '</div>');
});

Repare no JS acima, onde está:
URL-DO-LINK
Troque pelo link correspondente ao titulo.

Infelizmente não resultou

Eu testei no console e está funcionando,
Como você disse que não estava funcionando fiz um teste em um fórum.

Acessando seu fórum reparei que existe um problema com algum JS que você adicionou em seu fórum.
Veja:


Antes de prosseguirmos peço que arrume isso em seu fórum.

@Cepheus: Sabe-me dizer ao certo qual destes js tem o tal problema? É que tudo o que eu tenho de js foi-me feito pela forumeiros... :s

Não da pra afirmar com exatidão, pois o titulo pode não corresponder ao código, mas procure algum que tenha algo similar com o código que está no final da imagem que postei acima.

Mas suspeito desse: "mobile service".

Já está, era esse código!
E agora?

Depois que removeu esse código reparei que ainda existe mais js com problemas,
Bem fiz uma analise mais apurada e constatei mais dois problema, dois scripts que estão de forma incorreta:
Você adicionou um elemento que é pra ser aplicado no html em um JS
Procure esse código ou similar e remova.
Veja:

Código:

< embed type = "application/x-mplayer2"
pluginspage = "http://www.microsoft.com/windows/mediaplayer/download/default.asp"
filename = "mms://server09.virgula.com.br/jovempanfm/"
uimode = "mini"
src = "mms://server09.virgula.com.br/jovempanfm/"
autostart = "1"
showstatusbar = "0"
showdisplay = "0"
autosize = "0"
showcontrols = "True"
autorewind = "1"
statusbar = "false"
animationatstart = "false"
showaudiocontrols = "TRUE"
showpositioncontrols = "False"
width = "240"
height = "24"
align = "texttop" > < /embed>

Também existe esse outro código que se apresenta de forma incorreta,
remova ou desative.

Código:

$(document).ready(function(){var nick=($('#logout').length)?$('#logout img').attr('alt').replace('Sair','').replace('[','').replace(']',''):'';var con=($('#logout').length)?'<a href="/profile ? mode = editprofile " style="
position: relative;
">Conectado como  <b> '+nick+'</b><ul></ul></a><a href=" / login ? logout = 1 ">Sair</a>':'Bem vindo Visitante!<a href=" / login "style="
position: relative;
">Login</a><a href=" / register ">Criar Conta</a>';$('body').prepend('<span id="
conectFor "> '+con+'</span>');$('#conectFor ul').prepend('<li><a href=" / profile ? mode = editprofile ">Informações</a></li><li><a href=" / profile ? mode = editprofile & page_profil = preferences ">Preferencias</a></li><li><a href=" / profile ? mode = editprofile & page_profil = signature ">Assinatura</a></li><li><a href=" / search ? search_id = draftsearch ">Rascunhos</a></li><li><a href=" / profile ? mode = editprofile & page_profil = friendsfoes ">Amigos</a></li><li><a href=" / profile ? mode = editprofile & page_profil = attachments ">Anexos</a></li><li><a href=" / profile ? mode = editprofile & page_profil = avatars ">Avatar</a></li><li><a href=" / search ? search_id = watchsearch "class="
offp ">Topicos Supervisionados</a></li><li><a href=" / search ? search_id = favouritesearch "target="
_blank ">Tópicos favoritos</a></li><li><a href=" / search ? search_id = newposts "target="
_blank ">Novas mensagens</a></li>')});$(document).ready(function(){$("#
logo ").click(function(){$(this).attr("
href ","
http: //www.online-winxclub.com/portal")})});

Depois volte ao tópico e avise sobre as mudanças.
Aguardando...

Muito obrigado! Resultou!