Hidden menu

The menu element is a hidden element that is revealed to show a full menu. This is often used when limited screen real estate causes other navigation menus to be hidden such as when using a mobile device. 

DIV#menu
{
    display:  none;
    position: fixed;
    top:      0;
    left:     0;
    bottom:   0;

    box-sizing: border-box;
    padding:    20px;
    width:      300px;
    max-width:  300px;

    background: #3C3137;

    font-size:       14px;
    font-weight:     400;
    text-transform:  uppercase;

    overflow-y:auto;
}

DIV#menu NAV A
{
    display:         block;
    color:           #DFDFDF;
    text-decoration: none;
    line-height:     30px;
}

DIV#menu NAV A:hover
{
    color:           white;
}

DIV#menu > NAV > A:first-child
{
    padding-bottom:40px;
}

DIV#menu NAV > NAV
{
    display:block;
    margin-left:20px;
}

Next