285 lines
5.0 KiB
HTML
285 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="device=device-width, initial-scaling=1.0"/>
|
|
<title> Candle Bibliothek</title>
|
|
<link rel="icon" href="pictures/Candle.png" type="image/png">
|
|
<link rel="Stylesheet" type="text/css" href="style.css"/>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1 class="firsthead">Bibliothek <img src="pictures/Candle.png" alt="Bild von einer Kerze" class="logo"/> Candle</h1>
|
|
|
|
|
|
|
|
|
|
<nav id="activeid" class="active">
|
|
<div class="navLinks">
|
|
|
|
<form action="action_page.php">
|
|
<button type="submit" id="ButtonID" class="searchButton"><i class="fa fa-search"></i> </button>
|
|
<input type="text" class="searchTerm" placeholder="Suche...">
|
|
</form>
|
|
|
|
<a class="uberUns" href="">Über Uns</a>
|
|
<a class="buecher" href="">Bücher</a>
|
|
<a class="meineBuecher" href="">Meine Bücher</a>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<a id="erweiterteSuche" href="">Erweiterte Suche</a>
|
|
</header>
|
|
<script>
|
|
|
|
|
|
var showVisible = `
|
|
.searchTerm{
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
.searchButton{
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
.navLinks{
|
|
pointer-events: none;
|
|
opacity:0;
|
|
}
|
|
|
|
`
|
|
|
|
var showNav = `
|
|
.searchTerm{
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
position:relative;
|
|
left: 17.9em;
|
|
bottom:18em;
|
|
width: 150px;
|
|
}
|
|
.searchTerm::placeholder {
|
|
font: 16px/3 sans-serif;
|
|
}
|
|
.searchButton{
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
position:relative;
|
|
left: 10em;
|
|
}
|
|
#erweiterteSuche{
|
|
position:relative;
|
|
left: 8.5em;
|
|
bottom: 17em;
|
|
}
|
|
.uberUns{
|
|
position:relative;
|
|
left: 5.45em;
|
|
bottom: 7.4em;
|
|
width: 160px;
|
|
height: 40px;
|
|
}
|
|
.meineBuecher{
|
|
position:relative;
|
|
right: 14em;
|
|
bottom: 4.8em;
|
|
width: 160px;
|
|
height: 60px;
|
|
}
|
|
.buecher{
|
|
position:relative;
|
|
right: 4.3em;
|
|
bottom: 10em;
|
|
width: 160px;
|
|
height: 40px;
|
|
}
|
|
|
|
.navLinks{
|
|
pointer-events: auto;
|
|
opacity:1;
|
|
|
|
width:100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo{
|
|
opacity:0;
|
|
}
|
|
|
|
.searchButton{
|
|
position: relative;
|
|
bottom: 14.98em;
|
|
left: 21.2em;
|
|
float:right;
|
|
color: #ffffff;
|
|
padding: 0.8em 1em;
|
|
background: #664220;
|
|
|
|
}
|
|
|
|
`
|
|
var disableNav = `
|
|
.searchTerm{
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
.searchButton{
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
.navLinks{
|
|
pointer-events: none;
|
|
opacity:0;
|
|
}
|
|
.firsthead{
|
|
display: flex;
|
|
align-items:center;
|
|
justify-content: center;
|
|
background-color: #24140d; /*#24140d;*/
|
|
color:rgb(255, 255, 255); /*#bf6538*/
|
|
}
|
|
.logo{
|
|
opacity:1;
|
|
}
|
|
|
|
.searchTerm {
|
|
position: relative;
|
|
bottom: 15.05em;
|
|
float:right;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
padding: 0.915em 2em;
|
|
background: #664220;
|
|
border: 0;
|
|
outline: 0;
|
|
margin-right: 1px;
|
|
}
|
|
|
|
.searchButton{
|
|
position: relative;
|
|
bottom: 14.98em;
|
|
float:right;
|
|
color: #ffffff;
|
|
padding: 0.8em 1em;
|
|
background: #664220;
|
|
}
|
|
|
|
}`
|
|
navActivated = false;
|
|
function openNav() {
|
|
navActivated = !navActivated;
|
|
if(navActivated){
|
|
var styleSheet = document.createElement("style")
|
|
styleSheet.innerText = showNav
|
|
document.head.appendChild(styleSheet)
|
|
}
|
|
else{
|
|
var styleSheet = document.createElement("style")
|
|
styleSheet.innerText = disableNav
|
|
document.head.appendChild(styleSheet)
|
|
}
|
|
|
|
}
|
|
|
|
var visibleAgain = `
|
|
.searchTerm{
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
}
|
|
.searchButton{
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
}
|
|
.navLinks{
|
|
pointer-events: auto;
|
|
opacity:1;
|
|
}
|
|
.firsthead{
|
|
display: flex;
|
|
align-items:center;
|
|
justify-content: center;
|
|
background-color: #24140d; /*#24140d;*/
|
|
color:rgb(255, 255, 255); /*#bf6538*/
|
|
}
|
|
.logo{
|
|
opacity:1;
|
|
}
|
|
|
|
.searchTerm {
|
|
position: relative;
|
|
bottom: 15.05em;
|
|
float:right;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
padding: 0.915em 2em;
|
|
background: #664220;
|
|
border: 0;
|
|
outline: 0;
|
|
margin-right: 1px;
|
|
}
|
|
|
|
.searchButton{
|
|
position: relative;
|
|
bottom: 14.98em;
|
|
float:right;
|
|
color: #ffffff;
|
|
padding: 0.8em 1em;
|
|
background: #664220;
|
|
}`
|
|
|
|
|
|
function myFunction(x)
|
|
{
|
|
if (x.matches) {
|
|
var styleSheet = document.createElement("style")
|
|
styleSheet.innerText = disableNav
|
|
document.head.appendChild(styleSheet)
|
|
}
|
|
else
|
|
{
|
|
var styleSheet = document.createElement("style")
|
|
styleSheet.innerText = visibleAgain
|
|
document.head.appendChild(styleSheet)
|
|
}
|
|
|
|
}
|
|
var x = window.matchMedia("(max-width: 768px)")
|
|
myFunction(x)
|
|
x.addListener(myFunction)
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<footer id="footer">
|
|
|
|
<div id="footer-menu">
|
|
<ul>
|
|
<li><a href="">Impressum</a></li>
|
|
<li><a href="">Kontakt</a></li>
|
|
<li><a href="">Datenschutz</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</footer>
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|