CSS-Based Expanding Menu

Simple example of building a menu that expands over content when clicked while in its small state using HTML and CSS with no Javascript.

by Travis Almand

HTML

<label id='menu'>
    <input type='checkbox' />
    <div id='menu_box'>
        <div id='menu_open'>&#926;</div>
        <div id='menu_close'>&times;</div>
        <div id='menu_links'>
            <a href='http://www.google.com' target='_blank'>Link 1</a>
            <a href='#'>Link 2</a>
            <a href='#'>Link 3</a>
            <a href='#'>Link 4</a>
            <a href='#'>Link 5</a>
            <a href='#'>Link 6</a>
            <a href='#'>Link 7</a>
        </div>
    </div>
</label>

<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor ligula at mauris euismod tristique. Duis rhoncus consectetur pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam ac lacus quis velit blandit malesuada a vel turpis. Pellentesque non tempus sem. Integer gravida libero et lacus suscipit placerat. Integer laoreet vehicula ligula, et venenatis orci semper ut. Aliquam ullamcorper, dui at euismod placerat, massa est gravida magna, vel laoreet est arcu nec tortor. Cras rutrum, ligula vel volutpat pharetra, odio augue pulvinar nisi, eget auctor leo velit a diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lobortis at urna et iaculis. Etiam vehicula interdum risus, a dictum tortor euismod ut. Donec vitae dictum massa.</p>

CSS

h2 { margin-top: 40px; }
input { display: none; }

#menu {
    cursor: pointer;
    display: block;
    left: 0;
    position: absolute;
    top: 0;
}
#menu_box {
    background-color: white;
    border: 4px solid black;
    height: 20px;
    overflow: hidden;
    transition: all 0.5s;
    width: 20px;
}
#menu_open {
    display: block;
    font-size: 20px;
    height: 20px;
    left: 4px;
    line-height: 20px;
    opacity: 1;
    position: absolute;
    text-align: center;
    top: 6px;
    transition: opacity 1s;
    width: 20px;
}
#menu_close {
    background-color: black;
    border-radius: 10px;
    color: white;
    display: none;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    opacity: 0;
    position: absolute;
    right: 10px;
    text-align: center;
    top: 10px;
    width: 20px;
}
#menu_links {
    display: none;
    opacity: 0;
}
#menu_links a {
    color: black;
    display: block;
    padding: 10px 20px;
}
#menu_links a:hover {
    background-color: gainsboro;
}

input:checked + #menu_box {
    height: 400px;
    width: 400px;
}
input:checked + #menu_box #menu_open {
    display: none;
    opacity: 0;
}
input:checked + #menu_box #menu_close {
    display:block;
    opacity: 1;
}
input:checked + #menu_box #menu_links {
    display: block;
    opacity: 1;
}