Menu: table layout

Designing a menu to match designers UI/UX series.

by Stephane de Luca

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- (1) menu c2a -->
<div><a onclick="$('#myMenu').toggleClass('zid-open')">Réassort</a></div>
<!-- (2) the menu itself -->
<table id="myMenu" class="zid-open-close menu">
<tbody>
<tr><td><img src></td><td>L’express<br>n°220</td><td><a href="">Nouvelle commande</a></td></tr>
<tr><td><img src></td><td>L’express<br>n°221</td><td><a href="">Nouvelle commande</a></td></tr>
<tr><td><img src></td><td>L’express<br>n°222</td><td><a href="">Nouvelle commande</a></td></tr>
<tr><td><img src></td><td>L’express<br>n°223</td><td><a href="">Nouvelle commande</a></td></tr>
	</tbody>
</table>

CSS

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