emily/video2document
1
0
Fork 0
mirror of https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git synced 2026-06-15 18:01:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Prototype hamburger menu for language and help buttons

Browse Source
This commit is contained in:
Verena Schulz
2025-12-10 16:59:14 +01:00
parent 6eef82bb64
commit b26ef96cfc
2 changed files with 133 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
electron/main/index.html
+16
View File
@@ -9,6 +9,22 @@
<body>
<div id="h1-wrapper">
<section class="p-menu1">
<nav id="navbar" class="navigation" role="navigation">
<input id="toggle1" type="checkbox" />
<label class="hamburger1" for="toggle1">
<div class="top"></div>
<div class="meat"></div>
<div class="bottom"></div>
</label>
<nav class="menu1">
<li class="li1">Help</li>
<li class="li1">Language</li>
</nav>
</nav>
</section>
<h1 id="h1">Video to document</h1>
</div>
electron/main/style.css
+117 -4
View File
@@ -10,17 +10,27 @@ body {
margin: 0;
}
#h1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
z-index: 20;
}
#h1-wrapper {
position: relative;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
padding-bottom: 25px;
width: 770px;
height: 50px;
height: 60px;
background-color: #FFF;
box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
border-radius: 5px;
justify-content: center;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.upload-container {
@@ -299,4 +309,107 @@ gap: 5px;
border: 1px solid black;
margin: 5px;
border-radius: 100px;
}
li {
color: #FFF;
}
.p-menu1 {
margin-left: 20px;
z-index: 10;
}
.hamburger1 {
height: 45px;
margin: 0;
padding-top: 8px;
display: grid;
grid-template-rows: repeat(3, 1fr);
justify-items: center;
z-index: 120;
}
.hamburger1 div {
background-color: rgb(61, 61, 61);
position: relative;
width: 40px;
height: 5px;
margin-top: 0;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#toggle1 {
display: none;
}
#toggle1:checked + .hamburger1 .top {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-top: 22.5px;
}
#toggle1:checked + .hamburger1 .meat {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -5px;
}
#toggle1:checked + .hamburger1 .bottom {
-webkit-transform: scale(0);
transform: scale(0);
}
#toggle1:checked ~ .menu1 {
height: 150px;
width: 300px;
}
/* Menu */
.menu1 {
position: absolute;
top: 55px;
left: 20px;
width: 240px;
border-radius: 5px;
background-color: #1C3B69;
margin: 0;
display: -ms-grid;
display: grid;
grid-template-rows: 1fr repeat(4, 0.5fr);
grid-row-gap: 25px;
padding: 0;
list-style: none;
clear: both;
width: auto;
text-align: center;
height: 0px;
overflow: hidden;
transition: height 0.3s ease, width 0.3s ease;
z-index: 9999;
-webkit-transition: all 0.3s ease;
}
.menu1 li:first-child {
margin-top: 30px;
}
.menu1 li:last-child {
margin-bottom: 30px;
}
.li1 {
width: 100%;
margin: 0;
padding: 10px 0;
font: 700 20px 'Oswald', sans-serif;
}
.li1:hover {
background-color: #FFF;
color: rgb(61, 61, 61);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}