Navigation jQuery

L

LeMarkus

Mitglied
Hallo, ich muss eine Navigation machen. Diese navigation ist auf vielen verschiedenen Unterseiten zu finden und sollte mit Hilfe von am besten jQuery gelöst werden (kein Flash oder sonstiges). Die reine Animation der Navigation stellt dabei kein Problem dar (CSS und jQuery). Allerdings stehe ich bei der Einbindung der Navigation vor einem Problem.

1.) Da ich nicht auf jeder Microseite den HTML Code der globalen Navigation hinschreiben will, möchte ich gerne dies mit Hilfe von jQuery (html-Element) erledigen lassen und somit lediglich das jeweilige js-Dokument mit "<script src="..."...>" im head einbinden. Wie kann ich direkt nach dem body-tag mit Hilfe von jQuery HTML Code einfügen? Ich weiß, dass es das html-Element in jQuery gibt, aber wie kann ich das an eine bestimmte Stelle (nach <body>) einfügen lassen? Geht das überhaupt?

2.) Da die Webseite zweisprachig ist (.de und .com am Ende) und es zwei verschiede Versionen der Navigation (Deutsch und Englisch) gibt, muss immer je nach Endung der url (http://www.microseite.test.de oder http://www.microseite.test.com) eine andere Navigation eingebunden werden. Ist es mit jQuery oder Javascript möglich dies herauszufinden? Mir geht es im Speziellen nur um die jeweilige .de oder .com Endung der Webseite, der Rest der URL spielt für mich keine Rolle.

3.) Was ist die beste Möglichkeit in jQuery die Webseite (wie bei Lightbox) abdunkeln zu lassen? Einfach ein div (100% Höhe und Breite) mit transparentem schwarz einfaden lassen? Oder gibt es bessere Möglichkeiten?
 
Erstmal zu deinem generellen Problem: Javascript ist dazu da das Benutzen der Webseite zu erleichtern, aber sie nicht zu erstellen. Deshalb solltest du dieses Problem eher mit PHP lösen und damit deine Navigation auf alle Seiten einbinden. Stell dir vor, dass jemand Javascript deaktiviert hat, dann kann er deine Webseite nicht nutzen. Denkbar schlecht.

Aber kommen wir zu deinen Unterproblemen:
1) Wenn du schon das Skript im Kopf einbindest, warum willst du dann noch etwas zwischen Kopf und Inhalt einfügen? Es genügt doch, dass du die Datei einbindest.

2) Ja, dass ist möglich. Schaue dir dazu mal location.host an.

3) Am leichtestens ist das zu lösen indem du eine fertige Lightbox-Variante für jQuery verwendest.
 
Danke für die Antwort.

Zu dem generellen Problem. Du hast Recht, php ist sicherlich die bessere Möglichkeit das einzubinden.

1.) Damit hat sich dieser Frage auch erübrigt, da dann einfach die Navigation über php eingebunden wird
2.) Ich kenne mich mit reinem Javascript leider nicht sonderlich gut aus, lediglich die Grundlagen. Wie muss ich vorgehen, um mit "location.host" an die jeweilige Endung zu kommen, also .de oder .com?
3.) Ich brauche das abdunkeln für die Navigation. Sobald man über diese fährt soll sich die Seite abdunkeln. Ich denke in diesem Fall kann man nicht einfach Lightbox benutze, zumindest wüsst ich nicht wie.
 
Zu 2):
Code: 
host = location.host.split(".");
tld = host[(host.length - 1)];
Ich habe es nicht ausprobiert, aber theoretisch müsste jetzt in der Variablen tld die Top-Level-Domain der Seite stehen, also in deinem Fall de oder com.
 
Ok vielen Dank, ich werde es mal gleich versuchen. Allerdings stehe ich schon vor dem nächsten problem, bei dem ich mir nicht sicher bin, wie ich es lösen sollte. Die einzlelnen Navigationspunkte bestehen aus Bildern, die gewechselt werden und einem kleinen Beschreibungstext (der die Farbe ändern soll).

Die Pfadangaben für die hoverbilder sollten entweder nur im HTML stehen (so wie in meinem Beispiel)
oder
den Pfad des Hoverbildes einfach dadurch ermitteln, dass an den Pfad des normalen Bildes _hover gehängt wird. Also normales Bild: "Bild.png", Hoverbild: "Bild_hover.png"

Der HTML Code sieht so aus. Wenn die Variante 2 mit dem "_hover" einfacher ist umzusetzen, einfach das zweite img wegdenken.

Code: 
<ul>
    	<li><a href=""><span><img src="http://www.tutorials.de/images/nav_careers.png" /><img class="hover" src="http://www.tutorials.de/images/nav_careers_hover.png" />Das ist eine Beschreibung des Punktes</span></a></li> 
        <li><a href=""><span><img src="http://www.tutorials.de/images/nav_careers.png" /><img class="hover" src="http://www.tutorials.de/images/nav_careers_hover.png" />Das ist eine Beschreibung des Punktes</span></a></li>  
    </ul>

Nur leider weiß ich nicht, wie ich beide Varianten umsetze. Ich weiß zwar wie man Bilder wechselt, aber nicht wie man z.B an den Pfad ein :hover hinhängen kann. Bei der andeen variante müsste ich eigentlich nur das eine Bild ausfaden und gleichzeitig das andere Bild ("img.hover") einfaden oder?

