你如何编码响应式菜单？

Question

我正在尝试做这个响应式菜单。

cuppcomputing

在桌面版本上，当它满足 max-width:600px （平板电脑和手机尺寸）时，它将显示整个面板。它只显示标题，然后当您单击它时，它将显示菜单内部。如果您调整浏览器的大小，您可以返回桌面版和移动版。我不想使用插件。

我确实尝试了桌面版本，它可以工作。我不知道如何使它响应。当我的断点是 600px 并且我单击不同的 .menuCol h2 时，它将显示和隐藏。当我的断点大于 600 像素时（当我调整浏览器大小时），一些 .menuList 会被隐藏。

jsFiddle

function menuToggle() {
  $('#menuBtn').click(function() {
    var menuBtn = $('#menuBtn');
    var menuInner = $('.menuInner');

    if ($(menuInner).is(':hidden')) {
      $(menuBtn).text('close');
    } else {
      $(menuBtn).text('menu');
    }

    $(menuInner).fadeToggle(200);
  });
}

menuToggle();


function menuMobile() {
  $(".menuCol h2").click(function() {

    $(".menuList").slideUp();

    if (!$(this).next().is(":visible")) {
      $(this).next().slideDown();
    }
  });

}


menuMobile();

body {
  font-size: 13px;
  margin-top: 80px;
}
a {
  text-decoration: none;
  color: #434141;
}
ul {
  list-style-type: none;
  padding: 0;
}
#toggleMenu {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}
#menuBtn {
  background-color: #fa7361;
  text-transform: uppercase;
  font-size: 15px;
  color: #434141;
  padding: 2px 6px;
  margin-bottom: 24px;
  display: inline-block;
}
.menuInner {
  text-align: left;
  background-color: #cce9ec;
  padding: 5%;
  overflow: hidden;
}
.menuInner .menuCol {
  margin-bottom: 0;
  width: 22.5%;
  float: left;
}
.menuInner .menuCol h2 {
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.menuInner li {
  margin-bottom: 8px;
  margin-right: 3.3%;
}
.menuInner li:last-child {
  margin-bottom: 0;
  margin-right: 0;
}
.menuList {
  display: block;
}
.menuList a:hover {
  color: #fa7361;
  border-bottom: 1px dotted #fa7361;
}
@media (max-width: 600px) {
  .menuInner .menuCol {
    float: none;
    width: 100%;
    text-align: center;
  }
  .menuInner .menuCol h2 {
    cursor: pointer;
  }
  .menuInner .menuCol h2:hover {
    display: inline-block;
    color: #fa7361;
    border-bottom: 1px dotted #fa7361;
  }
  .menuCol:last-child h2 {
    margin-bottom: 0;
  }
  .menuList {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="toggleMenu">
  <a id="menuBtn" href="#">menu</a>
  <ul class="menuInner">
    <li class="menuCol">
      <h2>Living Room</h2>
      <ul class="menuList">
        <li><a href="#">sofas & loveseats</a>
        </li>
        <li><a href="#">chairs</a>
        </li>
        <li><a href="#">benches</a>
        </li>
        <li><a href="#">bookcases & shelving</a>
        </li>
        <li><a href="#">all living room</a>
        </li>
      </ul>
    </li>
    <li class="menuCol">
      <h2>Bedroom</h2>
      <ul class="menuList">
        <li><a href="#">beds</a>
        </li>
        <li><a href="#">mattresses</a>
        </li>
        <li><a href="#">daybeds & sleepers</a>
        </li>
        <li><a href="#">floor mirrors</a>
        </li>
        <li><a href="#">all bedroom</a>
        </li>
      </ul>
    </li>
    <li class="menuCol">
      <h2>Home Office</h2>
      <ul class="menuList">
        <li><a href="#">desks</a>
        </li>
        <li><a href="#">desk chairs</a>
        </li>
        <li><a href="#">office storage</a>
        </li>
        <li><a href="#">display ledges</a>
        </li>
        <li><a href="#">all office</a>
        </li>
      </ul>
    </li>
    <li class="menuCol">
      <h2>Dining Room</h2>
      <ul class="menuList">
        <li><a href="#">dining tables</a>
        </li>
        <li><a href="#">dining chairs</a>
        </li>
        <li><a href="#">bar & counter stools</a>
        </li>
        <li><a href="#">dining benches</a>
        </li>
        <li><a href="#">all dining</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

您需要使用媒体查询并重组 CSS 以使其适用于手机或平板电脑。研究媒体查询。

Answer 2

#toggleMenu { text-align: center; width: 1000px; margin: 0 auto; }

#menuBtn { background-color: #fa7361; text-transform: uppercase; font-size: 15px; color: #434141; padding: 2px 6px; margin-bottom: 24px; display: inline-block; }

.menuInner { text-align: left; background-color: #cce9ec; padding: 5%; overflow: hidden; }
.menuInner .menuCol { margin-bottom: 0; width: 22.5%; float: left; }
.menuInner .menuCol h2 { font-size: 15px; text-transform: uppercase; margin-bottom: 20px; }
.menuInner li { margin-bottom: 8px; margin-right: 3.3%; }
.menuInner li:last-child { margin-bottom: 0; margin-right: 0; }

.menuList { display: block; }
.menuList a:hover { color: #fa7361; border-bottom: 1px dotted #fa7361; }

@media only screen and (max-width: 800px) { #toggleMenu { width: 100%; }
  .menuInner .menuCol { float: none; width: 100%; text-align: center; }
  .menuInner .menuCol h2 { cursor: pointer; }
  .menuInner .menuCol h2:hover { display: inline-block; color: #fa7361; border-bottom: 1px dotted #fa7361; }
  .menuCol:last-child h2 { margin-bottom: 0; }
  .menuList { display: none; } }