Example Menu

HTML

<!-- status -->

<input id="status-menu" class="foo-fn-status-menu" type="checkbox">

<div class="foo-has-menu">

	<!-- logic -->

	<label class="foo-fn-toggle-menu foo-label-toggle-menu" for="status-menu">Menu</label>
	<label class="foo-fn-close-menu foo-label-close-menu" for="status-menu"></label>

	<!-- list -->

	<ul class="foo-fn-menu foo-list-menu">
		<li>Item</li>
	</ul>

</div>

CSS

/**
 * @tableofcontents
 *
 * 1. logic
 * 2. list
 */

/** @section 1. logic */

.foo-fn-status-menu,
.foo-fn-status-menu:not(:checked) + .foo-has-menu .foo-fn-menu,
.foo-fn-status-menu:not(:checked) + .foo-has-menu .foo-fn-close-menu
{
	display: none;
}

/** @section 2. list */

.foo-list-menu
{
}
Edit on GitHub