CSS：如何将导航转换为移动设备的汉堡包菜单

我对现代CSS比较陌生，所以如果我想将多级导航菜单转换为移动设备的汉堡包菜单（最好不涉及JS），我想问你关于如何进行的任何建议。 到目前为止，我在桌面和平板电脑屏幕上看到的东西看起来不错，但对于移动屏幕，我希望有一个汉堡包菜单（在屏幕的左侧或右侧），在这里可以看到原始菜单中的所有项目

桌面和平板电脑屏幕的CSS代码：

    #primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0;
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#ddd;
}

#primary_nav_wrap ul li:hover
{
    background:#f6f6f6;
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0;
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px;
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px;
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%;
}

#primary_nav_wrap ul li:hover > ul
{
    display:block;
}

提前谢谢你

---

您可以随时使用这个JQ插件来有效地解决您的问题，而且您不必大量更改html结构

，因此我找到了最适合您的插件（到目前为止）：无论如何，非常感谢所有建议：）

您需要使用媒体查询来检测小宽度，然后应用不同的样式来创建所需的内容。是的，我已经对各种显示器进行了媒体查询，但是我被困在如何将该菜单转换为仅适用于手机的汉堡包菜单上..需要使用媒体查询来检测屏幕大小是否低于768px（

@Media screen and（max width:767px）{//your code/}

）。然后你必须使用JavaScript/jQuery，当用户点击汉堡时，移动导航才会出现。理想情况下，你需要向我们提供完整的代码，通过这种方式，我们将能够在JS方面为您提供更多帮助，这些JS需要包含在您的问题中才能修复。@Matt.Hamer5-因此它暂时位于此处：CSS文件位于“@Vabhav Chauhan-谢谢你的建议，但如果可能的话，我想避免使用JS或JQery。如果你只使用css，复选框方法是一个很好的方法。以这个为参考。。在当前反应式框架时代使用js也不会使应用程序看起来更慢