Em Introdução ao Spry framework para Ajax, conhecemos o Spry e sua integração junto a interface do Dreamweaver CS3. Neste artigo, falaremos sobre o Spry Menu bar – um dos recursos oferecidos por esse framework.
O Spry Menu Bar é utilizado para criar menus drop-down horizontais ou verticais de até três níveis, com o Dreamweaver CS3 é muito simples criar menus desse estilo com tal recurso. Veremos nesse artigo todo o procedimento de criação.
O recurso Spry Menu Bar está localizado em duas abas na Insert bar, na aba Layout e Spry. Observe:
Spry Menu Bar na aba Layout
Spry Menu Bar na aba Spry
Coloque o ponto de inserção no local em que se deseja criar o Spry Menu Bar, em seguida, clique sobre o ícone do recurso demonstrado acima. Feito isso, será exibido o painel Spry Menu Bar; nele, você escolherá uma dentre as duas opções de layout: horizontal ou vertical. Observe:
Ao clicar em OK, o Dreamweaver CS3 irá criar as três partes que compõe o widget em questão. Ou seja, a estrutura – que são os códigos HTML que definem a composição estrutural do widget; o comportamento – que são os códigos JavaScript que controlam as respostas do widget mediante aos eventos ocasionados pelo usuário; e a apresentação – que são as declarações CSS que especificam a aparência do widget.
Como se pôde perceber, o Dreamweaver criou todas essas partes em apenas dois cliques. Simples?
Para configurar o Spry Menu Bar, é preciso selecionar esse recurso no Document window. Assim, o Property inspector exibirá as propriedades do recurso selecionado. Para selecionar o Spry Menu Bar, como mencionado, é necessário selecioná-lo no Document window, através de uma aba que o engloba. Observe:
Aba que engloba o Spry Menu Bar no Document window
Outra opção, é selecionar a tag
- através do Tag selector. A tag
- referente ao Spry Menu Bar tem uma classe CSS denominada como MenuBarHorizontal ou MenuBarVertical. Veja um exemplo:
Tag ul no Tag selector referente ao Spry Menu Bar
Uma vez selecionado, poderemos configurá-lo através do Property inspector. Tanto o layout Horizontal, quanto o Vertical, possuem as mesmas configurações, o que os diferenciam são as declarações CSS. Portanto, as configurações aqui demonstradas, são úteis tanto para um, quanto para o outro.
Assista ao vídeo explicativo abaixo, e veja as opções disponíveis para configurar o Spry Menu Bar.
Quanto à estilização do Spry Menu Bar, abra o arquivo SpryMenuBarHorizontal.css ou SpryMenuBarVertical.css localizada na pasta SpryAssets e faças as alterações desejadas. O arquivo está totalmente comentado, o que facilita o entendimento da utilização de cada declaração CSS referente ao menu.
Vou ficando por aqui, até o próximo e um abraço a todos.
fonte: imasters.com.br
Nenhum comentário:
Postar um comentário