EDIT: Variante 1 kann ich ja mit CSS machen problemlos. Wie ginge Variante 2 mit dem "_hover" am Ende? Diese wäre mir fast lieber, da ich dann nur ein Pfad jeweils angeben muss und der andere automatisch ermittelt wird
 
Zuletzt bearbeitet:
Also die Varinte mit CSS bildwechsel stellt sich in diesem Fall als recht schwer aus. Es ist zwar machbar, aber die mittige Positionierung zweier mit variabler Breite übereinanderliegenden Bildern müsste etwas umständlicher gelöst werden.
Die Variante mit dem jQuery Bildwechsel wäre vom Pflegeaufwand her eine enorme Erleichterung. Nur leider habe ich bisher nicht gefunden wie man die "img src" mit jQuery ausliest und dann vor das .png ein _hover hingängt. Hat jemand eine Antwort auf diese Frage oder bleibt mir nur der recht schlechte Weg über CSS?

EDIT: Ach ich habe nach dem falschen begriff gesucht. Nunkann ich die src von einem Bild auslesen (jQuery("pfad").attr("src");), aber weiß nicht wie ich diesen Pfad umändere ("_hover" vor .png)

EDIT 2: Habe nun auch geschafft die Bilder per regex zu ersetzen. Allerdings gibt es irgendwie ein problem mit hover und mouseleave. die "hover" Eigenschaft wird sowohl aufgerufen wenn man drüberfährt, als auch wenn man wieder runtergeht. "mouseover" wird noch öfter angerufen. Wie löst man so etwas? Ich möchte beim drüberfahren einmalig die Hintergrundfarbe animiert ändern und das Bild ersetzen. Beim wieder weg fahren wieder den ursprungszustand herstellen:
Code: 
$("a").hover(function() {  
		var _src = $("span img",this).attr("src"); 		
		var _srcHover = _src.replace(/([^.]*)\.(.*)/, "$1_hover.$2");
		
		$("#inhalt").append(_srcHover + "<br />");
		
		$("span img", this).attr("src",_srcHover);    
		
    	$(this).stop().animate({ backgroundColor: "#5c594e"}, "fast");      
	
		
	}); 
						  
	$("a").mouseleave(function() {  
							   
							   /* Bild zurückersetzen */
								  
    	$(this).stop().animate({ backgroundColor: "#c9c285"}, "fast"); 	  
		
	});
 
Zuletzt bearbeitet:
Hi,

mit lastIndexOf kannst du das letzte Vorkommen eines Zeichens in einem String ermitteln. Mit substr lässt sich die Zeichenkette in die erforderlichen Teile zerlegen.
Code: 
var strSrc = "bild.png";
alert(strSrc.substr(0, strSrc.lastIndexOf(".")) + "_hover" + strSrc.substr(strSrc.lastIndexOf(".")));
Ciao
Quaese
 
mouseenter bringt das erwünschte Ereignis, vielen Dank.
Nun noch zwei weitere Fragen. Ich habe bereits ganz oben geschrieben, dass ich den Bildschirm abdunkeln möchte. Dies mache ich einfach über die Einblendung eines div containers:
Code: 
$("#main_nav").hover(function() {
		
		$("#nav_background").stop().fadeTo("fast", 0.3)					 
	});
Das Problem ist nun, dass wenn ich mehrmals über "#nav_background" mit der Maus drüber fahre und wieder runter gehe, sich das Einblenden mehrmals wiederholt (also so oft, wie ich es gemacht habe) - wie eine Verzögerung.

Die andere Frage bezieht sich auf die Anordnung der einzelnen <li> Elemente der Navigation. Der Aufbau sieht dabei ungefähr so aus:
Code: 
<ul>
<li class="test1"><a href="test1.webseite.com">Test1</a></li>
<li class="test2"><a href="test2.webseite.com">Test2</a></li>
<li class="test3"><a href="test3.webseite.com">Test3</a></li>
</lu>

Also die einzelnen li Elemente haben die Klasse der einzelnen Microseite. Nun soll wenn die aktuelle Microseite zum Beispiel "test2.webseite.com" ist das entsprechende li Element die Klasse active bekommen und falls möglich ganz nach oben rutschen. Also in meinem Beispiel soll der Code der test 2 Microseite dann so aussehen:
Code: 
<ul>
<li class="test2 active"><a href="test2.webseite.com">Test2</a></li>
<li class="test1"><a href="test1.webseite.com">Test1</a></li>
<li class="test3"><a href="test3.webseite.com">Test3</a></li>
</lu>
Ist so etwas mit Javascript möglich oder mit PHP oder wie auch immer?
 
Hi,

zum ersten Problem:
Wie sieht denn der zugehörige HTML-Code aus?

Zum zweiten Problem:
Unter der Voraussetzung, dass die Navigationsreihenfolge geändert und die Klasse ergänzt werden soll, wenn die Seite geladen wird, könntest du folgendes versuchen:
Code: 
$(function(){
  var strHREF = String(window.location);
  $('#nav li').each(function(i){
    if(strHREF.search(new RegExp($(this).attr('class'))) != -1){
      if(i != 0)
        $(this).insertBefore($(this).parent('ul li:eq(0)'));

      $(this).addClass('active');
    }
  });
});
In einem solchen Fall wäre es allerdings sinnvoller, es mit PHP zu lösen, um User mit abgeschaltetem JavaScript nicht auszuschliessen.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück