如何制作像CodeIgniter用户指南中那样的弹出式目录？

Question

https://www.codeigniter.com/user_guide/tutorial/index.html

访问该链接并查找页面右上角的目录按钮。我想把它应用到我正在制作的网页上。

你把这种设计技术叫做什么？有关于如何做的教程的链接吗？非常感谢。

Answer 1

要创建该菜单，可以使用css和jquery。使用创建div

position:absolute;top:-400px;width:auto;height:430px;

并使用jquery将其动画化。单击时，设置顶部:0px。您还可以使用动画jquery函数。LE：

$(document).ready(function(){ $('div a').click(function(){ $(this).parent().css('top','0px'); $(this).addClass('opened');

                 `$(this).click(function() {                         if($(this).hasClass('opened')){                             $(this).parent().css('top','-280px');                         }                     })                 });             });`

<div style="width:100%;background-color:red;position:absolute;height:300px;top:-280px;"><a href="javascript:void(0)" style="width:80px;height:20px;background-color:black;bottom:0;position:absolute;"></a></div>

这是一个示例代码。在这里，您可以对其进行编辑，并对其进行动画处理。祝好运!