0 Compartilhamentos 689 Views

Menu vertical com CSS

Neste tutorial vou mostrar as técnicas CSS para construção de menus de navegação verticais com efeitos rollover de cor .
Ao final da leitura deste tutorial você estará capacitado a projetar menus verticais com uso do elemento HTML list, bem como adicionar-lhe efeitos de rollover com uso das CSS.

As técnicas CSS para construção de menus de navegação preconizam o emprego do elemento HTML list não ordenada – tag – , por apresentarem grande flexibilidade e versatilidade para estilização.

O príncipio básico de construção da estrutura HTML do menu consiste em tirar proveito do fato de o elemento comportar-se como se fosse uma divisão (elemento nível de bloco) e dentro dela divisão, enclausurar em cada elemento (elemento nível de bloco), um link (elemento inline), como um item da lista.

Com isto, conforme você verá a seguir teremos uma estrutura HTML na sequência: ul ==> li ==> a

O que nos proporciona 03 (três) elementos HTML possíveis de serem estilizados, advindo daí a versatilidade das listas para menus o que acrescido ao fato da disposição visual “empilhada” inerente as listas torná-las o elemento HTML preferido e largamente usado para construção de menus com CSS.

Carregando...

Você pode se interessar

O que é o FLoC e como ele afeta sua privacidade na internet?
Artigos
76 visualizações
Artigos
76 visualizações

O que é o FLoC e como ele afeta sua privacidade na internet?

Carlos L. A. da Silva - 5 de maio de 2021

Federated Learning of Cohorts é uma API proposta pelo Google para substituir os cookies, mas ela também oferece problemas

Como planejar e construir um projeto de programação
Artigos
296 visualizações
Artigos
296 visualizações

Como planejar e construir um projeto de programação

Carlos L. A. da Silva - 19 de abril de 2021

O desenvolvedor full stack Peter Lynch revela seu método de preparação para qualquer projeto, de forma simples e direta para iniciantes e veteranos.

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada
Artigos
404 visualizações
Artigos
404 visualizações

15 ferramentas de desenvolvimento para melhorar sua produtividade em 2021 sem gastar nada

Carlos L. A. da Silva - 2 de abril de 2021

O cenário de desenvolvimento está em constante mudança e muitas vezes uma ferramenta nova pode agilizar muito seu trabalho.

Deixe um Comentário

Your email address will not be published.

Mais publicações

A tecnologia por trás do deep fake de Deep Nostalgia
Artigos
390 visualizações
390 visualizações

A tecnologia por trás do deep fake de Deep Nostalgia

Carlos L. A. da Silva - 22 de março de 2021
Como se tornar um Engenheiro DevOps em 2021
Artigos
366 visualizações
366 visualizações

Como se tornar um Engenheiro DevOps em 2021

Carlos L. A. da Silva - 1 de março de 2021
Seus dados vazaram. E agora?
Artigos
331 visualizações
331 visualizações

Seus dados vazaram. E agora?

Carlos L. A. da Silva - 19 de fevereiro de 2021