如何在苹果网站上创建滑动导航栏？

Question

在我的iPhone上查看苹果网站时，它有非常酷的透明导航菜单栏。我想知道它是如何完成的。 website link

Answer 1

如果您想查看负责网站外观的代码：

1. 下载，安装和打开Goog​​le Chrome
2. 访问您要检查的网站
3. 右键单击要检查的元素
4. 查看元素html标记和css样式。

您可以在html中重新创建像苹果这样的导航栏：

<nav>
    <div class="navicon">
      &#9776;
    </div>
    <div class="logo">
      <img src="yourimagesource.com/image.jpg" />
    </div>
</nav

使用以下css为导航栏提供像Apple这样的透明背景：

nav {
  height: 2.55556em;
  margin: 0 auto 1em;
  background: rgba(0,0,0,0.6);
  font-size: 18px;
}

.navicon {
  color: #FFF;
  font-size: 1.5em;
  padding:0 0.25em;
}

关键是，对于像这样的透明度，你可以使用rgba颜色（'a'值小于1）来创建透明的背景背景。

你也可以声明opacity:0.6;但是，这可能会产生一些不必要的副作用（导航中的图像/链接也会有0.6的不透明度）。

这是example