Como definir um menu especializado CSS3

menus de 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.

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

Este tipo de menu não se limita apenas a orientar as pessoas para outros locais. Ele pode também actuar como uma espécie de campo de entrada para uma forma. 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 de botão de divisão proporcionar uma abordagem especializada para o desenvolvimento menu.

O exemplo neste artigo baseia-se no exemplo v1.2 Botões de Menu de Split 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 com o seu editor de texto favorito ou IDE, e depois salvá-lo como SplitButton.HTML.

  4. Mudar o tag como mostrado aqui:

    Um exemplo do uso de um menu dividir Botã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. Copie o texto realçado para a área de transferência e colá-lo dentro do seção da página de exemplo.

    O editor acrescenta 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 qual submenu para usar. Você deve definir um nome, mesmo se você não pretende usar um submenu com um botão específico. 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 aparecer como um botão separado.

    Você usa as-menucolors dados de atributos para especificar as cores utilizadas para a cor de fundo padrão e da 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. produto 1
  10. produto 2
  11. produto 3
  12. Produto 4
  13. produto 5

    14. 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. Nos contate
  18. Pelo telefone
  19. Por carta
  20. Por email
  21. webmaster
  22. Apoio

    23. Este menu é um pouco mais complexa. Se você deseja criar submenus de sua submenus, basta colocar a lista não ordenada correspondente dentro do item da lista, como mostrado. A Contacte-nos 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.

    image0.jpg

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 outra coisa que não o triângulo simples mostrada.

Semelhante

menu