Navigation umbauen (jQuery Problem)
Moin,
ich bräuchte da mal etwas Unterstützung von den jQuery Experten hier. Folgendes ist der Fall: Ich habe mir ein eigenes HTML-Modul für die Navi gebaut und sie hier händisch eingepflegt, da das Logo in die Mitte soll. Mobil verschwindet die Navi und wird entsprechend ein/ausgeblendet. Das Logo soll hierbei aber nicht in der Navi sein, sondern permanent. Soweit so gut und auch kein Problem.
Nachdem ich jetzt die Navi mit jQuery auseinander gepflückt habe, muss sie sich, wenn man z. B. am Desktop den viewport vergrößert, natürlich wieder im Ursprungszustand befinden. Ich habe hierfür in die if-Abfrage noch die Abfrage eingebaut, ob die variable resized auf 1 gesetzt ist, wenn das der Fall ist, soll die Navi zurückgebaut werden, was sie, sofern die Abfrage da ist, allerdings nicht tut. Ist die Abfrage nicht dort, tut sie es, allerdings wird bei jedem window-resize das ein leeres <li>-Element erzeugt, was auch nicht schön ist.
HTML-Code:
<nav id="navigation-main">
<ul class="level_1 inside">
<li class="class1">Menüpunkt</li>
<li class="class2>">Menüpunkt</li>
<li id="logo"><a href="#"><i class="fa fa-leaf" aria-hidden="true"></i></a></li>
<li class="class3">Menüpunkt</li>
<li class="clas4">Menüpunkt</li>
</ul>
</nav>
Code:
$(document).ready(function() {
var bildschirmbreite = $(window).width();
if (bildschirmbreite <= 1180) {
$("#logo a").appendTo("header").addClass("logo");
$("#logo").remove();
}
$(window).resize(function() {
var bildschirmbreite = $(window).width();
if (bildschirmbreite <= 1180) {
$("#logo a").appendTo("header").addClass("logo");
$("#logo").remove();
var resized = 1;
}
if (bildschirmbreite >= 1180 && resized === 1) {
$("#navigation-main .class2").after('<li id="logo"></li>');
$(".logo").appendTo("#logo");
$("#navigation-main").removeAttr("style");
}
});
});
Sitze da jetzt schon eine ganze Zeit dran, aber so wirklich schlauer werde ich gerade auch nicht mehr.
Ich habe den Code noch ein wenig entschlackt und bei Codepen eingestellt: http://codepen.io/Sukrams/pen/RRZWKO
Viele Grüße
Markus