Responsive Menu Example 6: Off-Canvas Menu

Example

HTML

The first hyperlink listed below triggers the menu to move in from the side. The Close Menu link simply closes it.

<a href="#menu">Menu</a>

<aside id="menu" class="displaymenu">
    <a href="">Close Menu</a>
    <a href="">INFS 205</a>
    <a href="">INFS 310</a>
    <a href="">INFS 315</a>
    <a href="">INFS 361</a>
    <a href="">INFS 415</a>
    <a href="">INFS 420</a>
    <a href="">INFS 491</a>
</aside>      

CSS

The initial menu id moves the menu off-screen to the left (by 200%). When the menu is activated, the #menu:target will move that back onscreen using the translatex(0%). Essentially, everything else is formatting! Do notice this is not perfect -- the menu space is being reserved even when hidden. That doesn't necessarily have to happen!

Refer to this example also.

#menu {
    width: 10em;
    z-index: 200;
    background-color: transparent;
    transform: translatex(-200%);
    will-change: transform;
}


#menu:target {
    transform: translatex(0%);
    transition: transform .5s linear;
}

.displaymenu {
    display: flex;
    flex-direction: column;
    position: relative;
    top: -18pt;
}

.displaymenu a {
    text-decoration: none;
    font-size: 1.2em
    padding-bottom: .2em;
}

/* add the interactive appearance */

.displaymenu a:link {
    color: blue;
    background-color: white;
}

.displaymenu a:visited {
    color: blue;
    background-color: white;
}

.displaymenu a:focus {
    color: white;
    background-color: blue;
}

.displaymenu a:hover {
    color: white;
    background-color: blue;
}

.displaymenu a:active {
    color: white;
    background-color: blue;
}