500 lines
14 KiB
Svelte
500 lines
14 KiB
Svelte
<script lang="ts">
|
||
let innerWidth: number;
|
||
|
||
function dropdown() {
|
||
if (innerWidth < 1024) {
|
||
const check_element = this.lastChild;
|
||
|
||
const rotate_list = document.querySelectorAll(".dd-symbol-clone");
|
||
const rotate_element = this.childNodes[0].children[0];
|
||
|
||
var first_check = check_element.classList.contains(
|
||
"show-dropdown-content"
|
||
);
|
||
const nodeList = document.querySelectorAll(".dropdown-content");
|
||
|
||
if (first_check == true) {
|
||
check_element.classList.remove("show-dropdown-content");
|
||
rotate_element.classList.toggle("rotate-symbol");
|
||
} else {
|
||
for (let i = 0; i < nodeList.length; i++) {
|
||
const element = nodeList[i];
|
||
element.classList.remove("show-dropdown-content");
|
||
}
|
||
for (let i = 0; i < rotate_list.length; i++) {
|
||
const element = rotate_list[i];
|
||
element.classList.remove("rotate-symbol");
|
||
}
|
||
|
||
check_element.classList.add("show-dropdown-content");
|
||
rotate_element.classList.add("rotate-symbol");
|
||
}
|
||
}
|
||
}
|
||
|
||
function hover() {
|
||
if (innerWidth > 1024) {
|
||
const check_element = this.firstChild.lastChild;
|
||
check_element.style.visibility = "visible";
|
||
}
|
||
}
|
||
|
||
function hoverout() {
|
||
if (innerWidth > 1024) {
|
||
const check_element = this.firstChild.lastChild;
|
||
check_element.style.visibility = "hidden";
|
||
}
|
||
}
|
||
|
||
function hamburger() {
|
||
const nodeList = document.querySelectorAll(".dropdown-content");
|
||
for (let i = 0; i < nodeList.length; i++) {
|
||
nodeList[i].classList.remove("show-dropdown-content");
|
||
}
|
||
var element = document.getElementById("cardNavigation");
|
||
element.classList.toggle("hidden");
|
||
|
||
const spans = this.children;
|
||
var first_check = spans[0].classList.contains("hamburger-swing-0");
|
||
|
||
if (first_check == true) {
|
||
for (let i = 0; i < spans.length; i++) {
|
||
spans[i].classList.remove("hamburger-swing-" + i);
|
||
}
|
||
const rotate_list = document.querySelectorAll(".dd-symbol");
|
||
for (let i = 0; i < rotate_list.length; i++) {
|
||
rotate_list[i].classList.remove("rotate-symbol");
|
||
}
|
||
const rotate_list1 = document.querySelectorAll(".dd-symbol-clone");
|
||
for (let i = 0; i < rotate_list1.length; i++) {
|
||
rotate_list1[i].classList.remove("rotate-symbol");
|
||
}
|
||
} else {
|
||
for (let i = 0; i < spans.length; i++) {
|
||
spans[i].classList.add("hamburger-swing-" + i);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<svelte:window bind:innerWidth />
|
||
|
||
<div class="hamburger_menu py-1 px-2 bg-secondary xs:px-4 lg:hidden">
|
||
|
||
<div id="hamburger" class="cursor-pointer grid grid-cols-2 items-center">
|
||
|
||
<div class="burger justify-self-start"
|
||
on:click={hamburger}
|
||
on:keydown={hamburger}>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
|
||
<div class="justify-self-end">
|
||
<a href="/">
|
||
<img id="header-logo" class="w-8 m-1" src="/images/header/logo-IBC-white.svg" alt="IBCornelsen-Logo"/>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<nav
|
||
id="cardNavigation"
|
||
class="cardNavigation box hidden relative ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block mb-0 lg:mb-5"
|
||
>
|
||
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
|
||
Jetzt bestellen
|
||
</div>
|
||
|
||
<div class="nav-element">
|
||
<a class="no-dropdown nav-element-child" href="/welcher-energieausweis/"
|
||
>Welcher Energieausweis?</a
|
||
>
|
||
</div>
|
||
|
||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||
<div
|
||
class="nav-element dropdown lg:dropdown-right"
|
||
on:click={dropdown}
|
||
on:keydown={dropdown}
|
||
on:mouseover={hover}
|
||
on:mouseleave={hoverout}
|
||
>
|
||
{#if innerWidth > 1023}
|
||
<a href=/energieausweis-erstellen/ class="nav-element-child"
|
||
>Energieausweis erstellen<span class="dd-symbol-clone">❯</span
|
||
><span class="dd-symbol">❯</span></a
|
||
>
|
||
{:else}
|
||
<a href={undefined} class="nav-element-child"
|
||
>Energieausweis erstellen<span class="dd-symbol-clone">❯</span
|
||
><span class="dd-symbol">❯</span></a
|
||
>
|
||
{/if}
|
||
|
||
<ul class="dropdown-content energieasusweis-erstellen">
|
||
{#if innerWidth < 1023}
|
||
<li>
|
||
<a href="/energieausweis-erstellen/"
|
||
>Energieausweis erstellen</a
|
||
>
|
||
</li>
|
||
{/if}
|
||
<li>
|
||
<a
|
||
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
|
||
>Verbrauchsausweis erstellen</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
|
||
>Bedarfsausweis erstellen</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
|
||
>Verbrauchsausweis Gewerbe erstellen</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||
<div
|
||
class="nav-element dropdown lg:dropdown-right"
|
||
on:click={dropdown}
|
||
on:keydown={dropdown}
|
||
on:mouseover={hover}
|
||
on:mouseleave={hoverout}
|
||
>
|
||
{#if innerWidth > 1023}
|
||
<a href={undefined} class="nav-element-child"
|
||
>Angebot anfragen<span class="dd-symbol-clone">❯</span><span
|
||
class="dd-symbol">❯</span
|
||
></a
|
||
>
|
||
{:else}
|
||
<a href={undefined} class="nav-element-child"
|
||
>Angebot anfragen<span class="dd-symbol-clone">❯</span><span
|
||
class="dd-symbol">❯</span
|
||
></a
|
||
>
|
||
{/if}
|
||
|
||
<ul class="dropdown-content angebot-anfragen">
|
||
<!-- {#if innerWidth < 1023}
|
||
<li>
|
||
<a href="/energieausweis-erstellen">Angebot anfragen</a>
|
||
</li>
|
||
{/if}-->
|
||
<li>
|
||
<a
|
||
href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen"
|
||
>Bedarfsausweis Gewerbe anfragen</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a href="/angebot-anfragen/geg-nachweis-wohnen-anfragen"
|
||
>GEG Nachweis Wohnen anfragen</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a href="/angebot-anfragen/geg-nachweis-gewerbe-anfragen"
|
||
>GEG Nachweis Gewerbe anfragen</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
|
||
Produkte & Preise
|
||
</div>
|
||
|
||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||
<div
|
||
class="nav-element dropdown lg:dropdown-right"
|
||
on:click={dropdown}
|
||
on:keydown={dropdown}
|
||
on:mouseover={hover}
|
||
on:mouseleave={hoverout}
|
||
>
|
||
|
||
{#if innerWidth > 1023}
|
||
<a href="/verbrauchsausweis/" class="nav-element-child"
|
||
>Verbrauchsausweis<span class="dd-symbol-clone">❯</span>
|
||
<span class="dd-symbol">❯</span></a>
|
||
{:else}
|
||
<a href={undefined} class="nav-element-child"
|
||
>Verbrauchsausweis<span class="dd-symbol-clone">❯</span>
|
||
<span class="dd-symbol">❯</span></a>
|
||
{/if}
|
||
|
||
<ul class="dropdown-content verbrauchsausweis">
|
||
{#if innerWidth < 1023}
|
||
<li><a href="/verbrauchsausweis/">Verbrauchsausweis</a></li>
|
||
{/if}
|
||
<li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/produkt-uebersicht">Produktübersicht Verbrauchsausweis Wohnen</a></li>
|
||
<li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis online erstellen</a></li>
|
||
<li><a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/produkt-uebersicht">Produktübersicht Verbrauchsausweis Gewerbe</a></li>
|
||
<li><a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe online erstellen</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||
<div
|
||
class="nav-element dropdown lg:dropdown-right"
|
||
on:click={dropdown}
|
||
on:keydown={dropdown}
|
||
on:mouseover={hover}
|
||
on:mouseleave={hoverout}
|
||
>
|
||
|
||
{#if innerWidth > 1023}
|
||
<a href="/bedarfsausweis/" class="nav-element-child"
|
||
>Bedarfsausweis<span class="dd-symbol-clone">❯</span>
|
||
<span class="dd-symbol">❯</span></a>
|
||
{:else}
|
||
<a href={undefined} class="nav-element-child"
|
||
>Bedarfsausweis<span class="dd-symbol-clone">❯</span>
|
||
<span class="dd-symbol">❯</span></a>
|
||
{/if}
|
||
|
||
<ul class="dropdown-content bedarfsausweis">
|
||
{#if innerWidth < 1023}
|
||
<li><a href="/bedarfsausweis/">Bedarfsausweis</a></li>
|
||
{/if}
|
||
<li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/produkt-uebersicht">Produktübersicht Bedarfsausweis Wohnen</a></li>
|
||
<li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Bedarfsausweis online erstellen</a></li>
|
||
<li><a href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/produkt-uebersicht">Produktübersicht Bedarfsausweis Gewerbe</a></li>
|
||
<li><a href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen">Bedarfsausweis Gewerbe anfragen</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-element">
|
||
<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan"
|
||
>Sanierungsfahrplan (iSFP)</a
|
||
>
|
||
</div>
|
||
|
||
<!-- <div class="nav-element">
|
||
<a
|
||
class="no-dropdown nav-element-child"
|
||
href="/energieausweis-aussteller">Energieberater finden</a
|
||
>
|
||
</div> -->
|
||
|
||
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
|
||
FAQ & Hilfe
|
||
</div>
|
||
|
||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||
<div
|
||
class="nav-element dropdown lg:dropdown-right"
|
||
on:click={dropdown}
|
||
on:keydown={dropdown}
|
||
on:mouseover={hover}
|
||
on:mouseleave={hoverout}
|
||
>
|
||
<a href={undefined} class="nav-element-child"
|
||
>Energieausweis<span class="dd-symbol-clone">❯</span><span
|
||
class="dd-symbol">❯</span
|
||
></a
|
||
>
|
||
<ul class="dropdown-content energieausweis">
|
||
<!--{#if innerWidth < 1023}
|
||
<li><a href="/energieausweis/">Energieausweis</a></li>
|
||
{/if}-->
|
||
<li><a href="/verbrauchsausweis/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis Wohngebäude</a></li>
|
||
<li><a href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis/">Statistiken zum Verbrauchsausweis Wohngebäude</a></li>
|
||
<li><a href="/verbrauchsausweis/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe</a></li>
|
||
<li><a href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis-gewerbe/">Statistiken zum Verbrauchsausweis Gewerbe</a></li>
|
||
<li><a href="/bedarfsausweis/bedarfsausweis-wohngebaeude/">Bedarfsausweis Wohngebäude</a></li>
|
||
<li><a href="/bedarfsausweis/statistiken-zum-bedarfsausweis/">Statistiken zum Bedarfsausweis Wohngebäude</a></li>
|
||
<li><a href="/bedarfsausweis/bedarfsausweis-gewerbe/">Bedarfsausweis Gewerbe</a></li>
|
||
<li><a href="/energieausweis/energieausweis-pflicht/">Energieausweis Pflicht</a></li>
|
||
<li><a href="/energieausweis/energieausweis-kosten/">Energieausweis Kosten</a></li>
|
||
<li><a href="/energieausweis/energieausweis-haus/">Energieausweis Haus</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||
<div
|
||
class="nav-element dropdown lg:dropdown-right"
|
||
on:click={dropdown}
|
||
on:keydown={dropdown}
|
||
on:mouseover={hover}
|
||
on:mouseleave={hoverout}
|
||
>
|
||
{#if innerWidth > 1023}
|
||
<a href="/bestellprozess-energieausweis" class="nav-element-child"
|
||
>Bestellprozess Energieausweis<span class="dd-symbol-clone"
|
||
>❯</span
|
||
><span class="dd-symbol">❯</span></a
|
||
>
|
||
{:else}
|
||
<a href={undefined} class="nav-element-child"
|
||
>Bestellprozess Energieausweis<span class="dd-symbol-clone"
|
||
>❯</span
|
||
><span class="dd-symbol">❯</span></a
|
||
>
|
||
{/if}
|
||
|
||
<ul class="dropdown-content bestellprozess-energieausweis">
|
||
{#if innerWidth < 1023}
|
||
<li>
|
||
<a href="/bestellprozess-energieausweis"
|
||
>Bestellprozess Energieausweis</a
|
||
>
|
||
</li>
|
||
{/if}
|
||
<li>
|
||
<a
|
||
href="/bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen/"
|
||
>Merkblatt Verbrauchsausweis Wohnen</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
|
||
>Merkblatt Bedarfsausweis Wohnen</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
|
||
>Merkblatt Verbrauchsausweis Gewerbe</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||
<div
|
||
class="nav-element dropdown lg:dropdown-right"
|
||
on:click={dropdown}
|
||
on:keydown={dropdown}
|
||
on:mouseover={hover}
|
||
on:mouseleave={hoverout}
|
||
>
|
||
|
||
{#if innerWidth > 1023}
|
||
<a href="/geg/" class="nav-element-child"
|
||
>Gebäudeenergiegesetz (GEG)<span class="dd-symbol-clone">❯</span>
|
||
<span class="dd-symbol">❯</span></a>
|
||
{:else}
|
||
<a href={undefined} class="nav-element-child"
|
||
>Gebäudeenergiegesetz (GEG)<span class="dd-symbol-clone">❯</span>
|
||
<span class="dd-symbol">❯</span></a>
|
||
{/if}
|
||
|
||
<ul class="dropdown-content geg">
|
||
{#if innerWidth < 1023}
|
||
<li><a href="/geg/">Gebäudeenergiegesetz (GEG)</a></li>
|
||
{/if}
|
||
<li><a href="/geg/enev-zusammenfassung/">EnEV Zusammenfassung-Archiv</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||
<div
|
||
class="nav-element dropdown lg:dropdown-right"
|
||
on:click={dropdown}
|
||
on:keydown={dropdown}
|
||
on:mouseover={hover}
|
||
on:mouseleave={hoverout}
|
||
>
|
||
{#if innerWidth > 1023}
|
||
<a href="/faq/" class="nav-element-child">FAQ
|
||
<span class="dd-symbol-clone">❯</span>
|
||
<span class="dd-symbol">❯</span></a>
|
||
{:else}
|
||
<a href={undefined} class="nav-element-child">FAQ
|
||
<span class="dd-symbol-clone">❯</span>
|
||
<span class="dd-symbol">❯</span></a>
|
||
{/if}
|
||
|
||
<ul class="dropdown-content faq">
|
||
{#if innerWidth < 1023}
|
||
<li>
|
||
<a href="/faq/"
|
||
>FAQ</a
|
||
>
|
||
</li>
|
||
{/if}
|
||
<li><a href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis/">Häufige Fragen zum Verbrauchsausweis</a></li>
|
||
<li><a href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis-gewerbe/">Häufige Fragen zum Verbrauchsausweis Gewerbe</a></li>
|
||
<li><a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis/">Häufige Fragen zum Bedarfsausweis</a></li>
|
||
<li><a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis-gewerbe/">Häufige Fragen zum Bedarfsausweis Gewerbe</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-element">
|
||
<a class="no-dropdown nav-element-child lg:!rounded-b-lg xl:!rounded-b-xl" href="/glossar/">Glossar</a>
|
||
</div>
|
||
|
||
<!--<div class="nav-element">
|
||
<a class="no-dropdown nav-element-child lg:rounded-b-xl" href="/kundenbewertungen/"
|
||
>Kundenbewertungen</a
|
||
>
|
||
</div>
|
||
<div class="nav-element">
|
||
<a
|
||
class="no-dropdown nav-element-child lg:!rounded-b-lg xl:!rounded-b-xl"
|
||
href="/fuer-entwickler/">Für Entwickler</a
|
||
>
|
||
</div> -->
|
||
</nav>
|
||
|
||
<style lang="scss">
|
||
.dd-symbol::before {
|
||
content: "❯";
|
||
font-size: 0.95rem;
|
||
position: absolute;
|
||
top: 0px;
|
||
left: -7px;
|
||
animation-name: flim;
|
||
animation-duration: 2s;
|
||
animation-iteration-count: infinite;
|
||
}
|
||
|
||
.dd-symbol {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.dd-symbol::after {
|
||
content: "❯";
|
||
font-size: 0.95rem;
|
||
position: absolute;
|
||
top: 0px;
|
||
right: -7px;
|
||
animation-name: flim;
|
||
animation-duration: 2s;
|
||
animation-delay: 1s;
|
||
animation-iteration-count: infinite;
|
||
}
|
||
|
||
@keyframes flim {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
16.66% {
|
||
opacity: 0.25;
|
||
}
|
||
33.32% {
|
||
opacity: 0.5;
|
||
}
|
||
49.98% {
|
||
opacity: 0.75;
|
||
}
|
||
66.64% {
|
||
opacity: 0.5;
|
||
}
|
||
83.33% {
|
||
opacity: 0.25;
|
||
}
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
</style>
|