Javascript 如何以相反方向更改导航栏动画？

因此，我正在创建一个网站设计，我想将导航栏的位置从右上角更改为左上角，并想将导航栏打开动画更改为相反方向。 我的意思是，整个导航栏将位于右上方

我没有太多的CSS和web开发经验，所以请帮助我，我需要我的学校项目。 谢谢大家！ 代码如下：

文件
身体{
字体系列：“Roboto Condensed”，无衬线；
字体大小：16px；
溢出：隐藏；
文本转换：大写；
字体大小：粗体；
}
.菜单{
高度：70像素；
宽度：70px；
右：70px；
顶部：20px；
文本对齐：居中；
位置：绝对位置；
背景#f463c3；
溢出：隐藏；
过渡：所有0.2秒缓解；
z指数：999；
}
.menu.active{
宽度：85%；
过渡：宽度0.3s；
-webkit转换：宽度.3s；
-moz过渡：宽度为0.3s；
}
.menu.active.menu内容*{
不透明度：1；
}
.menu.active span i:第n个子项（1）{
变换：旋转（-45度）平移（-50%，-50%）；
最高：50%；
}
.menu.active span i:第n个子项（2）{
转换：translateX（-100px）；
不透明度：0；
}
.menu.active span i:第n个子项（3）{
变换：旋转（45度）平移（-50%，-50%）；
最高：50%；
}
.菜单范围{
宽度：70px；
高度：70像素；
位置：绝对位置；
右：0；
光标：指针；
背景#f463c3；
z指数：1；
}
.菜单范围i{
位置：绝对位置；
变换原点：50%50%；
宽度：45%；
高度：2倍；
左：0；
右：0；
保证金：自动；
背景色：#ccc；
过渡：变换0.3s缓变，不透明度0.1s缓变0.1s；
}
.菜单范围i:n子菜单（1）{
最高：40%；
}
.菜单范围i:n子菜单（2）{
最高：50%；
}
.菜单范围i:n子菜单（3）{
最高：60%；
}
.菜单.菜单内容{
位置：绝对位置；
宽度：100%；
身高：100%；
线高：40px；
右：0px；
文本对齐：居中；
}
.菜单.菜单内容*{
不透明度：0；
}
.menu.menuContent ul li{
显示：内联块；
左边距：50像素；
右边距：50px；
颜色：#2d3235；
过渡：不透明度0.3s缓和0.3s；
光标：指针；
位置：相对位置；
}
.menu.menuContent ul li:悬停：之前{
不透明度：0.8；
顶部：13px；
左：20px；
}
.menu.menuContent ul li:悬停：之后{
不透明度：0.8；
底部：13px；
左：-20px；
}

家
关于
接触
证明
关于我们

$（'.toggle'）。打开（'click'，function（）{
$（'.menu'）.toggleClass（'active'）；
});

我认为下面的代码将对您有所帮助<代码>变换：旋转（-145deg）子1和

变换：旋转（145deg）平移（-50%，-50%）用于儿童3



文件
身体{
字体系列：“Roboto Condensed”，无衬线；
字体大小：16px；
溢出：隐藏；
文本转换：大写；
字体大小：粗体；
}
.菜单{
高度：70像素；
宽度：70px；
左：70像素；
顶部：20px；
文本对齐：居中；
位置：绝对位置；
背景#f463c3；
溢出：隐藏；
过渡：所有0.2秒缓解；
z指数：999；
}
.menu.active{
宽度：85%；
过渡：宽度0.3s；
-webkit转换：宽度.3s；
-moz过渡：宽度为0.3s；
}
.菜单范围{
宽度：70px；
高度：70像素；
位置：绝对位置；
右：0；
光标：指针；
背景#f463c3；
z指数：1；
左：0；
}
.menu.active.menu内容*{
不透明度：1；
}
.menu.active span i:第n个子项（1）{
变换：旋转（-145度）平移（-50%，-50%）；
最高：50%；
}
.menu.active span i:第n个子项（2）{
转换：translateX（-100px）；
不透明度：0；
}
.menu.active span i:第n个子项（3）{
变换：旋转（145度）平移（-50%，-50%）；
最高：50%；
}
.菜单范围{
宽度：70px；
高度：70像素；
位置：绝对位置；
右：0；
光标：指针；
背景#f463c3；
z指数：1；
}
.菜单范围i{
位置：绝对位置；
变换原点：50%50%；
宽度：45%；
高度：2倍；
左：0；
右：0；
保证金：自动；
背景色：#ccc；
过渡：变换0.3s缓变，不透明度0.1s缓变0.1s；
}
.菜单范围i:n子菜单（1）{
最高：40%；
}
.菜单范围i:n子菜单（2）{
最高：50%；
}
.菜单范围i:n子菜单（3）{
最高：60%；
}
.菜单.菜单内容{
位置：绝对位置；
宽度：100%；
身高：100%；
线高：40px；
右：0px；
文本对齐：居中；
}
.菜单.菜单内容*{
不透明度：0；
}
.menu.menuContent ul li{
显示：内联块；
左边距：50像素；
右边距：50px；
颜色：#2d3235；
过渡：不透明度0.3s缓和0.3s；
光标：指针；
位置：相对位置；
}
.menu.menuContent ul li:悬停：之前{
不透明度：0.8；
顶部：13px；
左：20px；
}
.menu.menuContent ul li:悬停：之后{
不透明度：0.8；
底部：13px；
左：-20px；
}

家
关于
接触
证明
关于我们

$（'.toggle'）。打开（'click'，function（）{
$（'.menu'）.toggleClass（'active'）；
});
我认为下面的代码将对您有所帮助<代码>变换：旋转（-145deg）

子1和

变换：旋转（145deg）平移（-50%，-50%）用于儿童3



文件
身体{
字体系列：“Roboto Condensed”，无衬线；
字体大小：16px；
溢出：隐藏；
文本转换：大写；
字体大小：粗体；
}
.菜单{
高度：70像素；
宽度：70px；
左：70像素；
顶部：20px；
文本对齐：居中；
位置：绝对位置；
背景#f463c3；
溢出：隐藏；
过渡：所有0.2秒缓解；
z指数：999；
}
.menu.active{
宽度：85%；
过渡：宽度0.3s；
-webkit转换：宽度.3s；
-moz过渡：宽度为0.3s；
}
.菜单范围{
宽度：70px；
高度：70像素；
位置：绝对位置；
右：0；
光标：指针；
背景#f463c3；
z指数：1；
左：0；
}
.menu.active.menu内容*{
不透明度：1；
}
.menu.active