css - 响应式导航菜单，在纯 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;
    }
}

fiddle :https://jsfiddle.net/1fg4qkx5/

Answer 1

我已经编辑了你的 jsfiddle 并为你找到了一个相当“简单”的解决方案，

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');
  });
});

希望我的回答对你有帮助，乔瓦尼