div für Hamburger menü geschlossen

master_stand_10_05_23
Sebastian Greil 2023-05-16 22:14:21 +02:00
parent 7bfb42a29d
commit 008151333f
18 changed files with 171 additions and 158 deletions

View File

@ -97,10 +97,10 @@
}) })
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>

View File

@ -97,10 +97,10 @@
}) })
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>

View File

@ -115,15 +115,16 @@
</script> </script>
<!--Burger--> <!--Burger-->
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
</nav> </div>
</nav>
<footer class="fuss" > <footer class="fuss" >

View File

@ -74,15 +74,16 @@
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
</nav> </div>
</nav>
<footer class="fuss" > <footer class="fuss" >

View File

@ -70,15 +70,16 @@
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
</nav> </div>
</nav>
<footer class="fuss" > <footer class="fuss" >

View File

@ -111,15 +111,16 @@
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
</nav> </div>
</nav>
<footer class="fuss" > <footer class="fuss" >

11
es.html
View File

@ -74,15 +74,16 @@
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
</nav> </div>
</nav>
<footer class="fuss" > <footer class="fuss" >

View File

@ -63,16 +63,17 @@
}) })
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
</nav> </div>
</nav>
<footer class="fuss" > <footer class="fuss" >

View File

@ -72,15 +72,16 @@
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
</nav> </div>
</nav>
<footer class="fuss" > <footer class="fuss" >

View File

@ -56,15 +56,16 @@
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
</nav> </div>
</nav>
<footer class="fuss" > <footer class="fuss" >
<div> <div>

View File

@ -106,15 +106,16 @@
</script> </script>
<!--Burger--> <!--Burger-->
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
</nav> </div>
</nav>
<footer class="fuss" > <footer class="fuss" >

View File

@ -73,15 +73,16 @@
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
</nav> </div>
</nav>
<footer class="fuss" > <footer class="fuss" >

View File

@ -76,15 +76,16 @@
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
</nav> </div>
</nav>
<footer class="fuss" > <footer class="fuss" >

View File

@ -146,10 +146,10 @@
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>

View File

@ -92,10 +92,10 @@
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>

View File

@ -62,15 +62,16 @@
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
</nav> </div>
</nav>
<footer class="fuss" > <footer class="fuss" >

View File

@ -10,89 +10,89 @@
<script src="burgerIcon.js"></script> <script src="burgerIcon.js"></script>
</head> </head>
<body> <body>
<header> <header>
<h1 class="kopf" > <h1 class="kopf" >
<br><br> <br><br>
Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/candle.png" alt="Bild von einer Kerze" Bibliothek <a href="index.html" id="bildID"> <img id="CandleID" src="pictures/candle.png" alt="Bild von einer Kerze"
width="200" height="192"/> </a> width="200" height="192"/> </a>
<br><br> Candle <br><br> Candle
</h1> </h1>
<div> <div>
<a id="uberuns" href="uberuns.html">Über Uns</a> <a id="uberuns" href="uberuns.html">Über Uns</a>
<a id="buecher" href="buecher.html">Bücher</a> <a id="buecher" href="buecher.html">Bücher</a>
<a id="meinebuecher" href="anmelden_meinebuecher.html">Meine Bücher</a> <a id="meinebuecher" href="anmelden_meinebuecher.html">Meine Bücher</a>
<form action=""> <form action="">
<input class="suchleiste" type="search" placeholder="Suche..." > <input class="suchleiste" type="search" placeholder="Suche..." >
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button> <button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
</form> </form>
<a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a> <a id="erweitertesuche" href="erweiterteSuche.html">Erweiterte Suche</a>
<a href="anmelden_warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen" <a href="anmelden_warenkorb.html" id="warenKorbID"> <img id="shoppingCard" src="pictures/shopingcart.png" alt="Bild von einem Wagen"
width="50" height="50"/> </a> width="50" height="50"/> </a>
</div> </div>
</header> </header>
<div class="hauptcontainer" id="verlängerung"> <div class="hauptcontainer" id="verlängerung">
<h1 id="verlängerungH1">Buch verlängern</h1> <h1 id="verlängerungH1">Buch verlängern</h1>
<div id="verlängerungContent"> <div id="verlängerungContent">
<p id="möchten-sie">Möchten Sie das folgende Buch um 7 Tage verlängern?</p> <p id="möchten-sie">Möchten Sie das folgende Buch um 7 Tage verlängern?</p>
<div class="item" id="verlängerungItem"> <div class="item" id="verlängerungItem">
<img src="pictures/es.jpg" alt="Es" height="200"> <img src="pictures/es.jpg" alt="Es" height="200">
<div class="beschreibung"> <div class="beschreibung">
<h2>Es</h2> <h2>Es</h2>
<h3>von Stephen King</h3> <h3>von Stephen King</h3>
<div class="b2 green">Rückgabe am: 03.05.2023</div> <div class="b2 green">Rückgabe am: 03.05.2023</div>
</div>
</div> </div>
<div id="verlängerungButtonContainer">
<a id = "verlängerungButton1" href="verlaengerungErfolgreich.html">Bestätigen</a>
<a id = "verlängerungButton2" href="meinebuecher.html">Abbrechen</a>
</div>
</div> </div>
<div id="verlängerungButtonContainer">
<a id = "verlängerungButton1" href="verlaengerungErfolgreich.html">Bestätigen</a> </div>
<a id = "verlängerungButton2" href="meinebuecher.html">Abbrechen</a>
<!--Link JS file-->
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
<script>
var widthissue = false;
window.addEventListener("resize", function(event) {
if(window.innerWidth > 800 && widthissue) {
widthissue = false
unset()
}
else if(window.innerWidth < 800) widthissue = true;
})
</script>
<nav id="activeid" class="active">
<div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" >
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</div> </div>
</nav>
</div> <footer class="fuss" >
<div>
<a id="impressum" href="impressum.html">Impressum</a>
</div> <a id="kontakt" href="kontakt.html">Kontakt</a>
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
</div>
</footer>
<!--Link JS file-->
<!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
<script>
var widthissue = false;
window.addEventListener("resize", function(event) {
if(window.innerWidth > 800 && widthissue) {
widthissue = false
unset()
}
else if(window.innerWidth < 800) widthissue = true;
})
</script>
<nav id="activeid" class="active">
<div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" >
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</div>
</nav>
<footer class="fuss" >
<div>
<a id="impressum" href="impressum.html">Impressum</a>
<a id="kontakt" href="kontakt.html">Kontakt</a>
<a id="datenschutz" href="datenschutz.html">Datenschutz</a>
</div>
</footer>
</body> </body>
</html> </html>

View File

@ -196,15 +196,16 @@
</script> </script>
<nav id="activeid" class="active"> <nav id="activeid" class="active">
<div class="navLinks"> <div class="navLinks">
<input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";>
<label for="nav-toggle" class="icon-burger" > <label for="nav-toggle" class="icon-burger" >
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
</nav> </div>
</nav>
<footer class="fuss" > <footer class="fuss" >