Javascript 当我点击ul的汉堡包时，有没有一种方法可以水平移动并将标志从中间移到最左边？

我可以点击汉堡菜单，同时水平和垂直打开它吗。。？你可以在图片上看到我想要的基本上我想要一个动画，当我点击汉堡时，标志会移到最左边，所有的速度都需要相同。社交媒体也需要垂直发展

单击之前。。

点击

@导入url（'https://fonts.googleapis.com/css?family=Varela+圆形);；
html，正文{
溢出x：隐藏；
身高：100%；
}
身体{
背景图像：url（'https://www.3ctele.com/wp-content/uploads/2015/12/3c-gradient-background.png');
背景尺寸：封面；
高度：100vh；
填充：0；
保证金：0；
字体系列：“瓦雷拉圆形”，无衬线；
}
.标题{
显示：块；
保证金：0自动；
宽度：100%；
最大宽度：100%；
盒影：无；
背景色：透明；
位置：固定；
高度：60px！重要；
溢出：隐藏；
z指数：10；
}
梅因先生{
保证金：0自动；
显示：块；
身高：100%；
边缘顶部：60像素；
}
梅因内尔先生{
显示：表格；
身高：100%；
宽度：100%；
文本对齐：居中；
}
.main内分区{
显示：表格单元格；
垂直对齐：中间对齐；
字号：3em；
字体大小：粗体；
字母间距：1.25px；
}
#侧边栏菜单{
身高：100%；
位置：固定；
右：0；
宽度：250px；
边缘顶部：60像素；
转换：translateX（+250px）；
转换：转换250ms缓进缓出；
背景：透明；
}
SidebarMenuiner先生{
保证金：0；
填充：0；
边框顶部：1px实心rgba（255、255、255、0.10）；
}
SidebarMenuiner li先生{
列表样式：无；
颜色：#fff；
文本转换：大写；
字体大小：粗体；
填充：20px；
光标：指针；
边框底部：1px实心rgba（255、255、255、0.10）；
}
.SidebarMenuiner li span{
显示：块；
字体大小：14px；
颜色：rgba（255，255，255，0.50）；
}
.SidebarMenuiner li a{
颜色：#fff；
文本转换：大写；
字体大小：粗体；
光标：指针；
文字装饰：无；
}
输入[type=“checkbox”]：选中~#侧边栏菜单{
变换：translateX（0）；
}
输入[类型=复选框]{
过渡：均为0.6s；
框大小：边框框；
显示：无；
}
.SideBaricontogle{
过渡：均为0.3秒；
框大小：边框框；
光标：指针；
位置：绝对位置；
z指数：99；
身高：100%；
宽度：100%；
顶部：22px；
右：25px；
高度：22px；
宽度：22px；
}
斯宾纳先生{
过渡：均为0.3秒；
框大小：边框框；
位置：绝对位置；
高度：3倍；
宽度：100%；
背景色：#fff；
}
.水平{
过渡：均为0.3秒；
框大小：边框框；
位置：相对位置；
浮动：左；
利润上限：3倍；
}
.第1部分{
位置：相对位置；
过渡：均为0.3秒；
框大小：边框框；
浮动：左；
}
.第2部分{
过渡：均为0.3秒；
框大小：边框框；
位置：相对位置；
浮动：左；
利润上限：3倍；
}
输入[类型=复选框]：选中~.sidebaricontogle>.horizontal{
过渡：均为0.3秒；
框大小：边框框；
不透明度：0；
}
输入[类型=复选框]：选中~.sidebaricontogle>.diagonal.part-1{
过渡：均为0.3秒；
框大小：边框框；
变换：旋转（135度）；
边缘顶部：8px；
}
输入[类型=复选框]：选中~.sidebaricontogle>.diagonal.part-2{
过渡：均为0.3秒；
框大小：边框框；
变换：旋转（-135度）；
利润上限：-9px；
}
.徽标标题{
宽度：50px；
位置：绝对位置；
左：40%；
顶部：5px；
z指数：100；
}

博客关注我们的社交活动

机构
机构
机构

您可以这样做：

input[type=checkbox]:checked~.sidebarIconToggle~ a > .logo-header {
  left: 0%;
  transition: all 0.3s;
}

还增加了

转换：所有0.3s到类
。徽标标题

.logo-header {
  transition: all 0.3s;
  width: 50px;
  position: absolute;
  left: 40%;
  top: 5px;
  z-index: 100;
}

演示


@导入url（'https://fonts.googleapis.com/css?family=Varela+圆形);；
html，
身体{
溢出x：隐藏；
身高：100%；
}
身体{
背景图像：url（'https://www.3ctele.com/wp-content/uploads/2015/12/3c-gradient-background.png');
背景尺寸：封面；
高度：100vh；
填充：0；
保证金：0；
字体系列：“瓦雷拉圆形”，无衬线；
}
.标题{
显示：块；
保证金：0自动；
宽度：100%；
最大宽度：100%；
盒影：无；
背景色：透明；
位置：固定；
高度：60px！重要；
溢出：隐藏；
z指数：10；
}
梅因先生{
保证金：0自动；
显示：块；
身高：100%；
边缘顶部：60像素；
}
梅因内尔先生{
显示：表格；
身高：100%；
宽度：100%；
文本对齐：居中；
}
.main内分区{
显示：表格单元格；
垂直对齐：中间对齐；
字号：3em；
字体大小：粗体；
字母间距：1.25px；
}
#侧边栏菜单{
身高：100%；
位置：固定；
右：0；
宽度：250px；
边缘顶部：60像素；
转换：translateX（+250px）；
转换：转换250ms缓进缓出；
背景：透明；
}
SidebarMenuiner先生{
保证金：0；
填充：0；
边框顶部：1px实心rgba（255、255、255、0.10）；
}
SidebarMenuiner li先生{
列表样式：无；
颜色：#fff；
文本转换：大写；
字体大小：粗体；
填充：20px；
光标：指针；
边框底部：1px实心rgba（255、255、255、0.10）；
}
.SidebarMenuiner li span{
显示：块；
字体大小：14px；
颜色：rgba（255，255，255，0.50）；
}
.SidebarMenuiner li a{
颜色：#fff；
文本转换：大写；
字体大小：粗体；
光标：指针；
文字装饰：无；
}
输入[type=“checkbox”]：选中~#侧边栏菜单{
变换：translateX（0）；
}
输入[类型=复选框]{
过渡：均为0.6s；
框大小：边框框；