Szép új menü

by Dörnesz Tamás

HTML

<div id="menu"></div><div class="menu ns"><ul><li><a href="/iroda" title="Iroda" class="material-icons-round">star</a></li><li><a href="/erdeklodok" title="Adatrögzítés" class="material-icons-round">support_agent</a></li><li><a href="/riport" title="Riport" class="material-icons-round">summarize</a></li><li><a href="/beosztas" title="Beosztás" class="material-icons-round">calendar_month</a></li><li><button class="material-icons-round" title="Kivonulás">shield</button><ul><li><a href="/vonulas?q=patrol" title="Kivonulás / Járőr" class="material-icons-round">minor_crash</a></li><li><a href="/vonulas?q=hq" title="Kivonulás / Vezénylő" class="material-icons-round">local_police</a></li><li><a href="/vonulas?q=archive" title="Kivonulás / Archívum" class="material-icons-round">archive</a></li><li><a href="/vonulas?q=patrolling" title="Kivonulás / Időszakos járőrözés" class="material-icons-round">watch_later</a></li></ul></li><li><button class="material-icons-round" title="Felhasználó">person</button><ul><li><a href="/php/user.php" title="Felhasználó / Kezelés" class="material-icons-round">manage_accounts</a></li><li><a href="/php/user.php?hero" title="Felhasználó / Csoport felelős" class="material-icons-round">admin_panel_settings</a></li><li><a href="/php/user.php?access" title="Felhasználó / Hozzáférés
" class="material-icons-round">accessibility_new</a></li></ul></li><li><a href="/manage" title="Ajánlat készítő" class="material-icons-round">handshake</a></li><li><a href="/item" title="Termék" class="material-icons-round">sensors</a></li><li><a href="/patrol_company" title="Bérkivonuló partnerek" class="material-icons-round">car_crash</a></li><li><a href="/terkep" title="Térkép" class="material-icons-round">map</a></li><li><button class="material-icons-round" title="Beállítások">settings</button><ul><li><a href="/php/database.php?q=prices" title="Árak" class="material-icons-round">payments</a></li><li><a href="/php/database.php?q=fields" title="Mezők"...

CSS

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialiconsround/v108/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2) format('woff2');
}
.material-icons-round {
    font-family: 'Material Icons Round';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
:root{
  --size: 30px;
  --size2: calc(var(--size) / 2);
  --size4: calc(var(--size) / 4);
  --size8: calc(var(--size) / 8);
  --size16: calc(var(--size) / 16);
}
body{
  
  background:#4db6ac;
}
#menu {
    position: fixed;
    z-index: 3;
    width: 100%;
    height: 24px;
    top: 0;
    left: 0;
    background-color: red;
}
.menu{
    position: fixed;
    top: 0;
    right: var(--size);
    z-index: 4;
    padding: 0;
    margin: 0;
 }
.menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu > ul{
    margin: 0;
    display: inline-flex;
    flex-direction: row;
 }
.menu li{
    display: inline-flex;
    flex-direction: column;
    width: var(--size);
    height: var(--size);
    position: relative;
 }
.menu li:hover{
    z-index: 2;
 }
.menu > ul > li{
    margin-right: var(--size2);
 }
.menu > ul > li::before{
    content: '';
    position: absolute;
    top: 0px;
    left: calc(-0.5 * var(--size2));
    right: calc(-0.5 * var(--size2));
    height: var(--size);
    display: inline-block;
    z-index: -1;
    transition: all 0.5s 0s ease;
    max-height: var(--size);
    background-color: red;
 }
.menu > ul > li:hover::before {
    max-height: calc(var(--size2));
    transition: all 0.5s 0s ease;
}
.menu ul > li:first-child::before{
    border-bottom-left-radius: var(--size);
}
.menu ul > li:last-child::before{
   ...