Plugin Menu Central em quadros

Olá galera do bem.!

Hoje vou disponibilizar um plugin que eu comprei algum tempo e na verdade não estou me recordando de onde para dar os créditos.

Eu o modifiquei bastante para usar em alguns dos meus sites e vou disponibilizar aqui em nossa biblioteca Webacappella on line.


Este plugin é uma boa opção para um menu central no tipo de site com estrutura que não usa barra de rolagens. Digo, um site que seu conteúdo fica todo dentro da telinha.

Baixe o pacote compactado clicando aqui e descompacte em um local no seu equipamento.

Para configurar os elementos tais como textos e figuras e personalizar cores você precisará editar alguns arquivos. Para isto sugiro utilizar o NOTEPAD ++ . Para baixá-lo gratuitamente clique aqui.

CONFIGURANDO ELEMENTOS (TEXTOS E IMAGENS)

Para personalizar  o plugin edite o arquivo menu.html


Edite o arquivo  conforme as instruções abaixo:

Para alterar os títulos substitua os trechos:

Opção 1 pelo título de sua escolha para o primeiro quadro (linhas 29 e 43)
Opção 2 pelo título de sua escolha para o segundo quadro (linhas 56 e 70)
Opção 3 pelo título de sua escolha para o terceiro quadro (linhas 83 e 97)
Opção 4 pelo título de sua escolha para o quarto quadro (linhas 110 e  124)


Para alterar os textos abaixo do círculo quando o quadro estiver em estado normal (sem que o mouse esteja no quadro) substitua os trechos:

Texto Opção 1 pelo texto de sua escolha para o primeiro quadro (linha 38)
Texto Opção 2 pelo texto de sua escolha para o segundo quadro (linha 65)
Texto Opção 3 pelo texto de sua escolha para o terceiro quadro (linha 92)
Texto Opção 4 pelo texto de sua escolha para o quarto quadro (linha 119)


Para alterar as imagens que aparecem nos círculos quando os quadros estão em modo normal (sem que o mouse esteja no quadro) substitua os arquivos na pasta images/services pelos arquivos "png" de sua autoria: 

Substitua o arquivo op1.png pelo seu arquivo png op1.png para o quadro1
Substitua o arquivo op2.png pelo seu arquivo png op2.png para o quadro2
Substitua o arquivo op3.png pelo seu arquivo png op3.png para o quadro3
Substitua o arquivo op4.png pelo seu arquivo png op4.png para o quadro4



Para alterar as imagens que aparecem nos círculos quando os quadros estão em modo mouseover (quando o mouse esteja no quadro) substitua os arquivos na pasta images/services pelos arquivos "jpg" de sua autoria: 

Substitua o arquivo op1.jpg pelo seu arquivo jpg op1.jpg para o quadro1
Substitua o arquivo op2.jpg pelo seu arquivo jpg op2.jpg para o quadro2
Substitua o arquivo op3.jpg pelo seu arquivo jpg op3.jpg para o quadro3
Substitua o arquivo op4.jpg pelo seu arquivo jpg op4.jpg para o quadro4



PERSONALIZAÇÃO

Para personalizar melhor o plugin edite o arquivo general.css que fica dentro da pasta CSS.

Para facilitar seu trabalho, abaixo algumas linhas que alteradas personalizam o plugin em questão de cores:

• Cor do quadro em estado normal (sem que o mouse passe por cima)

Linha 554: Edite o código da cor

• Cor do quadro em estado mouseover (quando se passa o mouse por cima)

Linha 615: Edite o código da cor

• Cor do título de cada quadro no estado normal (sem que o mouse passe por cima)

Linha 545: Edite o código da cor

• Cor do título de cada quadro no estado mouseover (quando se passa o mouse por cima)

Linha 635: Edite o código da cor

• Cor da fonte do botão SAIBA + 

Linha 699: Edite o código da cor

• Cor da borda do círculo central de cada quadro em estado normal (sem que o mouse passe por cima)

Linha 559: Edite o código da cor

• Cor da borda do círculo central de cada quadro  em mouseover (quando passar o mouse por cima do quadro):

Linha 643: Edite o código da cor



REDIRECIONAMENTOS (URL)

Tendo em vista que cada quadro será redirecionado para uma url do seu site, é necessário criar cada página referente a cada opção.

Portanto para cada página você no Webacappella nomeia a página. Para isto em cada página aciona a opção do Webacappella PÁGINA / MATRIZES>>PROPRIEDADES DA PÁGINA clica no ícone SEO e no primeiro campo dê um nome para sua página.

Lembre que cada página tem seu nome específico


Depois de criar suas páginas e nomeá-las conforme instruído acima volte a editar o arquivo menu.html


Substitua os trechos:


opcao1.html pelo nome de sua página definida para o quadro 1 (linhas 45 e 50)
opcao2.html pelo nome de sua página definida para o quadro 2 (linhas 72 e 77)
opcao3.html pelo nome de sua página definida para o quadro 3 (linhas 99 e 104)
opcao4.html pelo nome de sua página definida para o quadro 4 (linhas 126 e 131)


INSERINDO O MENU NO WEBACAPPELLA


Feito todos os passos acima, agora é hora de inserirmos nosso menu no site.
Para isso copie todo o conteúdo do arquivo menu.html, acesse a página no webacappella que deseja inserir o menu e com a opção INSERIR>>CÓDIGO HTML cole este conteúdo no último campo. De um nome para o campo para melhor organização do site.

 Defina o as dimensões do tamanho do código para L: 983  A: 344, pois é a media ocupada pelo menu.

Posicione o menu na página a sua escolha e publique seu site.

Publique na sua hospedagem também as pastas JS , CSS e images (na raiz de onde o seu site foi publicado)


Prontinho.. Para ver o exemplo on line basta clicar no botão abaixo: