Anpassung der Navigation im Jimdo-Head Design Rome
Hallo liebes Forum,
ich habe eine kleine Homepage für unser Unternehmen im Jimdo gebastelt. Sieht auch soweit zufriedenstellend aus. Problematisch ist ja bekannterweise die Sprachauswahl. Diese habe ich mit den Anpassungen aus diesem Link (klick mich) auch super hinbekommen. Das einzige, was ich leider nicht bearbeiten kann, ist die Navigationsleiste. Ich würde dort ebenfalls gern diese <div class="textDe"></div>-Methode anwenden, müsste aber dazu die entsprechende Stelle irgendwie ansprechen können. Und daran scheitert es bei mir gerade.
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
nav{
width:100%;
height:60px;
}
nav ul {
display:flex;
}
nav ul li{
flex:1;
list-style:none;
}
nav ul li:hover ul{
display:block;
}
nav ul li ul{
display:none;
}
nav ul li a{
color: #fff;
background: #619086;
font-size:18px;
display:block;
height:60px;
line-height:60px;
text-align:center;
}
nav ul li a:hover
{
background:#01f086;
color:black;
}
</style>
<nav class="jtpl-navigation"><div class="jtpl-navigation__inner navigation-alignment" data-dropdown="true" data-main="true">
<div data-container="navigation"><div class="j-nav-variant-nested"><ul class="cc-nav-level-0 j-nav-level-0">
<li id="cc-nav-view-1499044754" class="jmd-nav__list-item-0 cc-nav-current j-nav-current jmd-nav__item--current"><a href="/" data-link-title="Home" class="cc-nav-current j-nav-current jmd-nav__link--current">Haus</a></li>
<li id="cc-nav-view-1499044854" class="jmd-nav__list-item-0 j-nav-has-children"><a href="/produkte/" data-link-title="Produkte">Produkte</a><span data-navi-toggle="cc-nav-view-1499044854" class="jmd-nav__toggle-button"></span>
<ul class="cc-nav-level-1 j-nav-level-1">
<li id="cc-nav-view-1499050154" class="jmd-nav__list-item-1"><a href="/produkte/stapelheber/" data-link-title="Stapelheber">Stapelheber</a></li>
<li id="cc-nav-view-1499050054" class="jmd-nav__list-item-1"><a href="/produkte/stapelwender/" data-link-title="Stapelwender">Stapelwender</a></li>
</ul></li>
<li id="cc-nav-view-1499049954" class="jmd-nav__list-item-0"><a href="/sondermaschinenbau/" data-link-title="Sondermaschinenbau">Sondermaschinenbau</a></li><li id="cc-nav-view-1499044954" class="jmd-nav__list-item-0"><a href="/leistungen/" data-link-title="Leistungen">Leistungen</a></li>
<li id="cc-nav-view-1499045054" class="jmd-nav__list-item-0"><a href="/kontakt/" data-link-title="Kontakt">Kontakt</a></li>
</ul>
</div></div>
</div>
</nav>
<br> <br> <br> <br> <br> <br> <br>
<strong><button id="langDe" disabled><span style="font-size: 18px;"><strong><span style="font-size: 18px;"><strong><span style="font-size: 18px;"><strong>Deutsch</strong></span></strong></span></strong> </span></button><button id="langEn"><span style="font-size: 18px;"><strong>English</strong></span></button></strong>
<script>
var array_ger=['Haus','Produkte','Stapelheber','Stapelwender','Sondermaschinenbau','Leistungen','Kontakt'];
var array_eng=['Home','Products','Stack lifter','Pile turner','Special mechanical engineering','Services','Contact'];
document.getElementById('langDe').addEventListener('click',function(){
tauschen(1);//von englisch zu deutsch
});
document.getElementById('langEn').addEventListener('click',function(){
tauschen(2);//von deutsch zui englisch
});
function tauschen(u){
var nav_links=document.querySelectorAll('nav ul li a');
nav_links.forEach(function(ele){
if(u==2){
var position = array_ger.indexOf(ele.innerHTML);
ele.innerHTML=array_eng[position];
document.getElementById('langEn').setAttribute('disabled',true);
document.getElementById('langDe').removeAttribute('disabled');
}
if(u==1){
document.getElementById('langEn').removeAttribute('disabled');
document.getElementById('langDe').setAttribute('disabled',true);
var position = array_eng.indexOf(ele.innerHTML);
ele.innerHTML=array_ger[position];
}
})
}
</script>