如何创建像苹果网站那样的滑动导航栏？

Question

在我的iPhone上浏览apple的网站时，它有非常酷的透明导航菜单栏。我想知道它是怎么做到的。 website link

Answer 1

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

下载、安装并打开GoogleChrome
访问您要检查的网站
右键单击要检查的元素
查看元素 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

如何创建像苹果网站那样的滑动导航栏？

How to create a sliding navigation bar like in apple's website?

html

javascript

css

responsive-design