Uni/WME
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Mobil Menü geht wieder (nun fixed/sticky header)

Browse source
This commit is contained in:
seli 2018-11-04 16:56:51 +01:00
parent c8cf05db40
commit 083736b8ca
3 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
css/main.css
View file

@ -6,8 +6,12 @@ a:hover {
/* Add a black background color to the top navigation */
.topnav {
background: linear-gradient(to bottom, lightgrey, white);
overflow: hidden;
border: 1px solid lightgrey;
overflow: hidden;
position: fixed;
left: 0;
right: 0;
top: 0;
}
.topnav ul, .topnav li {
@ -83,6 +87,9 @@ a:hover {
#section {
margin-top: 85px; /* wie die header hoch ist; notwendig da header position fixed hat; 75px + 10px extra */
}
h1 {
margin: 20px 0;
font-family: 'Roboto', sans-serif;
@ -238,7 +245,7 @@ th {
.topnav #menu {
display: none;
background-color: #ffffff;
position: absolute;
position: fixed; /* absolute geht nicht wenn das parent fixed ist ; muss auch fixed sein */
top: 77px;
right: 0;
left: 0;

4
index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="ca">
<html lang="de">
<head>
<meta charset="utf-8" />
@ -17,7 +17,7 @@
</head>
<body>
<header class="topnav">
<header class="topnav" id="header">
<div class="page">
<nav class="wambo">
<div class="pic-wrapper">

6
js/table.js
View file

@ -269,6 +269,7 @@ function div_change(strID) {
function registerHamburgerToggleClickListener() {
let menu = document.querySelector("#menu");
let header = document.querySelector("#header");
let section = document.querySelector("#section");
document.querySelector("#hamburger-toggle").addEventListener('click', function () {
if (menu.classList.contains('active')) {
@ -278,8 +279,9 @@ function registerHamburgerToggleClickListener() {
} else {
// menu einblenden
document.querySelector("#menu").classList.add('active');
let height = menu.clientHeight;
section.style.marginTop = height + 10 + 'px'; // + 10 für zusätzlichen abstand (klebt sonst aneinander)
let height1 = header.clientHeight;
let height2 = menu.clientHeight;
section.style.marginTop = height1 + height2 + 10 + 'px'; // + 10 für zusätzlichen abstand (klebt sonst aneinander)
}