Question

我想创建一个自适应的左手菜单，就像Yahoo's Pure CSS site上的菜单一样。

换句话说，它应该在桌面上看起来像这样：

Desktop menu

在更窄的屏幕上像这样崩溃： enter image description here

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

我一直在努力用CSS来复制它，看看雅虎的来源 - 这就是我所拥有的：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

Answer 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使用id来更新css（屏幕变得太小），所以如果你没有所有必要的id s（“布局”， “menu”，“menuLink”）javascript也会破解。

我使用必要的代码更新了您发布的小提琴（我在purecss.io网站上直接将其拉出来）。

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

用于响应式，可折叠左手菜单的CSS？

1 个答案: