# Barra de Menu Vertical com Spry

Introdução

Se “vagarmos” pela net em busca de tutoriais com esta ferramenta do Dreamweaver CS3, encontraremos bons exemplos. Contudo, sua grande maioria peca no quesito “beleza”. É sério, gente. Que me perdoem os feios, mas beleza em um site é essencial. E é por isso que estamos aqui: para darmos um “tcham” nesse menu “apagado” e sem graça que a Adobe deixou pra nós. 

Pré-Requesitos

Como de prache, para concluir este tutorial sem maiores dificuldades, você precisa ter ou saber:

• Facilidade quanto ao manuseio do Dreamweaver CS3
• Facilidade quanto ao tratamento da linguagem CSS

Objetivo

Criar uma barra de menu vertical utilizando o Dreamweaver CS3 e o Spry

Conceito

O Spry, para aqueles que não sabem, é um framework (plataforma de trabalho) da Adobe. Ele foi criado com o objetivo de facilitar o desenvolvimento de pequenas aplicações com seus respectivos códigos pré-configurados, que nos auxilia no desenvolvimento de um projeto no Dreamweaver CS3. Em específico, o Spry Menu Bar nos ajuda na criação de barras de menus horizontais e verticais e sub-menus.

Conteúdo

Teorias à parte, vamos à prática.

Passo 1: Criação do Menu Vertical

1 – Na barra Insert, cliquemos na aba Spry e em seguida na opção Spry Menu Bar.

Fig. 01: Painel Spry

2 – Em seguida, selecionaremos a opção Vertical e OK.

“De cara” o Dreamweaver já nos coloca à disposição, uma barra “prontinha” para ser editada. E para incluirmos, excluirmos ou modificarmos os itens do menu, devemos clicar na aba de identificação do aplicativo, como mostra a imagem:

Fig.02: Aba da barra de menu

3 – Assim que clicamos nesta aba de edição, no Painel Properties surgem as opções de manipulação do menu.

Fig. 03: Painel Properties do menu

4 – Vamos criar então, os itens do menu.

Fig. 04: Itens da barra de menu

Vejamos o exemplo:

Passo 2: Excluindo Duplicidades na Folha de Estilos

Como vimos acima, essa barra está, “desaiguinimente” falando, simples demais. Vamos dar um melhorada nela. Para isso, ao clicarmos na aba do menu, à direita, no painel CSS, encontraremos todas as configurações de estilo.

Fig. 05: Painel CSS

Se observarmos bem, a folha de estilos gerada automaticamente pelo Dreamweaver cria entradas duplas como ul.MenuBarVertical e ul.MenuBarVertical ul

Fig. 06: Duplicidade na folha de estilos

Sinceramente, não entendi o porquê disso, mas enfim, isto pode causar alguns problemas quanto à formatação. Por isso, vamos fazer algumas correções.

1 – Primeiramente, vamos EXCLUIR o segundo estilo (de cima para baixo)ul.MenuBarVertical, pois o mesmo trata apenas das bordas do menu.

2 – Devemos EXCLUIR também a segunda marcação do estilo ul.MenuBarVertical ul que também trata das bordas do menu.

Passo 3: Editando a Folha de Estilos

1 – Vamos selecionar agora o comando ul.MenuBarVertical que restou e alterar o tamanho da fonte (font-size) e a largura dos itens do menu (width).

Fig. 07: Edição de propriedades

O bom de trabalhar com % em tamanhos das fontes é que elas se adequam às resoluções de tela e das propriedades dos navegadores, mantendo assim, uma quase exatidão na fonte. Já a alteração da unidade em para px é que vamos utilizar um botão com a largura exata de 150 px.

2 – Selecionando o estilo ul.MenuBarVertical li iremos alterar as margens dos itens do menu, dando-lhes uma distância de 3px entre eles. Além de alterar sua largura para 150 px também.

Fig. 08: Editando lista de itens do menu

Só pra lembrar, quando inserimos no código CSS na propriedade margin a sequência de medidas: 0 0 3px 0, fazem referência, respectivamente às medidas do: topo, lateral direita, base e lateral esquerda.

3 – Observando o menu após estas alterações, observamos que os itens se sobrepõem um pouco, um sobre o outro.

Fig. 09: Sobreposição de itens do menu

Para evitarmos isso, selecionemos a classe ul.MenuBarVertical ul e modificaremos as margens e a largura.

Fig. 10: Correção da sobreposição

4 – Vamos trabalhar neste momento com a classe ul.MenuBarVertical ul li. De imediato, criemos novas propriedades de acordo com a imagem abaixo, além de alterarmos a largura para 150px:

Fig. 11: Edição dos sub-itens