Question

我正在尝试创建一个投资组合网站，当有人点击我的某个项目时，侧面板会从右侧滑入。我希望面板是视口的100％宽度和高度。用户还可以选择单击链接或浏览器后退按钮以使面板返回动画。这可能吗？

Answer 1

<style>
#side-panel {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: black;
  opacity: 0;
  transition: 1s all;
  -webkit-transition: 1s all; }
  #side-panel:target {
    width: 100%;
    opacity: 1; }

</style>
<div id="side-panel">

    <div class="content">
        <a href="#" class="close">Close</a>
    </div>
</div>

<ul class="projects">
    <li><a href="#side-panel">Project 1</a></li>
    <li><a href="#side-panel">Project 2</a></li>
    <li><a href="#side-panel">Project 3</a></li>
</ul>

这是你要找的吗？侧面板显示使用：target（当链接更改为＃side-panel时）

jQuery侧面板与后退按钮兼容

1 个答案: