Javascript 带汉堡菜单的响应式导航

我对理解javascript非常陌生，我似乎不知道如何编写汉堡包菜单来打开并在移动视图中显示我的导航。我可以在桌面上设置主导航，并在这些视图中显示我想要的手机和平板电脑的外观，但按钮不起作用。我有一些javascript在那里，我尝试过，但它没有工作。我将把所有的东西都放在一个片段中，这样也许有人可以帮助我理解这一点。谢谢大家!

$（'.toggle'）。单击（函数（）{
“严格使用”；
$（'nav ul'）。滑动切换（）；
});
$（窗口）。调整大小（函数（）{
“严格使用”；
如果（$（窗口）.width（）>780）{
$（'nav ul'）.removeAttr（'style'）；
}
});
/*启动全局*/
* {
填充：0；
保证金：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
文字装饰：无；
字体系列：arial，tahoma；
列表样式：无；
/*外形：1px纯棕色*/
}
/*结束全球*/
标题{
背景色：#333；
高度：500px；
}
/*启动导航栏*/
导航{
高度：80px；
背景色：#222；
边框底部：1px实心#555
}
.标志{
填充：10px；
宽度：自动；
浮动：左；
}
.logo img{
高度：55px；
}
.清单项目{
浮动：对；
右边距：25px；
利润上限：17像素；
}
.清单项目李{
浮动：左；
填充：13px 13px；
字号：18px；
边界半径：3px；
过渡：所有.7都易于输入输出；
}
.列表项目LIA{
颜色：#EEE；
}
.列表项li：悬停{
背景颜色：棕色；
}
/*结束导航栏*/
/*启动小屏幕导航栏*/
.图标{
显示：无；
}
.切换{
浮动：对；
利润率：20px；
颜色：#EEE；
字体大小：30px；
边框：1px实心#EEE；
填充：0px 5px；
边界半径：4px；
光标：指针；
}
/*小屏幕的末端导航条*/
/*启动媒体查询*/
@介质（最大宽度：775px）{
.图标{
显示：块；
宽度：100%；
高度：80px；
背景色：#111；
边框底部：1px实心#444；
}
.清单项目{
宽度：100%；
保证金：0；
填充：0；
位置：相对位置；
顶部：-4px；
背景色：#222；
显示：无；
}
.清单项目李{
文本对齐：居中；
显示：块；
边框底部：1px实心#333；
浮动：无；
}
.结果iframe{
边界：0；
背景：白色；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
z指数：1；
}
/*结束媒体查询*/
}

无标题文件
☰








我添加了
jQuery
，它似乎工作正常


$（'.toggle'）。单击（函数（）{
“严格使用”；
$（'nav ul'）。滑动切换（）；
});
$（窗口）。调整大小（函数（）{
“严格使用”；
如果（$（窗口）.width（）>780）{
$（'nav ul'）.removeAttr（'style'）；
}
});
/*启动全局*/
* {
填充：0；
保证金：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
文字装饰：无；
字体系列：arial，tahoma；
列表样式：无；
/*外形：1px纯棕色*/
}
/*结束全球*/
标题{
背景色：#333；
高度：500px；
}
/*启动导航栏*/
导航{
高度：80px；
背景色：#222；
边框底部：1px实心#555
}
.标志{
填充：10px；
宽度：自动；
浮动：左；
}
.logo img{
高度：55px；
}
.清单项目{
浮动：对；
右边距：25px；
利润上限：17像素；
}
.清单项目李{
浮动：左；
填充：13px 13px；
字号：18px；
边界半径：3px；
过渡：所有.7都易于输入输出；
}
.列表项目LIA{
颜色：#EEE；
}
.列表项li：悬停{
背景颜色：棕色；
}
/*结束导航栏*/
/*启动小屏幕导航栏*/
.图标{
显示：无；
}
.切换{
浮动：对；
利润率：20px；
颜色：#EEE；
字体大小：30px；
边框：1px实心#EEE；
填充：0px 5px；
边界半径：4px；
光标：指针；
}
/*小屏幕的末端导航条*/
/*启动媒体查询*/
@介质（最大宽度：775px）{
.图标{
显示：块；
宽度：100%；
高度：80px；
背景色：#111；
边框底部：1px实心#444；
}
.清单项目{
宽度：100%；
保证金：0；
填充：0；
位置：相对位置；
顶部：-4px；
背景色：#222；
显示：无；
}
.清单项目李{
文本对齐：居中；
显示：块；
边框底部：1px实心#333；
浮动：无；
}
.结果iframe{
边界：0；
背景：白色；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
z指数：1；
}
/*结束媒体查询*/
}

无标题文件
☰








您在哪里链接到jquery文件/cdn？在我的标题部分：我可以编辑代码片段，以便将其包含在内。我道歉@请记住，您需要在加载DOM后启动javascript代码。您可以将javascript放在正文的末尾，或者更好地使用$（document.ready（function（）{}）；它在手机/平板电脑上不起作用？汉堡包菜单在铬合金上看起来很好用。尝试将jQuery CDN的链接添加到body元素的最后一行，看看它是否有效…@alfredo谢谢！这帮了我的忙！我没有意识到我必须把它放在身体的末端。我真的很感谢你的帮助！