Navigating your site
A maioria dos sites para dispositivos móveis tem um menu de navegação. Esses menus podem ter várias formas. Neste tutorial, testaremos os seguintes exemplos de como apresentar a navegação nas páginas AMP:
- Incluir um link para sua página inicial: a opção mais simples.
- Adicionar uma barra de navegação lateral usando o componente
amp-sidebar.
Link para a página inicial
A maneira mais simples de fazer com que os usuários acessem as opções de navegação normais do site é levá-los de volta à página inicial.
Experimente substituir sua tag <header> por esta versão com um link:
<header class="headerbar"> <a href="homepage.html"> <amp-img class="home-button" src="icons/home.png" width="36" height="36" ></amp-img> </a> <div class="site-name">News Site</div> </header> Depois, adicione estas regras de estilo ao CSS inline:
.home-button { margin-top: 8px; } .headerbar { height: 50px; position: fixed; z-index: 999; top: 0; width: 100%; display: flex; align-items: center; } .site-name { margin: auto; } article { margin-top: 50px; } Agora, atualize a página. Você verá um link para homepage.html no canto superior esquerdo da página. Se você clicar no ícone da página inicial, verá que ele não leva a lugar algum, porque o arquivo homepage.html não existe.
É possível substituir este link pela URL da página inicial do seu site para permitir que os usuários naveguem para outras seções por meio da navegação existente.
Essa é a forma mais fácil de aproveitar os elementos existentes de navegação do seu site. A seguir, veremos uma opção muito usada para a navegação em sites.
Navegação com uma barra lateral
Uma técnica comum de navegação é adicionar um ícone de menu que, ao receber um clique, mostra vários links de navegação na lateral da página. Nas páginas AMP, é possível criar esse tipo de navegação com o componente amp-sidebar.
Primeiro, é preciso adicionar o JavaScript do componente amp-sidebar à tag <head>:
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" ></script> Em seguida, queremos exibir um ícone de menu. Quando tocado, ele abrirá a barra lateral. Substitua o <header> pelo seguinte código para exibir um ícone de "hambúrguer" em vez de um representando a página inicial:
<header class="headerbar"> <div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger"> ☰ </div> <div class="site-name">News Site</div> </header> No código acima, alternamos a barra lateral usando o atributo de ação on no elemento amp-sidebar, que é identificado pelo código sidebar1. Vamos adicionar a barra lateral.
Adicione o HTML a seguir logo após o </header>:
<amp-sidebar id="sidebar1" layout="nodisplay" side="left"> <div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar" > ✕ </div> <ul class="sidebar"> <li><a href="#">Example 1</a></li> <li><a href="#">Example 2</a></li> <li><a href="#">Example 3</a></li> </ul> </amp-sidebar> A barra ficará oculta, mas quando o usuário tocar no ícone de hambúrguer, o menu será exibido no lado esquerdo da tela. Para fechar o menu, o usuário pode tocar no ícone X.
Por fim, adicione estas regras de estilo ao CSS inline:
.hamburger { padding-left: 10px; } .sidebar { padding: 10px; margin: 0; } .sidebar > li { list-style: none; margin-bottom: 10px; } .sidebar a { text-decoration: none; } .close-sidebar { font-size: 1.5em; padding-left: 5px; } Vejamos como ficou a barra lateral. Atualize e recarregue a página AMP. Você verá algo como:
Nossa página está ótima! Vamos dar um toque final com uma fonte personalizada.