简单的滑出式导航

Question

我不是一个大程序员，但我已经构建了测试 html 页面。 code/add html 移动设备左滑导航的最简单方法是什么？我已经看到了很多解决方案，但很难让它发挥作用。

Answer 1

第 1 步

由于您正在尝试使用 Sidr 导航实现，并且由于 Sidr 是一个插件，并且依赖于 jQuery 您必须确保包含 jQuery 库在 Sidr 插件之前。

在您的 index.html 中，只需更改脚本标签的顺序即可。

你有：

<script src="js/jquery.sidr.min.js"></script>
<script src="js/jquery-min.js"></script>
<script src="js/rimages.js"></script>

你应该拥有的：

<script src="js/jquery-min.js"></script>
<script src="js/jquery.sidr.min.js"></script>
<script src="js/rimages.js"></script>

这将解决您的错误。

第 2 步

您的锚标记似乎位于顶部 div 之后，因此我们需要更改 z-index 以将其置于前面。将以下内容添加到您的 css 文件中。

.mobile-menu-trigger {
    position: relative;
    z-index: 33; //bring content forward
}

这会带来可点击的菜单按钮，当然您需要做一些额外的样式设置，但基本的 sidr 导航菜单现在应该可以使用了。

Simple slideout nav