Como definir um menu css3 especializada

Video: Design vertical menu with CSS

menus botão de divisão oferecer uma maneira de dar o seu site CSS3 um olhar especial. O botão de divisão diz aos espectadores que a seleção de menu padrão é o que vêem no momento, mas que outras opções estão disponíveis. Basta clicar no botão de divisão leva o espectador para o site padrão.

Video: Responsive Navigation Menu Bar Tutorial with HTML5 and CSS3

No entanto, clicando na seta para baixo ao lado do botão mostra as outras opções e o espectador pode facilmente selecionar qualquer um deles como uma alternativa a um padrão.

Este tipo de menu não está limitado a apenas orientando as pessoas para outros locais. Ele também pode atuar como uma espécie de campo de entrada para um formulário. O botão mostra a seleção padrão para esse campo. No entanto, você também pode escolher uma das alternativas se eles trabalham melhor. O ponto é que menus botão de divisão proporcionar uma abordagem especializada para desenvolvimento menu.

Video: HTML CSS - Créer un menu déroulant avec HTML5 et CSS3

O exemplo neste artigo baseia-se no exemplo v1.2 Botões de Menu Dividir mostrado em dynamic drive. Os seguintes passos começar a usar este menu especializado e oferecer sugestões sobre modificações que você pode querer fazer a ele.

1. Baixe o arquivo splitmenubuttons.js encontradas na seção Passo 1 da página Dynamic Drive e, em seguida, colocá-lo na pasta que você deseja usar para a sua página de teste.

2. Baixe o arquivo splitmenubuttons.css encontradas na seção Passo 1 da página Dynamic Drive e, em seguida, colocá-lo na pasta que você deseja usar para a sua página de teste.

3. Criar uma nova página HTML 5 usando seu editor de texto favorito ou IDE, e depois salvá-lo como SplitButton.HTML.

4. Mudar o

5. Clique em Selecionar tudo na porção Passo 2 da página Dynamic Drive.

   Você vê o código de cabeçalho para o exemplo destacado.

6. Copiar o texto realçado para a área de transferência e colá-lo dentro do seção da página de exemplo.

   O editor adiciona o código para o seção. Se você olhar cuidadosamente para este código, você encontrará um link para splitmenubuttons.css e uma referência de script para splitmenubuttons.js. Este exemplo também conta com jQuery, então você encontrar uma referência de script para jquery.min.js.

   O código também inclui um script para criar os botões de divisão que usa a sintaxe jQuery. Você não precisará modificar esse script, desde que você siga algumas regras simples na criação do seu menu. Os passos que se seguem discutir estas regras.

7. Criar links para cada uma das entradas de menu no topo do seção da página da seguinte forma:

   CasaProdutosSobre

   
   
   
   

   Cada uma dessas entradas é um botão de menu de nível superior para a página. Quando o usuário exibe a página, ele mostra Casa, produtos e Sobre como três botões. Cada um dos botões irá para um local específico quando clicado. No entanto, você pode substituir # para o atributo href, se você não quer um botão para fazer nada quando clicado.

   A classe deve aparecer como splitmenubutton em cada caso. Você pode encontrar o CSS para esta classe no arquivo splitmenubuttons.css.

   O atributo-showmenu dados define quais submenu para usar. Você deve definir um nome, mesmo se você não pretende usar um submenu com um botão particular. Neste exemplo, o botão Home não incluirá qualquer submenus.

   O atributo-splitmenu dados especifica se um botão deve mostrar a seta para baixo, como parte do botão ou como um botão separado. Este exemplo mostra ambos os casos. A configuração padrão é verdadeiro, o que significa a seta aparece como um botão separado.

   Você usa os-menucolors dados de atributos para especificar as cores utilizadas para a cor de fundo padrão e a cor selecionada. A cor padrão é Darkred, mas a maioria dos desenvolvedores vai querer substituir os padrões para obter um olhar específico.

8. Criar um submenu para o menu de produtos, usando o seguinte código:

9. produtos 1
10. produto 2
11. produto 3
12. produto 4
13. produto 5

Um submenu é simplesmente uma lista desordenada. Cada um dos itens da lista contém uma âncora que aponta para o local que deseja o espectador a percorrer. A lista não ordenada deve ter um valor de atributo id que corresponda ao valor do atributo-showmenu dados. Além disso, o primeiro nível de listas não ordenadas em um submenu deve usar a classe splitdropdown.

14. Criar um submenu para o menu Sobre, usando o seguinte código:

15. Nossa história
16. Declaração de privacidade
17. Contate-Nos
18. Pelo telefone
19. Por carta
20. Por email
21. webmaster
22. Apoio, suporte

Este menu é um pouco mais complexa. Se você deseja criar submenus do seu submenus, basta colocar a lista não ordenada correspondente dentro do item da lista, como mostrado. O Contato submenu realmente contém três níveis de opções de menu.

Adicione o atributo class =”separador” quando você quiser adicionar um pouco de espaço extra entre os itens do menu. Usando este atributo torna possível para que os usuários vejam as relações entre itens de menu com maior facilidade.

23. Salve o SplitButton.HTML modificado e carregá-lo no seu browser.

    Você vê a saída simples.

    

Note, que o botão Home aparece como qualquer outro botão, mas que carece de uma seta para baixo, porque ele não tem um menu associado. Ao clicar neste botão irá levá-lo para a página inicial.

Como acontece com qualquer menu baseado em CSS, você pode fazer uma série de mudanças para o aparecimento desses menus. Por exemplo, é possível alterar as setas para algo diferente do triângulo simples mostrada.