Rollover-Navigation für Fortgeschrittene - Hilfe!

[zeta]

Hallo Leute!
Ich hab ein Problem mit dem ich mich schon lange herumrumschlage aber leider noch nichts passendes gefunden habe.
Und zwar geht es um eine normale Rollover-Navigation, bei der allerdings der Rollover-Status angezeigt bleiben soll wenn man auf die Rubrik geklickt hat.
Als Beispiel:
klickt man auf referenzen ist referenzen in rosa. klickt man auf kontakt ist kontakt rosa und referenzen wieder blau.

die technik möchte ich für die diese seite anwenden:
so sieht man immer bei welchen unterpunkt man sich gerade befindet.

vll findet sich ja hier jmd der weiß wie das programmiert wird und im grunde funktioniert.
grüße!

 

[sokie]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

du musst nur auf der entsprechenden Seite die _over grafik als anzeigegrafik einsetzen.
für das Beispiel der Seite 'Unternehmen:

<img src="http://www.autoradio-mobilfunk.de/images_header/unternehmen[COLOR=Red][B]_over[/B][/COLOR].jpg" id="unternehmen_nav" border="0" height="46" width="104">

 

[bigpaul]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

ähm nein.. Dafür gibt es den CSS active Zustand. Siehe:
:active: Aktiviertes Element: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[sokie]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

hilft ihm aber auch nicht weiter, wenn die Schaltflächen javascript-rollovers sind.
schau mal

ausserdem ging es in der Frage darum, dass die Links für den Bereich 'nach dem Laden der Seite' die Farbe behalten. das pseudo :aktive hilft da nicht weiter.
aus deinem Link CSS4YOU

den jedes Element auf einer Seite einnimmt, anklicken und aktiviert ist ein Element solange die Maustaste gedrückt wird.

 

[stroyer]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

Die Seite ist eh mit PHP gemacht (Das Design find ich übrigens ansprechend!; Image preloading fehlt halt).
Da kannst du ja einfach von vornherein im PHP das andere Bild ausgeben, bzw. ins onLoad skript mit php eine funktion ausgeben, dass gleich am Anfang der jeweilige Menüpunkt aktiviert wird.

 

[o0Andy0o]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

im CSS als id #active-nav einstellen und da das Bild nochmal einbinden.

 

[Sling]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

Hallo,

Das selbeproblem hatte ich auch vorlurzem habe es folgender maßen gelöst.

Erst habe ich die Rollovers mit Flippingdors oder wie das heiß gemacht und zwar so:

#home {position: relative;overflow: hidden;width: ;}
#home a img {position: relative;width: 90px;height: 28px;border: 0;}
#home a:hover {position: relative;left: -45px;}

dann habe ich den aktiven zustand bestimmt:

#home_aktiv {position: relative;overflow: hidden;width: 45px;}
#home_aktiv a img {position: relative;width: 45px;height: 28px;border: 0;}
#home_aktiv a:hover {position: relative;left: 0px;}

und zu guterletzt habe ich mit php bestimmt ob die seite aktiv ist oder nicht in dem ich die browserzeile mit explode zerlege.

<ul>
<?php
$arr = explode ("/", $_SERVER['REQUEST_URI']);
$letzte_index = count($arr)-1;
$aktiv = $arr[$letzte_index];

if ($aktiv == "home")
{
	echo "<li style='width:48px;'><div id=\"home_aktiv\"><img src=\"bilder/home_a.png\"width=\"45\" height=\"28\" /></div></li>";
}
else
{
	echo "<li style='width:48px;'><div id=\"home\"><a href=\"index.html\"><img src=\"bilder/home.png\"width=\"90\" height=\"28\" /></a></div></li>";
}
?>
</ul>

so rufe ich wenn die seite aktiv ist die divid home_aktiv auf und wenn das nciht der fall ist dann halt nur die Homeid mit der flippingdor. Das gute daran ist das es auf allen browser funktioniert dazu musst du noch den kleinen trick hier an wenden.
Du bidest in deiner css im Bodytag folgenden fix ein.
"behavior: url(csshover.htc);" die datei "csshover.htc" suchte dir im netz ist nciht schwer zu finden sie aktiviert den hover beim ie 6.

Um das menue dann noch mit png's bzw das rollover mit png's gängi zumachen kannst du auch boch diese hack einfügen.

