单击div时如何显示导航内容？

Question

您好我还没有编写自己的自定义Java脚本，所以我需要一些帮助。

我在课堂上有一个div＆＃34; bt-menu＆＃34;然后是导航标签中的导航菜单。

我需要一个脚本，在单击div时从左侧滑动导航内容。然后当按下div或屏幕上的任何其他位置时，导航将滑回左侧。

希望有人可以提供帮助，谢谢

Answer 1

这里不需要花哨的jQuery甚至JavaScript，CSS adjacent sibling selector和tabindex可以为我们做到这一点：

＆＃13;

＆＃13;

div{
  background-color:red;
}
nav{
  position:absolute;
  left:-100%;
  transition:left 0.2s ease-in-out;
}
div:focus + nav{
  left:0;
}

＆＃13;

<div tabindex="0">
  <p>Click in this div</p>
</div>
<nav>
  <a>Page1</a>
  <a>Page2</a>
  <a>Page3</a>
  <a>Page4</a>
  <a>Page5</a>
</nav>

＆＃13;

＆＃13;

＆＃13;

但是，这依赖于div在代码中nav之前的定义。

Answer 2

您可以使用jquery插件，尝试在谷歌搜索这里的关键字：

  

jQuery侧面菜单插件

或者点击此链接：Lightweight Sliding Sidebar Menu Plugin with jQuery - Tuxedo Menu