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 */ /* Add a black background color to the top navigation */
.topnav { .topnav {
background: linear-gradient(to bottom, lightgrey, white); background: linear-gradient(to bottom, lightgrey, white);
overflow: hidden;
border: 1px solid lightgrey; border: 1px solid lightgrey;
overflow: hidden;
position: fixed;
left: 0;
right: 0;
top: 0;
} }
.topnav ul, .topnav li { .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 { h1 {
margin: 20px 0; margin: 20px 0;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
@ -238,7 +245,7 @@ th {
.topnav #menu { .topnav #menu {
display: none; display: none;
background-color: #ffffff; background-color: #ffffff;
position: absolute; position: fixed; /* absolute geht nicht wenn das parent fixed ist ; muss auch fixed sein */
top: 77px; top: 77px;
right: 0; right: 0;
left: 0; left: 0;

4
index.html
View file

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

6
js/table.js
View file

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