full demo

Question

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

我已阅读:target并了解此网站仅适用于Chrome，Firefox，IE9 +，Safari和Opera 9.5 +。

如何实现仅CSS导航，其中一次只能看到一个部分？

Answer 1

full demo

^{使用this menu。}

布局

要执行此操作，请首先布置文档，以便您拥有多个.page，并且每个文档都有唯一的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;
}

当url中的哈希值等于元素id时，:target的任何样式都会生效。例如，当#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。

之类的东西在您的服务器上进行重定向

如何使用#hash URL创建仅限CSS的标签/页面？

1 个答案:

full demo

布局

CSS

JavaScript（可选）