Categorias

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.





Menu Vertical