CSS Semantic: open/close

A menu that makes use of the semantic CSS zid-open-close and zid-open.

by Stephane de Luca

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- (1) c2a pour ouvrir le menu -->
<div><a onclick="$('#myMenu').addClass('zid-open')">Ouvrir le menu</a></div>
<!-- (2) le menu lui-même -->
<div id="myMenu" class="zid-open-close">
	<!-- (3) le c2a de fermeture -->
<div onclick="$('#myMenu').removeClass('zid-open')">fermer</div>
	<!-- (4) les options du menu -->
	<div>L’express n°220</div>
	<div>L’express n°221</div>
	<div>L’express n°222</div>
</div>

CSS

html {
  font-family: --apple-system, sans-serif;
}
.zid-open-close {
	display: none;
}
.zid-open {
	display: initial!important;
}