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

Question

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

我有一个与类“BT - 菜单”的div，然后在导航标签中的导航菜单。

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

希望有人能帮助，谢谢

Answer 1

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

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

<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>

然而这取决于代码中nav之前定义的div。

Answer 2

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

jQuery的侧面菜单插件

或者检查此链接：Lightweight Sliding Sidebar Menu Plugin with jQuery - Tuxedo Menu