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:

Exemplo do painel Spry Menu Bar

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 <ul> através do Tag selector. A tag <ul> 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.