Main menu and save function to json file implemented.

This commit is contained in:
Mal
2020-02-02 23:00:14 +01:00
parent 9c3aca1bc9
commit d893483da9
11 changed files with 252 additions and 7 deletions

View File

@@ -1,3 +1,8 @@
@keyframes menuFadeIn {
from { width: 96px; }
to { width: 512px; }
}
body {
padding: 0;
margin: 0;
@@ -9,26 +14,82 @@ body {
border-collapse: collapse;
}
.row {
#mainbar {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 32px;
background-color: #cccccc;
box-shadow: 0 0 20px black;
}
.menu-group {
position: relative;
display: inline-block;
cursor: pointer;
padding: 5px 20px;
overflow: visible;
font-family: sans-serif;
}
.menu-group:hover {
background-color: #5555cc;
}
.menu-dropdown {
display: none;
position: absolute;
top: 16px;
left: 0;
background-color: #cccccc;
list-style: none;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
padding-left: 0;
}
.menu-dropdown > li {
padding: 5px 20px;
width: 180px;
}
.menu-dropdown > li:hover {
background-color: #5555cc;
}
.menu-group:hover > .menu-dropdown {
display: block;
}
#menu {
position: fixed;
top: 0;
display: flex;
flex-flow: wrap row;
top: 32px;
left: 0;
bottom: 0;
padding-top: 20px;
width: 96px;
background-color: grey;
overflow: hidden;
background-color: #cccccc;
box-shadow: 0 0 20px black;
}
#menu:hover {
animation-name: menuFadeIn;
animation-duration: 0.5s;
width: 512px;
}
#map {
position: fixed;
top: 0;
top: 32px;
left: 96px;
right: 0;
bottom: 0;
overflow: scroll;
background-color: black;
}
.field, .button-tile {
@@ -37,6 +98,7 @@ body {
margin: 0;
background-repeat: no-repeat;
cursor: pointer;
display: inline-flex;
}
.selection {