Navigation umbauen (jQuery Problem)

[Sukrams]

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.

<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>

$(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

[Andreas]

Im Allgemeinen ist das immer schlecht, wenn du eine Navigation selber codest. Du kannst damit nicht mehr von den vielen Vorteilen eines Navigationsmodules profitieren (unter anderem auch, dass sich keine Fehler in den Code einschleichen). Wenn du da sowieso schon mit JS arbeitest, dann kannst du den Punkt

<li id="logo"><a href="#"><i class="fa fa-leaf" aria-hidden="true"></i></a></li>

auch eben mit JS in ein Navigationsmodul beamen.

Durch dein eigenes Coden hast du einen Fehler erzeugt: (siehst du ihn?)

<li class="class2>">Menüpunkt</li>

Ich habe das Script mal ein wenig umgemodelt, obwohl ich mir nicht sicher bin, ob diese Lösung mit dem Verschieben von Elementen hier die beste (einfachste) ist.

/* JS */
(function($) {
  $(document).ready(function() {

    var
      header     = $("header"),
      logoA      = $("a.logo"),
      logoLI     = $("#logo"),
      small      = false,
      breakpoint = 1080,
      handleLogo = function() {
        if ($(window).width() < breakpoint && !small) {
          logoA.appendTo(header);
          logoLI.css('display', 'none');
          small = true;
        }
        if ($(window).width() >= breakpoint && small) {
          logoA.appendTo(logoLI);
          logoLI.css('display', 'inline');
          small = false;
        }
      }
    ;

    handleLogo();

    $(window).resize(function() {
      handleLogo();
    });

  });
})(jQuery); 

Hier noch das HTML, damit man weiß worum es geht.

<header>
  <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 class="logo" 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>
</header>