Tutorial Dreamweaver – Menu com sub-menus

Nesse tutorial você vai aprender como é facil criar um menu com sub-intens utilizando o Macromedia Dreamweaver CS3....

Faça um menu com subitens, com o Dreamweaver Cs3 você faz isso sem perder tempo e muito menos a cabeça.

Primeiro passo, abra o Dreamweaver Cs3 (dãã é obvio né), na sua barra de ferramentas clique na aba de Spry e vamos brincar com o Spry Menu Bar.

O sistema irá pedir para você salvar o documento (frescura do DW, brincadeira, nesta etapa você além de salvar o arquivo, junto será salvo o javascript e o css, falaremos mais disso no final deste tutorial, após clicar no Spry Menu Bar irá aparecer uma janela com as opções do menu

Neste caso escolhi o Horizontal, mas a brincadeira fica a seu critério.

Será criado o “pré-menu” e na parte inferior da tela irá surgir as propriedades do Spry, caso não apareça clique na aba azul que aparece sobre o menu no modo design.
Spry menu Bar

Nas propriedades do Spry existem 3 boxes no 1º box são os itens do menu e o 2º e 3º são os subitens (sim, só dá pra fazer 2 subitens, mas mais que isso já é demais mesmo).

Os ícones de + você adiciona um item, logo os de – você remove o item selecionado. para adicionar um subitem basta você clicar num item e no box ao lado clicar no ícone + e está adicionado o seu subitem.
Spry menu Bar

No final das propriedades do Spry ao clicar sobre um dos itens você pode configurar o que será escrito no item (Text), o link para aonde irá o item (Link), o título do item (Title) e o Target (_blank, _self, _top …)

Você já deve ter entendido, mas se AINDA não entendeu vamos para um exemplo prático, na imagem acima
eu clique no + do primeiro box e criei 4 itens e clicando sobre cada um deles fui renomeando pelo campo Text e definindo o link de cada um deles (coloquei os links como # para apenas testar o menu e não sair da página).

Para criar o subitem do menu produtos eu cliquei sobre ele e no 2º box adicionei mais dois itens e novamente defini o nome dos itens e criei mais itens clicando em Templates e adicionando mais itens no 3º box. Uffa! agora você já deve ter entendido…

O meu menu fico assim

Feio? magina né…

Salve o arquivo (ctrl+s) e junto será salvo os arquivos javascript, css e imagens (naquela “frescurada” do DW que eu disse) .
Abra o arquivo SpryAssets > SpryMenuBarHorizontal.css e edite o css de acordo com sua criatividade.


Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Pode usar estas etiquetas HTML e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>