229 lines
8.1 KiB
Svelte
229 lines
8.1 KiB
Svelte
<script>
|
||
let innerWidth
|
||
|
||
function dropdown(){
|
||
|
||
const innerWidth = window.innerWidth;
|
||
console.log(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];
|
||
|
||
console.log(rotate_element);
|
||
|
||
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;
|
||
console.log(innerWidth);
|
||
if(innerWidth>1024){
|
||
const check_element = this.firstChild.lastChild;
|
||
console.log(check_element);
|
||
check_element.style.visibility = "visible";
|
||
}
|
||
}
|
||
|
||
function hoverout(){
|
||
const innerWidth = window.innerWidth;
|
||
console.log(innerWidth);
|
||
if(innerWidth>1024){
|
||
const check_element = this.firstChild.lastChild;
|
||
console.log(check_element);
|
||
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("card-navigation");
|
||
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-6
|
||
lg:hidden">
|
||
|
||
<div id="hamburger" on:click={hamburger} on:keydown={hamburger} class="cursor-pointer">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<nav id="card-navigation" class="card-navigation hidden box ring-2 ring-primary/50 lg:block">
|
||
|
||
<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="" class="nav-element-child xl:rounded-t-[.75rem] lg:rounded-t-lg xl:rounded-t-xl " >Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
||
{:else}
|
||
<a href="javascript:void(0)" class="nav-element-child xl:rounded-t-[.75rem]">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</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>
|
||
<li><a href="/energieausweis-erstellen/bedarfsausweis-gewerbe/">Bedarfsausweis Gewerbe erstellen</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 dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
|
||
<a href="javascript:void(0)" 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>
|
||
|
||
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
|
||
<a href="javascript:void(0)" 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 dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
|
||
<a href="javascript:void(0)" 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 class=""><a href="index">Energieausweis Pflicht</a></li>
|
||
<li class=""><a href="index">Energieausweis Kosten</a></li>
|
||
<li class=""><a href="index">Energieausweis Haus</a></li>
|
||
</ul>
|
||
</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="/energieausweis-aussteller">Energieausweis Aussteller</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" href="/faq">FAQ</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>
|
||
|
||
.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> |