Handy Version, DONE
DexterHK
parent
4b9fa1e9f0
commit
9a69f1c64d
|
|
@ -0,0 +1,111 @@
|
|||
|
||||
|
||||
function openNav() {
|
||||
var showNav = `
|
||||
#CandleID{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#uberuns{
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
#buecher{
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
#meinebuecher{
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#nav-toggle {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.suchleiste{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
#buttonID{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.suchleiste{
|
||||
position: fixed;
|
||||
right: 280px;
|
||||
top: 0px;
|
||||
}
|
||||
#buttonID{
|
||||
position: fixed;
|
||||
right: 240px;
|
||||
top: 0px;
|
||||
}
|
||||
#uberuns{
|
||||
position: fixed;
|
||||
left: 340px;
|
||||
top: 43px;
|
||||
}
|
||||
#buecher{
|
||||
position: fixed;
|
||||
left: 340px;
|
||||
top: 96px;
|
||||
}
|
||||
|
||||
#meinebuecher{
|
||||
position: fixed;
|
||||
left: 340px;
|
||||
top: 150px;
|
||||
}
|
||||
|
||||
|
||||
`;
|
||||
var closeNav = `#CandleID{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
`;
|
||||
if (document.getElementById('nav-toggle').checked) {
|
||||
var styleSheet = document.createElement("style")
|
||||
styleSheet.innerText = showNav
|
||||
document.head.appendChild(styleSheet)
|
||||
} else {
|
||||
var link = document.createElement('link');
|
||||
|
||||
// set the attributes for link element
|
||||
link.rel = 'stylesheet';
|
||||
|
||||
link.type = 'text/css';
|
||||
|
||||
link.href = 'probestyle.css';
|
||||
|
||||
// Get HTML head element to append
|
||||
// link element to it
|
||||
document.getElementsByTagName('HEAD')[0].appendChild(link);
|
||||
var styleSheet = document.createElement("style")
|
||||
styleSheet.innerText = closeNav
|
||||
document.head.appendChild(styleSheet)
|
||||
}
|
||||
}
|
||||
|
||||
function unset()
|
||||
{
|
||||
var link = document.createElement('link');
|
||||
|
||||
// set the attributes for link element
|
||||
link.rel = 'stylesheet';
|
||||
|
||||
link.type = 'text/css';
|
||||
|
||||
link.href = 'probestyle.css';
|
||||
|
||||
// Get HTML head element to append
|
||||
// link element to it
|
||||
document.getElementsByTagName('HEAD')[0].appendChild(link);
|
||||
var styleSheet = document.createElement("style")
|
||||
styleSheet.innerText = closeNav
|
||||
document.head.appendChild(styleSheet)
|
||||
}
|
||||
|
||||
|
||||
32
probe.html
32
probe.html
|
|
@ -12,7 +12,7 @@
|
|||
<header>
|
||||
<h1 class="kopf" >
|
||||
<br><br>
|
||||
Bibliothek <img src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
Bibliothek <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
|
||||
width="200" height="200"/>
|
||||
<br><br> Candle
|
||||
</h1>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<a id="uberuns" href="uberUns.html">Über Uns</a>
|
||||
<a id="buecher" href="bücher.html">Bücher</a>
|
||||
<a id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
|
||||
<form action="">
|
||||
<form action="">
|
||||
<input class="suchleiste" type="search" placeholder="Suche..." >
|
||||
<button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
||||
</form>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
</div>
|
||||
</header>
|
||||
<div class="homepage">
|
||||
<div class="homepage">
|
||||
<img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
|
||||
<p class="p1">
|
||||
<span id="titleschwarz">HERZLICH WILLKOMMEN!</span>
|
||||
|
|
@ -54,6 +54,32 @@
|
|||
|
||||
</p>
|
||||
</div>
|
||||
<!--Link JS file-->
|
||||
<script src="burgerIcon.js"></script>
|
||||
<!--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>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer class="fuss" >
|
||||
<div>
|
||||
<a id="impressum" href="impressum.html">Impressum</a>
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@ body{
|
|||
.p2{
|
||||
overflow-y: scroll;
|
||||
max-width: 87%;
|
||||
max-height: 450px;
|
||||
max-height: 100%;
|
||||
position: fixed;
|
||||
top: 220px;
|
||||
left: 20px;
|
||||
|
|
@ -343,6 +343,9 @@ body{
|
|||
height: 800px;
|
||||
width: 12%
|
||||
}
|
||||
|
||||
|
||||
/*extra Large Devices*/
|
||||
@media screen and (max-width:1200px){
|
||||
#sidecandle{
|
||||
width: 12%;
|
||||
|
|
@ -355,7 +358,7 @@ body{
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/*Large Devices*/
|
||||
@media screen and (max-width:1000px){
|
||||
#sidecandle{
|
||||
width: 14%;
|
||||
|
|
@ -367,6 +370,7 @@ body{
|
|||
max-width: 84%;
|
||||
}
|
||||
}
|
||||
/*medium Devices*/
|
||||
@media screen and (max-width:800px){
|
||||
#sidecandle{
|
||||
width: 16%;
|
||||
|
|
@ -377,7 +381,73 @@ body{
|
|||
.p2{
|
||||
max-width: 81%;
|
||||
}
|
||||
/*Burger Menu*/
|
||||
/*invisibility and deactivate buttons*/
|
||||
#uberuns{
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
#buecher{
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
#meinebuecher{
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#nav-toggle {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.suchleiste{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#buttonID{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
/*Reposition*/
|
||||
#erweitertesuche{
|
||||
position: fixed;
|
||||
right: 60px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
/*Burger Icon creation and position*/
|
||||
.icon-burger {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 2%;
|
||||
right: 1%;
|
||||
transform: translateY(-50%);
|
||||
cursor:pointer;
|
||||
}
|
||||
.icon-burger .line {
|
||||
width: 30px;
|
||||
height: 5px;
|
||||
background-color: #fff;
|
||||
margin: 5px;
|
||||
border-radius: 3px;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
nav .icon-burger {
|
||||
display: block;
|
||||
}
|
||||
/*Burger Icon rotation / Animation*/
|
||||
nav :checked ~ .icon-burger .line:nth-child(1) {
|
||||
transform: translateY(10px) rotate(225deg);
|
||||
}
|
||||
nav :checked ~ .icon-burger .line:nth-child(3) {
|
||||
transform: translateY(-10px) rotate(-225deg);
|
||||
}
|
||||
nav :checked ~ .icon-burger .line:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
}
|
||||
/*small Devices*/
|
||||
@media screen and (max-width:620px){
|
||||
|
||||
#sidecandle{
|
||||
|
|
@ -485,7 +555,10 @@ body{
|
|||
top: 640px;
|
||||
}
|
||||
|
||||
|
||||
/*Burger Menu*/
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue