CSS for responsive, collapsible left-hand menu? - css

Question

I'd like to create a responsive left-hand menu, like the menu on Yahoo's Pure CSS site.
In other words, it should look like this on desktop:
And collapse like this on narrower screens:
Oddly, although this menu is prominent on the Pure site, it doesn't actually seem to be part of the Pure framework.
I've been struggling with the CSS to replicate it, looking at Yahoo's source - this is as far as I've got: http://jsfiddle.net/WZt4z/
It's part-way there, but I don't understand how they have styled the body of the page so it's in the right place, and got rid of the scrollbars on the menu.
Here is the HTML in the JSFiddle:
<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>
And the 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

You're running into problems because the side menu layout they built has multiple classes and ids that you are not including. Specifically you need the "layout" id:
#layout {
padding-left: 150px; /* left col width "#menu" */
left: 0;
}
Additionally for the menu to work properly you need to include the javascript for it:
(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));
The javascript uses the ids to update the css when you hit the media breakpoint (screen gets too small) so if you don't have all the necessary ids ("layout", "menu", "menuLink") the javascript will break as well.
I updated the fiddle you posted with the necessary code (I pulled it straight from the site at purecss.io).
Here's the working fiddle: http://jsfiddle.net/schmanarchy/WZt4z/3/