移动网站的常见要求是包括网站导航菜单。这些菜单可以采取许多不同的形式。以下是一些在AMP文档上可以呈现导航的例子：
主页链接
让用户访问您网站的常规导航选项的最简单的方法是将它们回传到您的常规网站界面！
尝试将此HTML链接添加到<header>标签：
<header>
<a href="homepage.html">
<amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img>
</a>
News Site
</header>
并将此规则添加到内联CSS中：
.home-button {
float: left;
}
现在刷新页面。您应该看到指向homepage.html的页面左上角的链接 - 如果您点击此链接，您将很快发现它不会导向任何地方。
此链接可以替换为您网站首页的网址，以便您的用户可以通过您的常规网站导航导航到您网站的其他部分。
如上所述，这是最简单的方法 - 利用您现有的网站导航。接下来我们将探讨两种选择。
子标题菜单
另一种方法是在AMP文档中显示您的站点的导航菜单。为了保持占页面的一小部分，我们可以使用轮播来在网站的标题下显示一个可滚动的菜单。
由于我们需要轮播组件，请确保将组件的JavaScript添加到页面的<head>标签中：
尝试将此HTML代码片段添加到<header>标签下方：
...
</header>
<div class="sub-menu">
<amp-carousel layout="fixed-height" height="38" type="carousel">
<a href="#example1">Example 1</a>
<a href="#example2">Example 2</a>
<a href="#example3">Longer Named Example 3</a>
<a href="#example4">Example 4</a>
<a href="#example5">Example 5</a>
<a href="#example6">Example 6</a>
</amp-carousel>
</div>
<article>
并将这些规则添加到您的内联CSS中：
.sub-menu {
background: black;
}
.sub-menu a {
display: block;
background: tomato;
margin: 5px;
padding: 5px;
color: white;
text-decoration: none;
}
现在刷新页面。您应该会在文章标题下方看到一个链接菜单。该菜单可以水平滚动以存储许多导航链接。
此子菜单导航是存储大量链接的绝佳方法，而不会在页面上占用太多空间。
