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

Question

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

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

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

这是菜单，例如：

<nav>
    <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>
</nav>

CSS：

/* default for all browsers */
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) {
    /* mobile */
    /* WHAT NOW? */
}

@media only screen and (min-width: 361px) {
    nav>ul>li {
        /* bar layout */
        display: inline-block;
    }
}

小提琴：https://jsfiddle.net/1fg4qkx5/

Answer 1

我已经编辑了你的jsfiddle并找到了一个相当简单的＆＃34;解决方案，

jsfiddle

我还没有找到一种完全做到这一点的方法，如果没有javascript来抓住按钮点击。

在此处发布结果：

HTML

<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>

CSS

/* 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%;
  }
}

使用Javascript / jQuery的

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

我希望你能找到我的答案， 乔瓦尼