Adicionar e definir o estilo de widgets de menu no Adobe Muse

Com a página-mestre aberta para edição no modo de exibição Design, abra a Biblioteca de widgets. Caso ainda não esteja aberta, escolha Janela > Biblioteca de widgets.

No painel Biblioteca de widgets, clique em Menus para expandir a lista de widgets de menu. Dependendo do design de seu site, e de onde você deseja colocar o menu, selecione um dos seguintes itens:

• Horizontal para adicionar um menu horizontal.
• Vertical para adicionar um menu vertical.

Use a ferramenta Seleção para arrastar o widget e posicioná-lo no lugar desejado em seu layout. Por exemplo, você pode posicionar widget de menu horizontal na seção do cabeçalho.

Observe que o menu exibe automaticamente os nomes das páginas criadas, na mesma ordem em que aparecem no mapa do site. Os rótulos de menu são vinculados automaticamente às páginas, e eles são dinâmicos. Ou seja, se você decidir mais tarde renomear ou mover as páginas, o menu será atualizado automaticamente. Os links continuam funcionando como esperado.

Clique no seletor de cores no Painel de controle e defina a cor do menu. Em seguida, use o campo Tamanho de texto para definir o tamanho do texto para o texto no menu.

Selecione o widget Menu e clique na seta azul, no canto superior direito do widget. O sistema exibe o painel Opções.

Configure o widget Menu pelo painel Opções. Você pode configurar as seguintes opções:

• Tipo de menu: especifica quais páginas a serem incluídas na navegação do site. Selecione Páginas superiores para incluir apenas as páginas de primeiro nível ou principais. Selecione Todas as páginas para incluir também as subpáginas na navegação. As páginas subordinadas aparecem como submenus. Selecione Manual para escolher manualmente as páginas desejadas a serem exibidas no widget do menu.
• Direção: especifique se você deseja adicionar o menu na horizontal ou vertical.
• Editar conjunto: marque esta caixa de seleção se você quiser atualizar todos os itens de menu de uma vez. Por padrão, essa caixa de seleção fica marcada. Se você não marcar essa caixa de seleção, as configurações que você escolher serão aplicadas apenas ao item de menu selecionado.
• Tamanho do item: especifique se os itens de menu devem ser distribuídos uniformemente pela largura ou por tamanho.
• Mostrar ícone à esquerda: por padrão, esta caixa de seleção não é marcada. Selecione esta opção se você deseja adicionar um ícone ao canto esquerdo de cada item de menu.
• Mostrar rótulo: por padrão, esta caixa de seleção é marcada. Quando você desmarca essa caixa de seleção, os rótulos do menu não são mais exibidos.
• Mostrar ícone à direita: selecione Desativado se desejar desativar ícones à direita. Selecione Ativado se você quiser configurar ícones no canto direito dos itens de menu. O ícone da direita é uma opção útil quando você deseja adicionar setas para indicar que há submenus para um item de menu. Você também pode escolher a opção Somente submenus, para configurar um ícone à direita somente para os itens de menu que têm submenus.
• Posicionamento de partes: especifica o ponto de partida das peças internas de cada guia.

Clique duas vezes e selecione o rótulo de menu que deseja editar.

Para editar o texto dentro do item de menu, abra o painel Texto (Janela > Texto). Com o rótulo selecionado, use o painel Texto para formatar o texto, selecionando as opções necessárias:

• Fonte: selecione a fonte que você deseja aplicar ao rótulo do menu.
• Estilo da fonte: selecione Itálico ou Negrito, se necessário, para o rótulo do menu.
• Tamanho: selecione o tamanho da fonte para o rótulo do menu.
• Cor: na lista suspensa Cor, insira o código hexadecimal da cor que você deseja aplicar. Ou, selecione a cor de sua escolha utilizando o conta-gotas.
  

Use o painel Texto para configurar os valores de margem para o rótulo do menu. Se você já tiver um estilo de hiperlink que deseja aplicar ao rótulo do menu, selecione o estilo no campo de lista suspensa próximo a abc.

