Menu simples com Jq -> Multinível

Olá turma do bem, baum d+ da conta?

Passeando pelos bastidores da internet encontrei um plugin de um menu em jq  (Multinível) para alimentar nossa biblioteca Webacappella on line.

Muito fácil de usar.

Primeiro baixe os arquivos necessários clicando aqui.

Descompacte o arquivo baixado em uma pasta. Para configurar as opções do menu você precisará editar o arquivo index.html. Eu sugerio utilizar o notepad++, para baixá-lo gratuitamente clique aqui


Para configura é muito fácil basta substituir o nome do Menu no arquivo index.html pelo nome desejado e substituir o "#" localizado logo na frente do nome do menu pela url desejada.

Caso você desejar um submenu para alguma opção do menu basta  adicionar  as linhas abaixo logo abaixo da linha da opção desejada:

<ul>
        <li><a href="#">Sub opção 2.1</a></li>
        <li><a href="#">Sub opção 2.2</a></li>
        <li><a href="#">Sub opção 2.3</a> </li>
</ul>

Se  você não quiser um submenu onde existir basta apagar as linhas

Para alterar o tamanho da fonte edite a linha 17
Para alterar a fonte de letra utilizada edite a linha 18


Para um melhor entendimento irei fazer um exemplo bem reduzido.

Terei no exemplo as seguintes opções principais no menu

Home
Sobre
Suporte

O menu suporte terá um outro menu com as seguintes opções

Tickets
Contato


E o menu Tickets terá as seguintes opções

Novo Ticket
Consultar Ticket


Alterei o tamanho da fonte para 14px



Então editando o arquivo index.html ficou assim:

Causando o seguinte resultado

Agora vou inserir os links para cada opção:

Agora no WebAcappella eu crio minhas páginas e nomeio cada uma com seu respectivo nome html.

Exemplo vou criar a página Sobre e no WebAcappella em PÁGINAS/MATRIZES>>PROPRIEDADES DA PÁGINA clico em SEO  e no campo "Nome da sua página no navegador internet" eu coloco sobre

Depois de todas minhas páginas criadas eu vou agora inserir o código no meu site.


Para isto você tem duas opções.

OPÇÃO 1:

No Webacappella vá na opção SITE>>PROPRIEDADE DO SITE clica na catraca insira o código no primeiro campo:

OPÇÃO 2:

Crie uma matriz e nesta matriz pela opção do Webacappella INSERIR>>CÓDIGO HTML insira no campo o código.

Posicione no site onde vai querer o menu
Lembre que todas as páginas tem que utilizar a matriz como fundo



Eu particularmente prefiro a OPÇÃO 2.


Para alterar as cores você edita o arquivo jqsimplemenu.css dentro da pasta CSS

Sendo :
Linha 27: Cor da letra do menu principal
Linha 34: Cor do fundo do menu Selecionado no menu principal
Linha 60: Cor do fundo do menu selecionado no menu principal
Linha 77: Cor do fundo dos sub menus
Linha 88: Cor da letra dos submenus

Com as alterações nas cores que apliquei ficou assim:

Agora você copia as pastas CSS, IMAGES, JS para a sua hospedagem e publique o site.

Prontinho..