Saiba como adicionar e configurar menus no site do Adobe Muse. Saiba como criar menus móveis, estados de rolagem, e edite rótulos de menus.

Observação:

O Adobe Muse não está mais adicionando novos recursos e suspenderá o suporte em quinta-feira, 26 de março de 2020. Para obter informações detalhadas e assistência, consulte a a página de fim de serviço do Adobe Muse.

A navegação é um dos aspectos mais importantes a serem considerados ao desenvolver um site. Ao criar um site, é fundamental escolher o tipo e o posicionamento da navegação. A experiência do usuário de um site pode aumentar ou diminuir por causa dos menus ou da navegação do site.

Com o Adobe Muse, você cria rapidamente um sistema de navegação do site usando o widgets de Menu. Embora você possa criar links para páginas manualmente, os widgets de Menu são uma maneira fácil e flexível de adicionar
navegação ao site. Como outros widgets, basta arrastar o widget Menu para a página e adicionar menus. Quando você faz isso, descobre que os rótulos, que têm os mesmos nomes das páginas, são preenchidos automaticamente. Quando você altera o nome da página na exibição Plano, os rótulos dos menus são atualizados automaticamente.

Você pode adicionar menus verticais e horizontais. Além disso, o Adobe Muse permite a você criar menus de sanduíche e estados de rolagem para itens de menu. Leia mais para saber como fazer tudo isso usando o Adobe Muse.

 

Adicionar um widget de menu

  1. 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.

  2. 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.
    Selecione o widget de menu horizontal ou vertical no Adobe Muse
    Selecione o widget de menu horizontal ou vertical
  3. 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.

    Posicione o widget de menu sobre a imagem de fundo da faixa marrom no cabeçalho.
    Posicione o widget de menu sobre a imagem de fundo da faixa marrom no 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.

  4. 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.

    Escolha o tamanho e a cor do texto
    Defina a cor da fonte e indique o tamanho para controlar os botões de texto no widget Menu horizontal.

Configurar e personalizar widget de menu

Agora que você já adicionou o widget de menu ao layout, pode personalizar este widget como preferir. Você pode configurar menus usando o painel Opções .  O painel Opções é um painel de contexto que permite aplicar alterações às configurações de atualização específicas do widget. Use este painel para controlar como os widgets se comportam e como o conteúdo do widget é exibido.

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

    Configurar o widget Menu no painel Opções
    Configurar o widget Menu no painel Opções
  2. 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.
    Configurar o widget Menu pelo painel Opções
    Configurar o widget Menu pelo painel Opções

Editar e estilizar rótulos de menus

O seguinte procedimento especifica como atualizar os rótulos de texto que exibem os nomes de páginas em cada item de menu. Use um widget menu Horizontal que usa um design muito básico com links de texto simples. Para este exemplo, vamos supor que a mesma formatação de fonte seja usada para todos os estados.

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

  2. 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.
    Editar rótulos de menu no widget Menu
    Editar rótulos de menu no widget Menu
  3. 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.

  4. 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.

    Aplicar configurações de Preenchimento e Traçado aos rótulos de menu
    Aplicar configurações de Preenchimento e Traçado aos rótulos de menu

Crie estados de rolagem para itens de menu

  1. 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.

  2. 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.

  3. 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.

  4. 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.

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

  6. 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.

  7. 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.

    Estados do botão Definir
    Defina o estado ativo do item de menu.

    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.

  8. 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.

    Observação:

    As guias da região do cabeçalho e do rodapé podem ser editadas apenas nas páginas-mestre do site. Sempre que quiser editar o tamanho do cabeçalho ou do rodapé das páginas, clique duas vezes na página-mestre para abri-la no modo de exibição Design e reposicionar as guias ali.

Criar um menu móvel

O Adobe Muse também permite que você crie um menu sanduíche ou menu móvel. Quando você cria esse tipo de menu, um submenu suspenso aparece ao passar o mouse sobre o menu principal. Para criar esse tipo de menu, consulte Criar submenus usando widgets de composição.

Excluir páginas pelo menu

Sempre que você cria uma nova página de nível superior para seu site na exibição Plano, o Adobe Muse adiciona automaticamente a página ao menu. No entanto, pode acontecer de você querer testar uma página antes de disponibilizá-la aos visitantes, ou ocultar uma página específica. Nesses casos, o Adobe Muse permite a você excluir páginas específicas da navegação para garantir que elas não sejam listadas como itens no widget de menu.

Realize o seguinte procedimento para excluir páginas do widget de menu:

  1. 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.

    Exibir o mapa do site na exibição Plano
    Exibir o mapa do site na exibição Plano

    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.

  2. 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.

    Excluir páginas específicas do widget de menu
    Excluir páginas específicas do widget de menu

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

    Observação:

    Para excluir todo o menu, acesse a página onde você adicionou o widget de menu. Selecione o widget e pressione Excluir.

    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.

Trabalhar com widgets de menu

Trabalhar com widgets de menu
Neste vídeo, apresentado por Brian Wood, você aprenderá a inserir um widget de menu na página.
Adobe Press - Peachpit

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online