Como criar Menus em CSS3

A maioria dos sites usam um sistema de menu de algum tipo, que você pode criar usando CSS3. Em pelo menos alguns casos, o sistema de menu utiliza mapas de imagem ou qualquer outra técnica que não é suportado por Dynamic Drive. No entanto, a maioria dos sites dependem horizontais, menus vertical, ou de combinação.

Ao longo dos anos, os usuários têm se acostumado a trabalhar com menus, então usá-los em um site simplesmente faz sentido. Um usuário entenda como usar um menu intuitivo, então não há nenhuma curva de aprendizagem. Claro, mal definidos ou entradas de menu complexos ainda pode confundir os usuários, mas a mecânica do próprio menu são bem compreendidos.

Como desenvolver menus horizontais em CSS3

menus horizontais têm seleções que aparecem em uma linha horizontal. Normalmente estes menus aparecem na parte superior de uma área de conteúdo, mas menus também pode aparecer na parte inferior da área de conteúdo ou em qualquer lugar entre. O ponto é que um menu horizontal tem uma orientação particular.

Para a maioria dos sites, no menu horizontal representa principais seleções do site, como indo para uma lista de produtos ou ver a página sobre. Dynamic Drive oferece sete páginas de ofertas de menu horizontal (como desta escrita) que fornecem vários efeitos especiais.

Os menus têm um efeito especial. Quando você clica em um menu de seleção particular, você verá uma página com uma demonstração. A fim de ver o efeito especial, você normalmente tem que passar o ponteiro do mouse sobre os personagens ou gráficos fornecidos como parte do menu.

Por exemplo, com o menu de exemplo, passar o ponteiro do mouse sobre um dos corações faz a rotação do coração em torno de indicar que o coração foi selecionada como uma opção de menu.

Note-se que o início da página, também inclui uma descrição do menu, juntamente com uma lista de navegadores compatíveis. A descrição normalmente contém algumas notas técnicas também. É importante ler as notas técnicas depois de analisar o código para garantir que você entender como implementar o menu.

A metade inferior da página contém o código para o exemplo. Ao contrário dos layouts, o CSS e HTML são colocados em janelas separadas, o que significa que você não tem que separá-las manualmente.

Além disso, a parte HTML não fornece uma página completa - é um fragmento que você precisa para incorporar em sua própria página para testar. (Você pode encontrar este exemplo em particular como uma página inteira na pasta Capítulo 07 da código para download como HorizontalMenu.HTML). No entanto, você pode usar a mesma técnica que você faz com os layouts para expandir e copie o código quando desejado.

Observe o link depois do código. O exemplo fornece um menu que conta com ícones do coração. Você pode clicar nesse link para baixar os ícones se desejado.

Em alguns casos, estes ícones são fornecidos por outros sites. O outro site pode ter feito os ícones inacessível e você vai descobrir que você não será capaz de baixá-los depois de tudo (como os ícones de mídia social em forma de coração usados ​​para este exemplo). Uma maneira de contornar este problema é para baixar o ícone diretamente no site da Dynamic Drive.

Nem todos os menus são uma única camada. o Menu de divisão Drop Down oferece dois níveis de seleções Alguns desses menus dependem de produtos de terceiros, tais como jQuery. o Menu de jQuery Gota Linha exemplo proporciona múltiplos níveis de menu (até quatro níveis são mostrados no exemplo).

Porque esta não é uma solução CSS puro, no entanto, você precisa se certificar de que os usuários que acessam o site terá suporte a javascript habilitado em seus navegadores.

Como desenvolver menus verticais em CSS3

menus verticais pode ser usado para o redireccionamento local. No entanto, muitos sites usá-los para páginas específicas ou tópicos específicos links. Você encontra as opções de menu verticais em Biblioteca CSS. Não há tantas opções de menu vertical como existem menus horizontais (no valor de apenas três páginas "). Além disso, você pode ter um tempo difícil encontrar pares de menu horizontal e vertical compatíveis (os menus sombra CSS3 vêm em ambos os formatos horizontal e vertical).

Os menus verticais funcionam da mesma forma como os menus horizontais fazer. A única diferença é a sua orientação. As páginas de exemplo contêm os mesmos tipos de conteúdo e você deve inserir o código HTML em uma página já existente, assim como você faz com os menus horizontais.

O site atualmente não fornece quaisquer menus verticais de vários níveis, por isso, se você precisa mais de um nível de menu, você deve usar um menu horizontal ou localizar um menu em outro site.