UL soll bei aktiver Seite sichtbar bleiben

[pepesan]

Hallo
unter Home - Droege Immobilien habe ich ein Menü erstellt wo die eigentliche Menuliste bei Mouseover der Quadrate von Unten eingeschoben werden und damit sichtbar werden. So was ähnliches passiert auch auf den Unterseiten.
Geht mal auf 02 Profil und klickt dann auf Das Unternehmen. Man gelangt zu der Unterseite mit einem kleineren Menu wo auch dieser Effekt ist.

Jetzt mein Wunsch:
Es soll genau so stehen bleiben, also im mouseover zustand und der aktive Menüpunkt soll fett sein. gehe ich hier auf einen anderen und klicke dann auf den Link so soll dieser nach Laden der seite wieder so aussehen und so weiter.

Der Code mit dem ich das mache ist folgender:

jQuery(document).ready(function(){
var front_u = jQuery('.front_u');

front_u.hover(function() {
 jQuery(this).children("p").animate({"right": "-100px"}, 750, "swing");    
 jQuery(this).children("ul").show("slow").animate({"top": "-130px"}, 750, "swing")
},function(){
 jQuery(this).children("p").animate({"right": "0"}, 750, "swing");    
 jQuery(this).children("ul").animate({"top": "0"}, 750, "swing");
  });
});

Das ist der HTML Code:

<div class="cube_u home_u">
                    <div class="front_u">
                        <p><span>01</span> Start</p>
                        <ul>
                        <li><a href="http://www.droege-immobilien.de/joomla">Start</a></li>
                        </ul>
                    </div>
                </div>
                <div class="cube_u profil_u">
                    <div class="front_u">
                        <p><span>02</span> Profil</p>
                        <ul>
                        <li><a href="demo1.html">Das Unternehmen</a></li>
                        <li><a href="demo2.html">Referenzen</a></li>
                        <li><a href="">Bewertungen</a></li>
                        </ul>
                    </div>
                </div>

 

[threadi]

Bei mir geht dein Link gerade nicht?

 

[pepesan]

jetzt gehts wieder

 

[threadi]

Wenn Du beim Laden der Seite das aufgeklappt haben willst, müsstest Du die CSS-Eigenschaften im HTML-Code entsprechend setzen. Also bei

<div class="front_u">
						<p style="right: 0px;"><span>02</span> Profil</p>
						<ul style="top: 0px;">
						<li><a href="/droege/demo1.html">Das Unternehmen</a></li>
						<li><a href="/droege/demo2.html">Referenzen</a></li>
						<li><a href="/droege/">Bewertungen</a></li>
						</ul>
					</div>

die Eigenschaften für p und ul anpassen:

<div class="front_u">
						<p style="right: -100px;"><span>02</span> Profil</p>
						<ul style="top: -100px;">
						<li><a href="/droege/demo1.html">Das Unternehmen</a></li>
						<li><a href="/droege/demo2.html">Referenzen</a></li>
						<li><a href="/droege/">Bewertungen</a></li>
						</ul>
					</div>

 

[pepesan]

Aber ich will doch immer die ul anzeigen auf dessen Bereich ich gerade stehe.
So würde er doch immer angezeigt

oder verstehe ich das falsch ?

 

[threadi]

Ja. Du musst diese Angaben natürlich nur bei dem Bereich ändern der für die aktuelle Seite steht. Nicht bei allen.

 

[pepesan]

Das müsste aber mit jquery tun.
Und wie mache ich das?
ich meine wie Spreche das aktive p und ul an.

 

[threadi]

Dazu müsstest Du im HTML-Code eine Markierung hinterlegen, dass das jetzt der aktive Menüpunkt ist. Das geht entweder auf o.g. Weg oder durch die Angabe einer Klasse "aktiv" bei einem den aktuellen Menüpunkt umgebenden HTML-Element.

 

[pepesan]

OK - folgendes habe ich probiert.

jQuery('.front_u').on("click", "a", function ( event ) {
        jQuery("ul", event.delegateTarget).addClass("current");
    });
});

funktioniert zwar, aber da ich ja auf einem Link klicke wird logischerweise eine Neue Seite geladen in der die Klasse dann fehlt.

Wie löse ich das ?

 

[Tronjer]

Ist mir eigentlich zu heiß um nachzudenken. Was genau willst du denn erreichen?

Wenn das <a> Tag nicht weiterleiten soll, bau ein event.preventDefault() ein.
Du könntest den Seitenrefresh vermeiden, indem du nur Teile des Contents per Ajax nachlädst.
Falls du bei einem Seitenwechsel einen bestimmten Zustand weiterreichen willst, könntest du die Infos per Cookie transportieren.

 

[pepesan]

Ich will erreichen das wenn ich auf einen dieser Links klicke.
es auf der geladenen Seite genau so aussieht als wenn ich mit der Maus drüberstehe.

 

[Tronjer]

Also technisch formuliert soll ein mit der jeweils geladenen Seite korrespondierendes Navigationselement bestimmte Styles besitzen?

Das würde ich mit CSS-Klassen und deren Zuweisung über PHP lösen. JavaScript bietet sich eher dann an, wenn nach dem Laden noch dynamische Veränderungen stattfinden sollen.

 

[pepesan]

Danke. Aber ich habe keine Ahnung wie ich das machen soll.

Ein Tipp vielleicht würde mir weiterhelfen. :-)