Tutorial: como fazer menu personalizado

  • Identifique-se para criar novos tópicos neste fórum
  • Visitantes anônimos não podem postar neste fórum
Renato Ferreira  Participativo De: Odi City  Postagens: 106

Bom, como este tópico é muitas vezes requisitado, estou liberando este how-to, explicando diferentes maneiras de obter o pretendido efeito de menu personalizado.

Este how-to tem 3 maneiras diferentes de o fazer:
(1) Simples com Menu XOOPS
(2) Simples com Menu HTML
(3) Profissional com Menu HTML

===========================
(1) Simples com Menu XOOPS
===========================

#Abra o ficheiro modules/system/templates/blocks/system_block_mainmenu.html num qualquer editor de texto.

#O arquivo vai estar +/- (varia de tema para theme) assim:






#Qualquer entrada que você adicione, tem que estar fora dos parametros e e o padrão para o fazer é:
<a class="menuMain" href="<{$xoops_url}>/nome_do_seu_ficheiro.php">nome_ficheiro

#Ficaria então (p.ex.)





NOTAS para SIMPLES COM MENU XOOPS:
1) lembre-se de conferir no ficheiro styles.css, que está na pasta themes/nome_do_seu_tema, qual é a classe que está especificada lá, pode não ser menuMain (varia da língua do tema mts vezes).

2) se você fizer essas alterações directo no modules/system/templates/blocks/system_block_mainmenu.html e o seu menu personalizado não estiver aparecendo no seu XOOPS, vá a System Admin>Blocos>Main Menu>Edit Template no painel de de controle de seu XOOPS e faça lá as alterações acima referidas.

==========================
(2) Simples com Menu HTML
==========================
#Abra um qualquer editor de texto(notepad,dreamweaver,wordpad,etc...) e crie o código HTML para os links que deseja mostrar no seu menu personalizado.

#Um exemplo para o código HTML poderá ser este:
Downloads

Links

notícias

Benfica

#Para acrescentar uma imagenzinha (de uma pasta por exemplo) antes dos links, como se vê em alguns portais mais elaborados, é só adicionar este código antes de cada link:
pointer

#Ficando então:
pointer Downloads

pointer Links

pointer notícias

pointer Benfica

NOTAS para SIMPLES COM MENU HTML:
1) Repare que no endereço para o portal do benfica, eu adicionei um rel="nofollow" dentro do link. Fiz isto porque sendo um endereço para um portal FORA do seu XOOPS, você deve querer que ele abra noutra página, e não na janela que está a mostrar o seu XOOPS.

2) O código pointer aponta para um ficheiro que já existe dentro do seu XOOPS, se você quiser pode alterar esta imagem por uma qualquer sua, basta especificar qual é.

============================
(3) Profissional com Menu HTML
============================

#Insira este código no fim (depois da última tag ?>) do ficheiro header.php que está dentro da sua pasta principal do xoops:


<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility.
* Visit http://dynamicdrive.com/ for full source code.
***********************************************/

If (document.getElementById){ //DynamicDrive.com change.
Document.write('\n')
}

Function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change.
if(el.style.display != "block"){ //DynamicDrive.com change.
for (var I=0; I if (ar[I].className=="submenu") //DynamicDrive.com change.
ar[I].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

</script>


#Vá a System Admin>Blocos dentro do Painel de Controle do XOOPS, e lá embaixo, na parte Adicionar Novo Bloco, ponha o seguinte:
Onde diz Weight escreva 1

Onde diz Visible In escolha All Pages

Onde diz Title escreva Menu Principal

Onde diz Content escreva.



#Deu para entender certo? Nesse script aí o modelo para entradas de menu é:





- Home



Onde o primeiro parágrafo, que começa por
, é a Entrada Principal, que quando você clica se expande e mostra as outras entradas do menu;
E onde o segundo, que começa por é a.
Entrada secundária, que vai aparecer debaixo da entrada principal do seu id

NOTAS para PROFISSIONAL COM MENU HTML:
1) Tome atenção e não se esqueça de alterar as cores, fontes, links e tudo os id das entradas à medida que fôr adicionando.
2) Não se esqueça de depois de feito o menu profissional e inserido no XOOPS, ir a painel controle>system admin>blocos, e procurar o que diz Main Menu e na penultima opção, antes daquela que diz editar, escolher Não para não mostrar o menu do XOOPS e mostrar apenas o seu.

Renato Ferreira  Participativo De: Odi City  Postagens: 106

É isso aí pessoal...tive o jogo todo do Benfica - Porto a fazer este pequeno tut para ver se contribuo com qualquer coisita eheheh.

O menu prof é tirado do dynamic drive, eu apenas me limitei a adoptar para XOOPS, por isso quem utilizar é favor deixar lá os créditos do autor do referido script.

Hasta comunidade.
Vou beber uma imperial para ver se relaxo

  Pesquisa avançada






Entrada

Codinome:


Senha:





Perdeu a senha?  |Cadastre-se!


Quem nos visita
Há 26 visitantes neste momento... (13 na seção Fóruns)

Associados: 0
Anônimos: 26

outros...

Banner XOOPS Cube