1

我想创建一个响应式左侧菜单，就像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
4

1 回答 1

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，因此如果您没有所有必要id的 s（“layout”、“menu”、“menuLink”），javascript 将中断为出色地。

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

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

于 2014-01-04T19:12:45.990 回答