criando barras de Menu com Spry
quando o ponteiro do mouse paira sobre uma barra de menu, um submenu aparece. Barra de Menu permitir que muitas opções de menu sejam acessadas a partir de um mainmenu limpo e organizado. A interatividade que eles fornecem quando um visitante passa o ponteiro do mouse sobre uma opção de menu adiciona um elemento dinâmico a uma página da web.
os widgets da barra de menus podem ser horizontais ou verticais:
- as barras de menu verticais normalmente são alinhadas em quadro, coluna de tabela, outros objetos de layout (como um DIV ou um div AP) no lado esquerdo da página.
- as barras de menu Horizontais normalmente estão alinhadas na parte superior da página e podem ser colocadas lá sem serem inseridas em um objeto de layout.
o widget Spry para inserir widgets da barra de menus permite gerar menubares com dois níveis de submenus. Portanto, um usuário pode clicar em uma opção de menu, seea submenu com um novo conjunto de opções, escolha uma dessas opções, e escolha froma segundo submenu.
Para gerar uma barra de menu widget, siga estes passos:
- Salve a página em que o widget será inserido.
- Escolha Inserir > Spry > Barra De Menu Spry. Quando o Spry Menu Bar dialogbox aparecer, selecione horizontal ou vertical formato.
- Depois de gerar uma barra de menu widget, você pode definir alguns menu básico barproperties no inspetor de Propriedades. Selecione os itens de menu ou submenu itens em theleft lado do inspetor de Propriedades; em seguida, modificá-las (ver Figura4):
- Na caixa de Texto, digite o texto que irá aparecer no menu.
- na caixa Link, insira o link que será aberto quando o item estiver marcado.
- na caixa de Título, insira o texto de acessibilidade que aparecerá na janela do navegador quando um usuário passar o ponteiro do mouse sobre uma opção de menu.
- Deixe a caixa de Destino vazio para abrir o link na mesma janela do navegador, orenter _blank para abrir o link em uma nova janela do navegador.
- Use os botões mais ( + ) e menos ( – ) acima do menu ou submenu (orsub-submenu) colunas para adicionar ou excluir novos itens de menu. Use os botões Mover Item para cima e mover Item para baixo conforme necessário para alterar a ordem dos itens de menu.
Figura 4 Definindolevels de Opções da barra de menu no inspetor de propriedades.
quando você cria ou seleciona um widget da barra de menus, um botão Desativar estilos aparece no inspetor de propriedades. Desativar estilos não afeta como o estiloé renderizado em um navegador, mas sim desativa a formatação na janela do documento. Você pode ajustar a formatação de várias propriedades da barra de menus da barra de menus selecionada usando o painel estilos CSS.
cada barra de menu gera pelo menos uma dúzia de estilos CSS. A maioria desses CSSstyles define o posicionamento e o tamanho dos menus e submenus que aparecem quando o auser passa o ponteiro do mouse sobre uma opção de menu. O posicionamento padrão desses menus geralmente é bom e não precisa ser ajustado. Você pode criar uma barra de menu personalizada definindo seus próprios links e texto e dar-lhe formato adistinctive personalizando texto e cores de fundo.
algumas das opções de estilo CSS controlam elementos relativamente discretos da barra de menus, mas todas elas podem ser editadas no painel estilos CSS. Para editar os estilos associados a um widget de barra de menu, expanda SpryMenuBarHorizontal todisplay uma lista de estilos de classe associados a esta folha de estilo. Selecionar um desses estilos de classe na parte superior do painel estilos CSS permite editar propriedades para esse estilo na metade inferior do painel estilos CSS.
para alterar a cor de fundo ou texto da barra de menus, selecione o styleul.MenuBarHorizontal a (para uma barra de menu vertical, ul.MenuBarVertical a). Com o estilo selecionado no painel estilos CSS, use a caixa de amostra de cor de fundo na metade inferior do painel estilos CSS para escolher uma nova cor de fundo e use a amostra de cores para alterar a cor da fonte (consulte a Figura 5).
Figura 5 mudando a cor do texto para uma barra de menu.
outra opção é Alterar a cor de fundo e texto de uma opção de menu pairado-overhorizontal, usando esses itens:
- ul.MenuBarHorizontal A. MenuBarItemHover
- ul.MenuBarHorizontal A. MenuBarItemSubmenuHover
- ul.MenuBarHorizontal A. MenuBarSubmenuVisible
o estilo para barras de menu verticais é semelhante, mas com Vertical no lugar dehorizontal no nome do estilo.
como você está começando a ver, as barras de menu Spry oferecem muitos, muitoselementos personalizáveis. Para obter os melhores resultados, experimente. Essencialmente, você editao conteúdo das barras de menu no inspetor de Propriedades ou selecionando umda infinidade de estilos CSS gerados e editando-o no estilo CSS.Painel.
ok, você está sozinho agora! Divirta-se com estes e outros Sprywidgets. E lembre-se tostay em touchand deixe-me saber como eles estão trabalhando em seus sites.