Esta extensão que vocês irão aprender hoje é perfeita, porque funciona em basicamente todos os navegadores, geralmente não dá conflito com outros javascripts, é fácil de configurar e o CSS pode ser adicionado no próprio módulo.
A extensão é a ARI Ext Menu e este é seu link de download. Claro, como todas as extensões que ensino, é free e aceitas em todos os Joomlas, exceto o 1.0.
Você pode visualizar um demo desta extensão através deste link.
Para este módulo funcionar perfeitamente, você deve ter sub-menus.
Para adicionar um sub-menu, na área administrativa, clique em Menus --> Main Menu (ou outro menu à sua escolha), clique no link que deseja tornar como sub-menu (se não houver nenhum, crie), na edição deste link, selecione do lado esquerdo Item Pai: Escolha o link que será o "pai" deste e clique em "Salvar"
Pronto! Você notará que o link que você alterou agora tem uma identação diferente e um símbolo que o liga ao seu item pai.
Instale a extensão e a acesse em Extensões --> Administrar Módulos. Ela é instalada por padrão com o nome ARI Ext Menu.
Habilite o módulo na posição desejada.
Abaixo imagem da área administrativa, onde explicarei os principais itens.
Menu Name: Qual menu que ele utilizará
Menu Direction: Direção do menu, H0rizontal ou Vertical
Hightlight current menu item: Se coloca cor diferenciada no link atual
Load ExtJS library: Deixe "yes" e só mude caso dê conflito com outro JavaScript
Auto width: Largura automatica
Animate: Se o drop será animado
Delay: Tempo de retardo para iniciar a animação do sub menu
Transition type: Tipo de transição: Fade para transparência e Slide para sair de trás do menu
Transition duration: Tempo de duração da animação
z-Index: para colocar o menu na frente de outros elementos HTML
Main menu items styles - Estilos de cores, tamanhos e fontes para o menu
Background color
Text color
Hover background color
Hover text color
Current background color
Current text color
Font size
Font weight
Text align
Text transform
Sub-menu items styles - Estilos de cores, tamanhos e fontes para o sub-menu
Use main styles (repetir estilo do menu principal?)
Background color
Text color
Hover background
Hover text color
Current background
Current text color
Font size
Font weight
Text align
Text transform
CSS Styles - Modifique o CSS do menu
Salve e teste seu módulo até alcançar o efeito desejado.
muito interessante este post viu, testei a ferramenta, muito útil!!!...como faço para colocar o menu na frente de outros elementos HTML ? se puder ajudar, muitooo obrigado!!!
ResponderExcluirNo CSS, utilize a propriedade z-index.
ResponderExcluirhttp://aprendacss.wordpress.com/2008/08/12/z-index/
Jennifer tem como remover as bordas dos botões?
ResponderExcluirtem sim, via CSS, ele é completamente editável via CSS
Excluirno caso de um menu horizontal, coloca assim como css:
Excluir.ux-menu.ux-menu-horizontal li{
border: none;
}
No caso de um vertical, coloque:
.ux-menu.ux-menu-vetical li{
border: none;
}
Ele so abre os submenus se clicar no menu inicial, tem como fazer ele abrir so de passar o mouse em cima??
ResponderExcluirNa verdade, o comportamento normal dele é de agir quando passa o mouse em cima. Veja em http://theunion.com.br/index.php/pt-br/
ResponderExcluirTestou em vários navegadores? manda um print da configuração dele pra mim
fiz como vc falou e ficou funcionando normal, so que as cores nao mudam tem como mudar?
ResponderExcluirTem via css. Você saca bem css?
ResponderExcluirnão saco nada de css, tem como postar um exemplo, se nao for pedir muito = claro.
ResponderExcluirVocê tem que primeiro decobrir qual o ID ou Class no html do teu menu, deve ser algo parecido com isso:
ResponderExcluir< div id="menu">
No teu template ativo, abre o css e altera ou inclui o css:
#menu li{
background: /*cor escolhida de fundo*/;
}
#menu li a{
color: /*cor escolhida do texto do menu*/;
}
Pode até colocar imagem se quiser, dá até para fazer fundo colorido como no site:
http://www.theunion.com.br
Parabéns Jennifer. Você com clareza e objetividade me ajudou um bocado.
ResponderExcluirEternamente grato.
Eu, daqui de Paulo Afonso-Bahia.