Question

我对现代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;
}

提前谢谢

Answer 1

https://www.jqueryscript.net/menu/Responsive-Navigation-jQuery-menuBreaker.html

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

Answer 2

因此，我找到了最合适的（到目前为止）：https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/无论如何，所有建议都是值得的：）

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

2 个答案: