简单的滑出导航(Simple slideout nav)

简单的滑出导航(Simple slideout nav)

我不是一个大编码器，但我已经建立了测试html页面。 为移动设备编码/添加html左侧幻灯片导航的最简单方法是什么？ 我已经看到了很多解决方案，但却无法让它工作。

I'm not a big coder but I have my test html page built. What is the most simple way to code/add an html left slide navigation for mobile? I have seen so many solutions but having trouble getting it to work.

最满意答案

步骤1

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

在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导航菜单现在应该可以工作。

STEP 1

Since you're are trying to use a Sidr navigation implementation, and since Sidr is a plugin, and reliant on jQuery you have to make sure to include the jQuery library before the Sidr plugin.

In your index.html simply change the order of your script tags.

What you have:

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

What you should have:

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

This will resolve your errors.

STEP 2

It appears that your anchor tag is being placed behind the top div so we will need to change the z-index to bring it forward. Add the following to your css file.

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

This brings the clickable menu button forward, of course you will need to do some additional styling, but the basic sidr navigation menu should now work.