Propozycja
<div class="menu-grid-container">
<div class="menu-1"></div>
<div class="menu-2"></div>
<div class="menu-3"></div>
<div class="menu-4"></div>
</div>
<template id="menu-box">
<div class="menu-box">
<div class="box-title {{css}}">{{title}}</div>
{{list}}
</div>
</template>
<template id="menu-box-list">
<div class="box-list {{css}}">{{dish}}</div>
</template>
* {
box-sizing: border-box;
}
body {
background-color: black;
}
.menu-grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 0px 1em;
grid-template-areas:
"menu-1 menu-2 menu-3 menu-4";
width: 80vw;
margin: 0 auto;
}
.menu-1 { grid-area: menu-1; }
.menu-2 { grid-area: menu-2; }
.menu-3 { grid-area: menu-3; }
.menu-4 { grid-area: menu-4; }
.menu-box {
width: 100%;
heigth: auto;
border-radius: 0.6em;
background-color: gray;
text-align: center;
margin: 0.5em;
margin-bottom: 0.6em;
padding-bottom: 0.5em;
}
.menu-box .box-title {
width: 100%;
font: 1.2em/1.8em monospace;
border-top-left-radius: 0.6em;
border-top-right-radius: 0.6em;
margin-bottom: 0.5em;
}
.menu-box .box-list {
width: 95%;
font: 1.1em/1.5em monospace;
margin: 0 auto;
margin-bottom: 0.25em;
border-radius: 0.6em;
cursor: default;
transition: background-color 0.45s;
}
.gray {
background-color: #a0a0a0;
}
.menu-box .box-list.gray:hover {
background-color: rgba(145,145,145,0.86);
}
.red {
background-color: red;
}
.menu-box .box-list.red:hover {
background-color: rgba(230,0,0,0.86);
}
.orange {
background-color: orange;
}
.menu-box .box-list.orange:hover {
background-color: rgba(225,145,0,0.86);
}
.green {
background-color: limegreen;
}
.menu-box .box-list.green:hover {
background-color: rgba(50,185,50,0.86);
}
const menu_title = [null,'Pstrąg','Pieczeń'];
const menu_dishes = [null,'Kopytka','Frytki','Surówka'];
const menu = [
{ css:'red', column:1, title:1, list:'1,1,1' },
{ css:'red', column:1, title:1, list:'1,1,1' },
{ css:'red', column:1, title:1, list:'1,1,1' },
{ css:'red', column:1, title:1, list:'1,1,1' },
{ css:'gray', column:2, title:2, list:'1,2,1' },
{ css:'gray', column:2, title:1, list:'1,3' },
{ css:'gray', column:2, title:1, list:'1,2,3' },
{ css:'orange', column:2, title:2, list:'1,2,2' },
{ css:'red', column:3, title:1, list:'1,1' },
{ css:'red', column:3, title:1, list:'1,1' },
{ css:'green', column:3, title:1, list:'1,1,3' },
{ css:'red', column:3, title:1, list:'1,1,2,3' },
{ css:'gray', column:4, title:1, list:'1,2,1' },
{ css:'gray', column:4, title:2, list:'1,3' },
{ css:'gray', column:4, title:1, list:'1,2,3' }
];
const menu_columns = document.querySelectorAll('.menu-grid-container div[class*="menu"]');
const menu_template = document.querySelector('template#menu-box').innerHTML;
const box_list = document.querySelector('template#menu-box-list').innerHTML;
window.onload = () => {
menu.forEach(single_box => {
const css = single_box.css,
column = single_box.column,
title = menu_title[single_box.title],
list = single_box.list.split(',');
let single_box_html = menu_template.replace('{{title}}', title);
single_box_html = single_box_html.replace('{{css}}', css);
let list_html = '';
list.forEach(id_dish => {
list_html += box_list.replace('{{css}}',css).replace('{{dish}}', menu_dishes[id_dish]);
})
single_box_html = single_box_html.replace('{{list}}', list_html);
menu_columns[column - 1].innerHTML += single_box_html;
})
}