CSS 用于响应式、可折叠的左侧菜单？答案

【问题标题】：CSS for responsive, collapsible left-hand menu?CSS 用于响应式、可折叠的左侧菜单？
【发布时间】：2023-04-05 00:35:01
【问题描述】：

我想创建一个响应式左侧菜单，例如 Yahoo's Pure CSS site 上的菜单。

换句话说，它在桌面上应该是这样的：

在更窄的屏幕上像这样折叠：

奇怪的是，虽然这个菜单在 Pure 网站上很显眼，但它实际上似乎并不是 Pure 框架的一部分。

我一直在努力使用 CSS 来复制它，查看 Yahoo 的源代码 - 据我所知：http://jsfiddle.net/WZt4z/

它是其中的一部分，但我不明白他们如何设置页面主体的样式，使其位于正确的位置，并摆脱了菜单上的滚动条。

这是 JSFiddle 中的 HTML：

<a href="#menu" id="menuLink" class="pure-menu-link">
  <img src="/img/navicon-png2x.png" width="20" alt="Menu toggle">
</a>
<div class="pure-u" id="menu"> <!-- contents of menu --> </div>
<div class="pure-u-1" id="main"> <!-- contents of body of page --> </div>

还有 CSS：

#menu {
    margin-top: 31px;
    margin-left: -150px; /* "#menu" width */
    width: 150px;
    position: fixed;
    top: 0;
    left: 150px;
    bottom: 0;
    z-index: 1000; /* so the menu or its navicon stays above all content */
    background: grey;
    overflow-y: auto;
    -webkit-overflow-scroll: touch;
}
.pure-menu-link {
    display: none; /* show this only on small screens */
    top: 0;
    left: 150px; /* "#menu width" */
    background: #000;
    background: rgba(0,0,0,0.7);
    padding: 0.75em 1em;
}
@media (max-width: 470px) 
   ... responsive styles

【问题讨论】：

这方面有什么更新吗？这将节省我的项目。

标签： css responsive-design yui-pure-css

【解决方案1】：

您遇到了问题，因为他们构建的侧面菜单布局有多个您不包括的类和 ID。具体来说，您需要“布局”id：

#layout {
  padding-left: 150px; /* left col width "#menu" */
  left: 0; 
}

此外，为了使菜单正常工作，您还需要为其添加 javascript：

(function (window, document) {

var layout   = document.getElementById('layout'),
    menu     = document.getElementById('menu'),
    menuLink = document.getElementById('menuLink');

function toggleClass(element, className) {
    var classes = element.className.split(/\s+/),
        length = classes.length,
        i = 0;

    for(; i < length; i++) {
      if (classes[i] === className) {
        classes.splice(i, 1);
        break;
      }
    }
    // The className is not found
    if (length === classes.length) {
        classes.push(className);
    }

    element.className = classes.join(' ');
}

menuLink.onclick = function (e) {
    var active = 'active';

    e.preventDefault();
    toggleClass(layout, active);
    toggleClass(menu, active);
    toggleClass(menuLink, active);
};

}(this, this.document));

当您点击媒体断点（屏幕变得太小）时，javascript 使用 ids 更新 css，因此如果您没有所有必要的 ids（“布局”、“菜单”、 "menuLink") javascript 也会中断。

我用必要的代码更新了你发布的小提琴（我直接从 purecss.io 的网站上提取了它）。

这是工作小提琴：http://jsfiddle.net/schmanarchy/WZt4z/3/

【讨论】：