响应导航菜单，隐藏在纯CSS的小屏幕上

我想创建一个具有特殊功能的简单导航菜单：

• 在桌面浏览器上，它显示为类似“item1 | item2 | item3”的条形图
• 在移动浏览器上，它显示一个按钮。当点击它时，它会将菜单显示为堆栈

我正在搜索一个没有Javascript的解决方案。我知道CSS中的媒体查询，但我不知道如何添加符合此要求的菜单

这是菜单，例如：

CSS:

/*所有浏览器的默认设置*/
导航>ul{
填充：0；
保证金：0；
列表样式：无；
背景色：#3d3D；
}
导航>ul>li>a{
显示：块；
颜色：#ffffff；
}
@仅介质屏幕和（最大宽度：360px）{
/*流动的*/
/*现在怎么办*/
}
@仅介质屏幕和（最小宽度：361px）{
导航>ul>li{
/*酒吧布局*/
显示：内联块；
}
}

---

fiddle:

我编辑了您的JSFIDLE，为您找到了一个相当“简单”的解决方案

我还没有找到一种完全不用javascript捕捉按钮点击的方法

要在此处发布结果，请执行以下操作：

---

HTML Javascript/jQuery 我希望我的回答对你有帮助，

---

Giovanni

我认为，要想在任何移动浏览器上使用一个好的、可移植的解决方案，您至少需要一点脚本来切换类以显示菜单。我以前在纯CSS中尝试过这个，但在某些浏览器上会出现问题。你必须为你的手机创建另一个类似下拉菜单的菜单。然后为其中一个设置“隐藏”，为另一个设置“可见”。这是更简单的方法。我知道如何用纯css制作下拉菜单-

<nav>
    <button class='hide-lg right'>
        &#9776;
    </button>
<ul>
    <li><a href="item1.html">item1</a></li>
    <li><a href="item2.html">item2</a></li>
    <li><a href="item3.html">item3</a></li>
    <li><a href="item4.html">item4</a></li>
</ul>

/* default for all browsers */
*{
  margin: 0;
  padding: 0;
}
body{
  min-width: 100%;
  min-height: 100%;
}

button{
  border:1px solid gray;
  background-color: transparent;
  display: inline-block;
}

.show{
  display: inline-block;
}
.right{
  float:right;
}
nav{
  background-color: #3d3d3d !important;
  color: #ffffff;
  height:auto;
  width: 100%;
  display: block;
}
nav>ul {
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #3d3d3d;
}
nav>ul>li>a {
  display: block;
  color: #ffffff;
}

@media only screen and (max-width: 360px) {
  .hide-lg{
    display:inline-block;
  }
  ul{
    display: none;
  }
  /* mobile */
  /* WHAT NOW? */
}

@media only screen and (min-width: 361px) {
  .hide-lg{
    display: none !important;
  }
  nav>ul{
    display: block;
  }
  nav>ul>li {
    /* bar layout */
    display: inline-block;
  }
  nav>ul>li>a{
    display: block;
    width:100%;
    height: 100%;
  }
}

$(document).ready(function(){
  $('button').click(function(){
      $('ul').toggleClass('show');
  });
});