在产品页上有个子导航栏，它是一个页内导航，就是点击导航栏上的项目，会把用户带到当前页面的某个位置上 .. 这个导航的设计跟主导航的样式基本上是一样的 .. 不过它会有些独特的行为，比如当页面滚动到导航栏这个位置上的时候，导航栏会固定在页面的顶部显示 ..

我们可以先去组织导航栏上的内容 .. 打开产品页面文档 .. product.html .. 导航栏的代码可以放在 hero 区域的下面 .. 子导航的包装上可以加上 ui.sub.navbar 这几个 css 类 ..

在样式文档里，可以使用这些类定位到这个元素，去应用一些样式 ..

导航栏里的内容有个固定的宽度 .. 可以使用一个 semantic ui 的 container .. div.ui.container .. 然后是导航栏上的内容，可以在放在一个带 content 类的容器里面 ..

先是导航栏上的标题，一个 h2 ，上面加上 header .. 标题上的文字是产品的名字 .. Velar ..

接着是一个菜单 ... div.ui.menu .. 然后是一些菜单项目 .. 可以用一些 a 标签 .. 每个项目的上面加上一个 .item 类 .. 需要 5 个这样的项目 ... 再设置一下项目上的文字 .. 外观 .. 内饰 .. 能力 .. 车型 .. 还有试驾 ..

这些链接的位置是当前页面上的某个地方 ... 所以 a 标签的 href 属性的值应该是一些 id .. 比如 外观 这个包装元素上的 id 是 exterior-design .. 把这个 id 作为这个菜单项的链接地址 .. #exterior-design ，# 号表示 id ..

内饰的包装元素上有个 interior-design .. 然后是能力 .. 先去给对就的包装元素上添加一个 id ，比如 feature .. 下面这块儿是车型 ... 这个元素上可以加上一个 model id .. 表示车型 .. 然后是试驾 ... 这个元素上可以加上一个 id 是 action ..

再分别去设置一下导航栏上的菜单项上的链接地址 .. #feature .. #model .. 还有 #action ..

现在我们就组织好了这个页内导航需要的代码 .. 可以先去预览一下 ... 点一下导航上的菜单项 .. 会把用户带到当前页面上的指定的位置上 .. 这里定位用的就是在元素上的 id 属性的值 ..

下面我们可以再去给这个导航添加点样式 ..