Menu: gluon on mobile

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 onclick="issuePickedUp(event, $(this))"><td><div></div></td><td>Les soldats du feu<br>n°220</td><td><a href=""></a></td></tr>
  <tr onclick="issuePickedUp(event, $(this))"><td><div></div></td><td>Les soldats du feu<br>n°221</td><td><a href=""></a></td></tr>
  <tr onclick="issuePickedUp(event, $(this))"><td><div></div></td><td>Les soldats du feu<br>n°222</td><td><a href=""></a></td></tr>
  <tr onclick="issuePickedUp(event, $(this))"><td><div></div></td><td>Les soldats du feu<br>n°223</td><td><a href=""></a></td></tr>
  <tr onclick="issuePickedUp(event, $(this))"><td><div></div></td><td>Les soldats du feu<br>n°224</td><td><a href=""></a></td></tr>
  <tr onclick="issuePickedUp(event, $(this))"><td><div></div></td><td>Les soldats du feu<br>n°225</td><td><a href=""></a></td></tr>
  <tr onclick="issuePickedUp(event, $(this))"><td><div></div></td><td>Les soldats du feu<br>n°226</td><td><a href=""></a></td></tr>
	</tbody>
</table>
<p>Cette version permet au menu de prendre toute la largeur de l’écran sur un mobile en mode portrait, et au maximum la moitié de la hauteur du viewport.</p>

CSS

html {
  font-family: --apple-system, sans-serif;
}
.zid-open-close {
	display: none;
}
.zid-open {
	display: block!important;
}
.menu {
	width: 450px;
  max-height: 600px;
  overflow-y: auto;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: white;
  border: solid 1px lightgray;
  box-shadow: rgba(0,0,0, 0.3) 0 10px 10px;
  position: absolute;
  z-index: 1000;
  
}
.menu>tbody>tr:nth-child(odd) {
	background-color: hsl(0,0%,96%);
}
.menu>tbody>tr {
  height: 120px;		/* hauteur de la ligne 80 + 20 + 20 = 120 px*/
}
.menu>tbody>tr>td {
  padding: 20px;		/* padding de 20 px tout autour des cellules du tableau */
}
.menu>tbody>tr>td:first-child>div {
  margin-left: 4px;	/* marge à gauche un peu plus forte, qui s'additionne au
 padding du td général */
  width: 70px;
  height: 80px;
  background-color: red;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-image: url(https://dataimportercdn.azureedge.net/importeddata/207203/2017/05/03/images/[email protected]);
}
.menu>tbody>tr>td>a {
  text-decoration : none;
}
.menu>tbody>tr>td>a:after {
  content: "Nouvelle commande";
} 
.menu>tbody>tr>td:last-child {
  text-transform: uppercase;
  text-align: center;
}
.menu>tbody>tr>td:nth-child(2) {
  width: 300px;
}
.menu>tbody>tr:hover {
  background-color: rgb(86,169, 246)!important;	
  color: white;
  cursor: pointer;
}

.menu>tbody>tr:hover>td>a:after {
  color: white;				
}

/* mobile: up to 640 pixels */
@media screen and (max-width: 640px) {
	.menu {
	  /*border: solid 2px red;*/
 
	  left:  0;
	  right: 0;
    width: auto;

    max-height: 50vh;
  }
}

JavaScript

function issuePickedUp(event, tag) {
	event.stopPropagation();
	alert("Vous avez sélectionné la publication ("+tag.find('td:nth-child(2)').html()+")");
}