/* PNG Fix für den IE */
img, div { 
border:none;
behavior: url(iepngfix.htc);
}

ich hoffe es hilft dir einwenig weiter.

Gruß Sling

PS in deinem fall musst du nciht mal die Browserzeile zerlegen sondern du kannst die ID in empfang nehmen und damit arbeiten. Ach ja und deine rollovergrafiken müssen so angelegt sein das alle drei zustände auf einem bild sind und erst der inaktive dann der rollover und dann der aktive zustand. Sollte mit photoshop kein problem sein. Ein bsp für die sache habe ich hier www.fs-froemming.de

 

[o0Andy0o]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

Auch wenns etwas OffTopic ist, @Sling: du solltest unbedingt das Logo auf die Startseite packen.

 

[Sling]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

ist eh alles veraltet sobald ich zei habe geht die neue seite online ist nur noch nciht fertig. Und wieso sollte ich das da eigendlich unbedingt draufpacken?

 

[o0Andy0o]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

Da verschiebts dir die Navigation. Is ne sache von 1min und verbessert die Useability erheblich

 

[Sling]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

Da verschiebts dir die Navigation. Is ne sache von 1min und verbessert die Useability erheblich

also Irgend wie kann ich dir nicht folgen du meinst jetzt auf der seite fs-fisch.de? Denke ich wenn das so ist dann muss ich dir leider sagen ahbe ich kein einfluss drauf ich bin nur der Programmierer nciht der Designer das designe ist verkauft die seite ist online ich darf nur machen was mir vom chef abgesegnet ist und vom designer kommt. wenn die alle meinen das sieht gut aus von mir aus solls so ich finds auch blöde aber wem erzähle ich das. Design habe ich leider nix mit zutuhen in der firma C'est la vie man kann nciht alles haben.

 

[o0Andy0o]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

www.fs-froemming.de meine ich

 

[zeta]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

erstmal vielen dank für die beteiligung!
@ stroyer: das preload script ist soweit ich das noch weiß mit eingebunden. habs nur ausgelagert damit es übersichtlicher wird. siehst es im quelltext unter:
<script src="js/rollover.js"></script>

ich werd die variante von sling mal ausprobieren. scheint mir aber recht kompliziert. hoffe ich bekomm das hin. danke schonmal!

aber da muss es irgendwie noch ne css variante geben. hätte kein problem die navigation is css zu machen. bei cusox.de ist es auch so dass die einzelnen menüpunkte einfach als listenelemente <li> eingebunden und dann in der css definiert sind. könnt ja mal versuchen die seite abzuspeichern und was rauszufinden. ich beiß da irgendwie auf granit. bin leider nicht gerade der programmierkönig.

 

[stb_87]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

CSS hat nichts mit Programmieren zu tun.

Das ist lediglich zum Formatieren da.

Weitere Infos hier:
:hover: Mouseover-Effekt: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Links mit zusätzlichen Informationen: Tipps und Tricks auf CSS 4 You - The Finest in Stylesheets

 

[stroyer]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

erstmal vielen dank für die beteiligung!
@ stroyer: das preload script ist soweit ich das noch weiß mit eingebunden. habs nur ausgelagert damit es übersichtlicher wird. siehst es im quelltext unter:
<script src="js/rollover.js"></script>

Dann liegt es an meinem Browser, dass er die Bilder erst beim Drauffahren lädt.

 

[Sling]

AW: Rollover-Navigation für Fortgeschrittene - Hilfe!

Also 1. ich glaube ich habe mcih für diese lösung entschieden weil der IE 6 ja den aktiv zustand von links nicht kennt und der 5 erst recht nicht. Weiterhin muss ich sagen das ich glaube das deine bsp seite auch mit einer abfrage der aktiven seite via php arbeitet sonst würden bzw müssten sie ja keie Id übergeben via Get. Kann natürlich sein das die noch für etwas anderes gebraucht wird muss aber nicht.

2. OK meine varianete ist sicher etwas komplex aber sie ist von ie 5.5 bis 8 beta in allen gängin und im opera firefox und seemonkey habe ich bis jetzt auch noch nicht fest gestellt das es nicht geht.

§. wenn du eine lösung hast poste sie doch hier bitte würde mich wirklich interesieren wie du es noch machen kannst.

Mit besten grüßen Sling