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"></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