Javascript jQuery中的汉堡包菜单

我刚开始使用jQuery，并尝试制作汉堡包菜单。菜单是否可以只在右上角有一个小正方形，在左上角有一个徽标

现在，菜单中的黑色条像导航条一样填充

$（“.cross”）.hide（）；
$（“.menu”）.hide（）；
$（“.hamburger”）。单击（函数（）{
$（“.menu”）.slideToggle（“慢”，函数（）{
$（“.hamburger”）.hide（）；
$（“.cross”）.show（）；
});
});
$（“.cross”）。单击（函数（）{
$（“.menu”）.slideToggle（“慢”，函数（）{
$（“.cross”）.hide（）；
$（“.hamburger”）.show（）；
});
});
正文{
字体系列：“无衬线”，无衬线；
保证金：0；
宽度：100%；
高度：100vh；
}
标题{
宽度：100%；
背景：#1d1f20；
高度：60px；
线高：60px；
}
.汉堡包{
背景：无；
位置：绝对位置；
排名：0；
右：0；
线高：45px；
填充：5px15px 0px 15px；
颜色：#fff；
边界：0；
字号：1.4em；
字体大小：粗体；
光标：指针；
大纲：无；
z指数：1000000000000；
}
.十字架{
背景：无；
位置：绝对位置；
顶部：0px；
右：0；
填充：13px 15px 0px 15px；
颜色：#fff；
边界：0；
字号：3em；
线高：65px；
字体大小：粗体；
光标：指针；
大纲：无；
z指数：1000000000000；
}
.菜单{
z指数：1000000；
字体大小：粗体；
字号：0.8em；
宽度：100%；
背景#131313；
位置：绝对位置；
文本对齐：居中；
}
.菜单ul{
保证金：0；
填充：0；
列表样式类型：无；
列表样式图像：无；
}
李先生{
显示：块；
填充：15px 0 15px 0；
边框底部：#1d1f20 1px实心；
}
.菜单李：悬停{
显示：块；
背景：#181818；
填充：15px 0 15px 0；
边框底部：#1d1f20 1px实心；
}
.菜单ul li a{
文字装饰：无；
边际：0px；
颜色：#fff；
}
.菜单ul li a：悬停{
颜色：#fff；
文字装饰：无；
}
.菜单a{
文字装饰：无；
颜色：白色；
}
.菜单a：悬停{
文字装饰：无；
颜色：白色；
}
.Glypicon主页{
颜色：白色；
字号：1.5em；
边缘顶部：5px；
保证金：0自动；
}

☰
˟




试试这个。使用Jquery


$（“.hamburger”）。单击（函数（）{
$（this.hide（）；
$（'.cross'）.show（）；
$（“.menu”）.slideToggle（）；
});
$（“.cross”）。单击（函数（）{
$（this.hide（）；
$（'.hamburger'）.show（）；
$（“.menu”）.slideToggle（）；
});
正文{
字体系列：“无衬线”，无衬线；
保证金：0；
宽度：100%；
高度：100vh；
}
标题{
宽度：100%；
背景：#1d1f20；
高度：60px；
线高：60px；
}
.汉堡包{
背景：无；
位置：绝对位置；
排名：0；
右：0；
线高：45px；
填充：5px15px 0px 15px；
颜色：#fff；
边界：0；
字号：1.4em；
字体大小：粗体；
光标：指针；
大纲：无；
z指数：1000000000000；
}
.十字架{
背景：无；
位置：绝对位置；
顶部：0px；
右：0；
填充：13px 15px 0px 15px；
颜色：#fff；
边界：0；
字号：3em；
线高：65px；
字体大小：粗体；
光标：指针；
大纲：无；
z指数：1000000000000；
显示：无；
}
.菜单{z-index:1000000；字体大小：粗体；字体大小：0.8em；宽度：100%；背景：#131313；位置：绝对；文本对齐：居中；显示：无；}
.menu ul{margin:0；padding:0；列表样式类型：无；列表样式图像：无；}
.menu li{显示：块；填充：15px 0 15px 0；边框底部：#1d1f20 1px实心；}
.menu li:悬停{显示：块；背景：#181818；填充：15px 0 15px 0；边框底部：#1d1f20 1px实心；}
.menu ul li a{文本装饰：无；边距：0px；颜色：#fff；}
.menu ul li a:悬停{颜色：#fff；文本装饰：无；}
.menu a{文本装饰：无；颜色：白色；}
.menu a:悬停{文本装饰：无；颜色：白色；}
.Glypicon主页{
颜色：白色；
字号：1.5em；
边缘顶部：5px；
保证金：0自动；
}
.主动{
显示：块；
过渡：均为0.3s；
}

☰
˟




您的代码应该看起来像这样。
此外，还应添加一些if/else

您可以在此处阅读更多信息：

只需在本地项目中尝试此代码


正文{
字体系列：“无衬线”，无衬线；
保证金：0；
宽度：100%；
高度：100vh；
}
标题{
宽度：100%；
背景：#1d1f20；
高度：60px；
线高：60px；
}
.汉堡包{
背景：无；
位置：绝对位置；
排名：0；
右：0；
线高：45px；
填充：5px15px 0px 15px；
颜色：#fff；
边界：0；
字号：1.4em；
字体大小：粗体；
光标：指针；
大纲：无；
z指数：1000000000000；
}
.十字架{
背景：无；
位置：绝对位置；
顶部：0px；
右：0；
填充：13px 15px 0px 15px；
颜色：#fff；
边界：0；
字号：3em；
线高：65px；
显示：无
字体大小：粗体；
光标：指针；
大纲：无；
z指数：1000000000000；
}
.菜单{z-index:1000000；字体重量：粗体；字体大小：0.8em；宽度：100%；背景：#131313；位置：绝对；文本对齐：中心；}
.menu ul{margin:0；padding:0；列表样式类型：无；列表样式图像：无；}
.menu li{显示：块；填充：15px 0 15px 0；边框底部：#1d1f20 1px实心；}
.menu li:悬停{显示：块；背景：#181818；填充：15px 0 15px 0；边框底部：#1d1f20 1px实心；}
.menu ul li a{文本装饰：无；边距：0px；颜色：#fff；}
.menu ul li a:悬停{颜色：#fff；文本装饰：无；}
.menu a{文本装饰：无；颜色：白色；}
.menu a:悬停{文本装饰：无；颜色：白色；}
.Glypicon主页{
颜色：白色；
字号：1.5em；
边缘顶部：5px；
保证金：0自动；
}
.菜单{
高度：0px；
溢出：隐藏；
过渡期3秒；
}
.OpenMenu.菜单{
高度：自动；
}
.OpenMenu.cross{
显示：块；
}
.汉堡{
显示：无；
}

☰
˟