Hiding the menu

on http://purecss.io/ if you make the viewport narrow the left side menu will disappear.

it still works with js off and i didn’t find any media queries, so how do they do it?

do you know of any tutorials on how to do it?

In http://yui.yahooapis.com/pure/0.2.0/pure-min.css there are a number of @media(s)

it’s minified maybe that’s why i missed it, but i didn’t see one for that feature.

Your right minified make it extremely difficult

there is a
@media (max-width: 870px) .pure-menu-link {
position: fixed;
left: 0;
display: block;
}

which shows the menu icon

Its standard parameters are

.pure-menu-link {
display: none;
top: 0;
left: 150px;
background: #000;
background: rgba(0,0,0,0.7);
padding: 0.75em 1em;
}

There is a

#menu {
margin-left: -150px;
width: 150px;
position: fixed;
top: 0;
left: 150px;
bottom: 0;
z-index: 1000;
background: #191818;
overflow-y: auto;
-webkit-overflow-scroll: touch;
}

where

@media (max-width: 870px) #menu {
left: 0;
}

overrides the left attribute.

thanks for checking.

are you seeing this code in http://yui.yahooapis.com/pure/0.2.0/pure-min.css?

It’s in baby-blue.css.


....

@media (max-width: 870px) {

    /* Navigation Push Styles */
    #layout {
        position: relative;
        padding-left: 0;
    }
        #layout.active {
            position: relative;
            left: 150px;
        }
            #layout.active #menu {
                left: 150px;
                width: 150px;
            }

    #menu {
        left: 0;
    }

    .pure-menu-link {
        position: fixed;
        left: 0;
        display: block;
    }

    #layout.active .pure-menu-link {
        left: 150px;
    }
}

@media (max-width: 767px) {

etc..