3704 Compartilhamentos 74393 Views

Menu com submenu em CSS e JavaScript

Menu expansivo vertical (com submenus) feito em CSS e JavaScript. Fácil de customizar.

INSTRUÇÕES::
Coloque na variável “n_divs” o número de categorias que irá ter o menu.
OBS: As categorias que não tiverem sub-menus, não serão contadas

Se uma categoria não tiver sub categorias, portanto não irá abrir um sub-menu.

Meu texto onde “#” é o endereço da página linkada; e target o alvo, que pode ser _self, _top, _parent ou o nome de um iframe ou frame.

Quando você quiser que uma categoria tenha sub menu, use o código:
Categoria 1

link item1A
link item2A
link item3A

Onde escondediv(‘n’,n_divs) ‘n’ é o número da categoria em ordem crescente, lembre-se
que categorias que não tem sub-menu não são contada; “id” é o nome do box que conterá o sub-menu e sempre se chamará “mdiv” seguida do número da categoria que coincidirá com ‘n’ explicado mais acima, ex: id=”mdiv1″, id=”mdiv2″ etc..

“#” é o endereço da página linkada e “target” o alvo, que pode ser _self, _top,_parent ou o nome de um iframe ou frame.

Edite as cores e estilos dos links e das células na folha de estilo logo abaixo

OBS:
As funções {onmouseover=”reveza(‘um’)” onmouseout=”volta(‘um’)”} são opcionais, elas revezam as configurações de cores e estilos dos sub-menus trocando as classes itens_menu por itens_menu_r na folha de estilo.

Para usala basta por o código dentro do link relativo ao item de sub-menu, mas é necessário atribuir uma id à td onde se encontra o link que será passado nas funções “reveza” e “volta”. O primeiro item de sub-menu está com essa opção à titulo de exemplo.

Não poderá haver dois nomes iguais para as IDs das TDs

Obs.: Código não desenvolvido por mim, mas muito interessante!

Você pode se interessar

7 Passos para preparar sua loja online para a Black Friday e o Natal
Artigos
10 visualizações
Artigos
10 visualizações

7 Passos para preparar sua loja online para a Black Friday e o Natal

Carlos L. A. da Silva - 12 de novembro de 2019

Chegou aquela época do ano que os lojistas adoram e o desafio está lançado: sua loja online está preparada?

Pipeline (CD/CI) // Dicionário do Programador
Vídeos
9 visualizações
Vídeos
9 visualizações

Pipeline (CD/CI) // Dicionário do Programador

Thais Cardoso de Mello - 11 de novembro de 2019

Continuous Integration e Continuous Delivery Pipeline ou CI/CD Pipeline, ou ainda Continuous Delivery Pipeline, ou Pipeline para os íntimos é um processo que vem sendo amplamente utilizado nas empresas de desenvolvimento.

Promoções de Jogos do Final de Semana (09/11)
Notícias
17 visualizações
Notícias
17 visualizações

Promoções de Jogos do Final de Semana (09/11)

Carlos L. A. da Silva - 9 de novembro de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

Mais publicações

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105
Vídeos
9 visualizações
9 visualizações

Como se Tornar um Cientista de Dados de Sucesso // Vlog #105

Thais Cardoso de Mello - 7 de novembro de 2019
Aprenda a acelerar a performance de sites com “premonição”
Artigos
18 visualizações
18 visualizações

Aprenda a acelerar a performance de sites com “premonição”

Carlos L. A. da Silva - 5 de novembro de 2019
Swift (a linguagem do iOS) // Dicionário do Programador
Vídeos
8 visualizações
8 visualizações

Swift (a linguagem do iOS) // Dicionário do Programador

Thais Cardoso de Mello - 4 de novembro de 2019
Promoções de Jogos do Final de Semana (01/11)
Notícias
12 visualizações
12 visualizações

Promoções de Jogos do Final de Semana (01/11)

Carlos L. A. da Silva - 1 de novembro de 2019