1

我正在尝试创建一个使用 CSS 在不同内容之间导航的单页网站。

我已阅读:target并了解该站点仅适用于 Chrome、Firefox、IE9+、Safari 和 Opera 9.5+。

如何实现一次只有一个部分可见的仅 CSS 导航？

4

1 回答 1

2

完整演示

使用这个菜单。

布局

为此，首先对文档进行布局，使您有多个.pages，并且每个 s 都有一个唯一的 id。

<div class="page" id="home">
  <h1>Home</h1>
  <div class="body">
  </div>
</div>

然后创建一个菜单或其他包含链接的结构。这些应该具有与您的 id 匹配的哈希值。例如id="home"和href="#home"。

<ul>
    <li><a href="#home">HOME</a></li>
</ul>

CSS

您现在必须决定您希望页面如何转换。我选择使用top和的组合opacity。

另请注意，强烈建议将元素的初始位置设置为页面顶部。当您单击其中一个链接时，浏览器将自动使元素的左上角可见。如果您希望它水平或垂直移动，请在其中放置一个元素，并转换其位置（例如，h1或.body）。

.page {
  width: 100%;
  position: absolute;
  top: -500em; left: 0;
  max-height: 0;
  transition: all .5s ease; /* vendor prefixes recommended */
  pointer-events: none;
}

:target当 url 中的 hash 等于元素 id 时，任何样式都会生效。例如，此样式将在 URL 的散列#home.page时激活。#home

.page:target {
  max-height: 300%;
  pointer-events: auto;
  top: 13em; 
}

您还可以为活动页面的子项设置动画，但请记住不要做.page:target h1（.page h1:target任何时候只有一个或零个目标元素）。

.page > h1, .page > .body {
  transition: all .5s  cubic-bezier(1, .38, .70, 0);
  opacity: 0;
}

.page:target > h1, .page:target > .body {
  opacity: 1;
}

JavaScript（可选）

为了帮助 JavaScript 用户一点，#home如果没有设置哈希，我们可以告诉页面默认为。

location.hash = location.hash || "home";

您还可以使用 Apache 之类的东西在您的服务器上进行重定向mod_rewrite。

于 2013-08-07T22:38:44.547 回答