284 lines
11 KiB
Svelte
284 lines
11 KiB
Svelte
<script>
|
||
|
||
let innerWidth
|
||
|
||
function dropdown(){
|
||
|
||
const innerWidth = window.innerWidth;
|
||
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(){
|
||
const innerWidth = window.innerWidth;
|
||
if(innerWidth>1024){
|
||
const check_element = this.firstChild.lastChild;
|
||
check_element.style.visibility = "visible";
|
||
}
|
||
}
|
||
|
||
function hoverout(){
|
||
const innerWidth = window.innerWidth;
|
||
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");}
|
||
}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" on:click={hamburger} on:keydown={hamburger} class="cursor-pointer">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</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">Eingabeformulare</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" >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>
|
||
|
||
<div class="nav-element">
|
||
<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan-anfragen">Sanierungsfahrplan anfragen</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={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="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Bedarfsausweis Gewerbe anfragen</a></li>
|
||
<li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">GEG Nachweis Wohnen anfragen</a></li>
|
||
<li><a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">GEG Nachweis Gewerbe anfragen</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-element">
|
||
<a class="no-dropdown nav-element-child" href="/welcher-energieausweis">Welcher Energieausweis?</a>
|
||
</div>
|
||
|
||
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">Produkte</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">Verbrauchsausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
||
<ul class="dropdown-content verbrauchsausweis">
|
||
{#if innerWidth < 1023}
|
||
<li><a href="index">Verbrauchsausweis</a></li>
|
||
{/if}
|
||
<li><a href="index">Verbrauchsausweis Wohngebäude</a></li>
|
||
<li><a href="index">Verbrauchsausweis online erstellen</a></li>
|
||
<li><a href="index">Häufige Fragen zum Verbrauchsausweis</a></li>
|
||
<li><a href="index">Statistiken zum Verbrauchsausweis Wohngebäude</a></li>
|
||
<li><a href="index">Verbrauchsausweis Gewerbe</a></li>
|
||
<li><a href="index">Verbrauchsausweis Gewerbe online erstellen</a></li>
|
||
<li><a href="index">Häufige Fragen zum Verbrauchsausweis Gewerbe</a></li>
|
||
<li><a href="index">Statistiken zum Verbrauchsausweis Gewerbe</a></li>
|
||
</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">Bedarfsausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
||
<ul class="dropdown-content bedarfsausweis">
|
||
{#if innerWidth < 1023}
|
||
<li><a href="index">Bedarfsausweis</a></li>
|
||
{/if}
|
||
<li><a href="index">Bedarfsausweis Wohngebäude</a></li>
|
||
<li><a href="index">Bedarfsausweis online erstellen</a></li>
|
||
<li><a href="index">Häufige Fragen zum Bedarfsausweis</a></li>
|
||
<li><a href="index">Statistiken zum Bedarfsausweis Wohngebäude</a></li>
|
||
<li><a href="index">Bedarfsausweis Gewerbe</a></li>
|
||
<li><a href="index">Bedarfsausweis Gewerbe online erstellen</a></li>
|
||
<li><a href="index">Häufige Fragen zum Bedarfsausweis Gewerbe</a></li>
|
||
<li><a href="index">Statistiken zum Bedarfsausweis Gewerbe</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-element">
|
||
<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan">Sanierungsfahrplan</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}>
|
||
<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="index">Energieausweis</a></li>
|
||
{/if}
|
||
<li><a href="index">Energieausweis Pflicht</a></li>
|
||
<li><a href="index">Energieausweis Kosten</a></li>
|
||
<li><a href="index">Energieausweis Haus</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">Service</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}>
|
||
{#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="/bestellprozess-energieausweis" 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>
|
||
|
||
<div class="nav-element">
|
||
<a class="no-dropdown nav-element-child" href="/faq">FAQ</a>
|
||
</div>
|
||
|
||
<div class="nav-element">
|
||
<a class="no-dropdown nav-element-child" href="/glossar">Glossar</a>
|
||
</div>
|
||
|
||
<div class="nav-element">
|
||
<a class="no-dropdown nav-element-child" href="/enev-zusammenfassung">EnEV Zusammenfassung - Archiv</a>
|
||
</div>
|
||
|
||
<div class="nav-element">
|
||
<a class="no-dropdown nav-element-child" 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> |