Javascript 如何使菜单从视口滑动到标题

我正在学习（刚刚开始）jQuery，现在我想制作一个类似于on的菜单

我的意思是，我希望菜单从视口滑到标题，就像链接中的模板一样

我试图查看jQueryAPI文档，YT上关于菜单的一些视频等，但没有找到任何相关内容

谁能教我怎么做

多谢各位

附言：我只有这个：

@导入url（'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400700’；
* {
保证金：0；
填充：0；
}
身体{
字体系列：“源Sans-Pro”，无衬线；
框大小：边框框；
背景色：#4E4F53；
字体大小：400；
}
.集装箱{
最大宽度：980px；
保证金：自动；
}
标题{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
背景色：#2d；
填充：20px0；
}
.标志{
浮动：左；
}
保险商实验室{
位置：相对位置；
浮动：对；
保证金：5px；
显示器：flex；
弯曲方向：行；
}
ul.active{}
ulli{
列表样式：无；
}
ullia{
颜色：#FFF；
文本转换：大写；
文字装饰：无；
填充：0.1.25em；
显示：块；
字号：1em；
}
.菜单切换{
边缘：0 1米；
颜色：#fff；
字号：1.5em；
浮动：对；
光标：指针；
}

上升






$（文档）.ready（函数（）{
$（“.menu toggle”）。单击（函数（）{
$（“.menu”）.toggle（）；
});
});

我建议，如果您想制作一个在点击按钮时出现在屏幕上的导航菜单，请按常规创建菜单，然后使用css中的

translateX（）

将其放置在屏幕左侧或右侧

从那时起，当单击按钮时，切换一个类，该类将把菜单平移到x轴上，使其可见

使用

translateY（）css类和jQuery来切换类。
这段代码应该能让你到达你需要的地方！它需要一些编辑来满足您的需要

我添加了一个名为
.offsite canvas
的div，用于存放“屏幕外”容器。当您按下菜单切换按钮时，jQuery将切换一个类，该类将为用户显示屏幕外的容器


$（“.menu toggle”）。单击（函数（）{
$（“.off-site canvas”）.toggleClass（“打开”）；
});
@导入url（'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400700’；
* {
保证金：0；
填充：0；
}
.场外帆布{
位置：相对位置；
转换：translateY（-400px）；
过渡：全部5秒；
z指数：100；
}
.offsite-canvas.open{
位置：相对位置；
变换：translateY（0）；
}
身体{
字体系列：“源Sans-Pro”，无衬线；
框大小：边框框；
背景色：#4E4F53；
字体大小：400；
}
.集装箱{
最大宽度：980px；
保证金：自动；
}
标题{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
背景色：#2d；
填充：20px0；
}
.标志{
浮动：左；
}
保险商实验室{
位置：相对位置；
浮动：对；
保证金：5px；
显示器：flex；
弯曲方向：行；
}
保险商实验室{
显示器：flex；
浮动：无；
z指数：100；
}
ul.active{}
ulli{
列表样式：无；
}
ullia{
颜色：#FFF；
文本转换：大写；
文字装饰：无；
填充：0.1.25em；
显示：块；
字号：1em；
}
.菜单切换{
边缘：0 1米；
颜色：#fff；
字号：1.5em；
浮动：对；
光标：指针；
}

上升












$（文档）.ready（函数（）{
$（“.menu toggle”）。单击（函数（）{
$（“.menu”）.toggle（）；
});
});
非常感谢……这就是我要找的：）竖起大拇指