Mobil-Menü (noch mit pos absolute, überdeckt noch text)

This commit is contained in:
seli 2018-11-04 16:18:07 +01:00
parent ce24b11d7a
commit e759616791
3 changed files with 50 additions and 4 deletions

View file

@ -17,7 +17,7 @@
.topnav .wambo { /* der bereich der den content hält : brauchen wir für die flexbox*/ .topnav .wambo { /* der bereich der den content hält : brauchen wir für die flexbox*/
display: flex; display: flex;
} }
.topnav .pic-wrapper, .topnav a { .topnav .pic-wrapper, .topnav a, .topnav #hamburger-toggle {
height: 75px; height: 75px;
line-height: 75px; line-height: 75px;
} }
@ -26,10 +26,10 @@
}*/ }*/
.topnav a { .topnav a {
display: block; display: block;
padding: 0px 15px;
transition: 0.5s all ease; transition: 0.5s all ease;
padding: 0 15px;
padding-top: 12px; padding-top: 12px;
box-sizing: border-box; /*box-sizing: border-box; kommt bereits über reset.css */
} }
.topnav a:hover { .topnav a:hover {
background: lightgrey; background: lightgrey;
@ -53,10 +53,20 @@
border-right: 1px solid lightgrey; border-right: 1px solid lightgrey;
} }
.topnav #hamburger-toggle {
display: none; /* normal net sichtbar */
}
.page { .page {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
} }
@media only screen and (max-width: 1050px) {
.page {
width: 90%;
}
}
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.page { .page {
width: 100%; width: 100%;
@ -64,6 +74,7 @@
} }
h1 { h1 {
margin: 20px 0; margin: 20px 0;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
@ -199,4 +210,31 @@ th {
margin-top: 15px; margin-top: 15px;
margin-bottom: 30px; margin-bottom: 30px;
text-align: right; text-align: right;
}
/* hamburger menu stuff */
@media only screen and (max-width: 950px) {
.topnav #hamburger-toggle {
display: block; /* normal net sichtbar */
}
.topnav .wambo {
justify-content: space-between;
}
.topnav #menu {
display: none;
background-color: #ffffff;
position: absolute;
top: 77px;
right: 0;
left: 0;
}
.topnav a {
padding-top: 0;
height: 3em;
line-height: 3em;
}
.topnav #menu.active {
display: block;
}
} }

View file

@ -23,7 +23,7 @@
<div class="pic-wrapper"> <div class="pic-wrapper">
<img src="resources/world_data_logo_v1.png"> <img src="resources/world_data_logo_v1.png">
</div> </div>
<ul> <ul id="menu">
<li class="icon"> <li class="icon">
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A1 - Table</a> <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A1 - Table</a>
</li> </li>
@ -43,6 +43,7 @@
<a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A4 - Vis</a> <a><i class="fas fa-ellipsis-v"></i> <i class="fas fa-bars"></i> A4 - Vis</a>
</li> </li>
</ul> </ul>
<div id="hamburger-toggle"><i class="fas fa-bars"></i></div>
</div> </div>
</div> </div>
</nav> </nav>

View file

@ -6,6 +6,7 @@
window.onload = function() { window.onload = function() {
handleFile("resources/world_data_v1.csv"); handleFile("resources/world_data_v1.csv");
registerHamburgerToggleClickListener();
}; };
function handleFile(path) { function handleFile(path) {
@ -264,4 +265,10 @@ function div_change(strID) {
document.getElementById(strID).style.display = (document.getElementById(strID).style.display == 'none') ? 'inline-block' : 'none'; document.getElementById(strID).style.display = (document.getElementById(strID).style.display == 'none') ? 'inline-block' : 'none';
document.getElementById(strID + "_shown").style.display = (document.getElementById(strID + "_shown").style.display == 'none') ? 'inline-block' : 'none'; document.getElementById(strID + "_shown").style.display = (document.getElementById(strID + "_shown").style.display == 'none') ? 'inline-block' : 'none';
document.getElementById(strID + "_hidden").style.display = (document.getElementById(strID + "_hidden").style.display == 'none') ? 'inline-block' : 'none'; document.getElementById(strID + "_hidden").style.display = (document.getElementById(strID + "_hidden").style.display == 'none') ? 'inline-block' : 'none';
}
function registerHamburgerToggleClickListener() {
document.querySelector("#hamburger-toggle").addEventListener('click', function () {
document.querySelector("#menu").classList.toggle('active');
});
} }