Para aplicar um estilo de parágrafo, selecione o estilo na lista suspensa Estilo de parágrafo do painel Texto.

Para aplicar Preenchimento e Traçado aos rótulos de menu, clique duas vezes no rótulo e selecione. Na Barra de ferramentas na parte superior da página, selecione a cor de preenchimento e a cor do traçado.

Você também pode editar o Peso do traçado e habilitar o raio do canto para os rótulos de menu pela barra de ferramentas.

Usando a ferramenta Seleção, selecione o rótulo de menu para o qual você deseja criar o estado de rolagem. Abra o painel Estados. Observe que os estados padrão do botão já estão definidos. Clique na miniatura de Rolagem no painel Estados para editar esse estado.

Com o rótulo do menu ainda selecionado, use o seletor de Cores de preenchimento e escolha Sem preenchimento (transparente), clicando na amostra de cor branca com a linha diagonal vermelha.

Clique em Ferramenta de texto e use o seletor de cores no Painel de controle para escolher uma cor quase branca para o estado de Rolagem.

No painel Estados, selecione o estado de Pressionamento do botão do mouse. Com a Ferramenta de texto ainda selecionada, defina o texto do Pressionamento do botão do mouse com uma cor mais escura, selecionando a amostra de cor no seletor de cores do Painel de controle.

No painel Estados, selecione o estado Ativo. Clique no link Preenchimento no Painel de controle para abrir o menu Preenchimento.

No menu Preenchimento, clique no seletor de cores e defina a cor de preenchimento como Nenhuma. Clique no ícone da pasta ao lado da seção Imagem. Na caixa de diálogo Importar que é exibida, navegue para selecionar o arquivo de imagem de fundo, nomeado top-nav-over.png. Clique em Selecionar para escolher. A caixa de diálogo Importar será fechada automaticamente.

Ainda no menu Preenchimento, verifique se a opção Ajuste está definida como Tamanho original. Em seguida, na seção Posição, clique no centro dos nove pontos. Isso faz com que o preenchimento da imagem de fundo apareça com posicionamento centralizado e sem cor de preenchimento, no tamanho original. Clique em qualquer outro lugar para fechar o menu Preenchimento.

Como a opção padrão Editar junto foi ativada no widget Menu horizontal, todas as alterações feitas no rótulo do menu foram aplicadas automaticamente a todos os botões da barra de navegação.

Escolha Arquivo > Salvar para gravar o trabalho. Clique no X na guia Mestre A para fechar a página no modo de exibição Design e retornar para o modo de exibição Planejar. Observe que todas as miniaturas de página são atualizadas para incluir o conteúdo que foi adicionado à página-mestre.

Supondo que você já tenha criado o mapa do seu site, acesse a exibição Plano no Adobe Muse. Para este procedimento, vamos supor que você tenha um mapa do site com páginas que incluem Início, Portfólio, Minha história, Contato e Produtos.

Se você acessar a Página mestra e arrastar um widget de menu, verá que todas as páginas são incluídas como parte do menu.

Para excluir uma página específica, na exibição Plano, clique com o botão direito na página que você deseja excluir. Clique em Opções de menu > Excluir páginas de menus.

Por exemplo, se você deseja excluir a página Produtos, clique com o botão direito em Produtos. Depois, selecione Opções de menu > Excluir páginas de menus.

Agora, quando você retornar à Página mestra para visualizar o menu e ver que Produtos foi removido do widget de menu.

Em situações em que você deseja que um item de menu apareça sem um link, clique com o botão direito na página específica, na exibição Plano . Selecione Menu > Opções > Incluir página sem hiperlink.

Essa opção é adequada para diversos casos de uso durante a criação de um site. Por exemplo, se você tem uma página de rolagem de Produtos em que deseja que os visitantes do site cliquem somente em categorias de produtos, e não no rótulo principal de produtos, pode usar essa opção.