• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigationshintergrund bei Klick ändern

Skater

Skater

Mitglied
So da bin ich auch schonwieder mit dem nächsten Problem :D

Ich hab ne Navigation, mit css & html. Die Listenpunkt-Variante habe ich nicht gewählt, sondern ich habe sie in einer table angeordnet.

Hier einmal die beiden Codes:
CSS
Code: 
.home,
.home span { background: url(sprite.png) }


.home {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 102px;
	height: 70px;
	background-repeat: no-repeat;
}
.home span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-repeat: no-repeat;
	background-position: 0 -280px;
	opacity: 0;
	-webkit-transition: opacity 1.5s;
	-moz-transition: opacity 1.5s;
	-o-transition: opacity 1.5s;
}
.home:hover span {
	opacity: 1;
}
.
.
.

HTML
Code: 
<table align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="http://www.google.de/" target="content" class="home"><span></span></a></td>
.
.
.

Zweck:
Der Hintergrund von "home" wird beim hover mit einem Bildausschnitt 280 Pixel weiter unten in 1,5 Sekunden überblendet.

Ziel:
Wenn man einen der Navigationspunkte angeklickt hat, (ich habe euch hier nur "home" gezeigt, es gibt noch 4 andere) soll im Hintergrund der Bildausschnitt 0 -70px angezeigt werden und beim fade-Effekt soll 0 -210px überblendet werden. Aber NUR bei dem angeklickten Button.

Frage:
Muss ich jetzt 5 einzelne Websites erstellen, auf welchen jeweils ein Button als angeklickt angezeigt wird? Für sonstige Lösungsvorschläge wäre ich sehr dankbar, denn ich versuche die Seite mit möglichst wenigen requests zu gestalten.

Ich hoffe das ich einfach nur zu blind bin und ihr schnell eine Lösung findet. Danke

Achja .. Wenn ihr wollt kann ich die komplette Seite (die zurzeit nur aus der Navigation besteht) auch hochladen damit ihr alle ein visuelles Beispiel habt!
 
Wieso willst Du 5 Seiten für jeweils einen Menüpunkt erstellen? Die Frage kapier ich schon nicht.
 
Genau das will ich ja nicht machen. Ich habe nur gefragt ob es nicht anders geht, was eigentlich auch unsinnig ist, denn ich weiß das es geht - blos nicht wie ..

http://crunk.bplaced.com/gurke/

Schau es dir mal an, ich will das wenn man einen Button anklickt aus dieser Sprite http://crunk.bplaced.com/gurke/sprite.png Dieser Button mit dem Orangenen Farbübergang angezeigt wird.

Vielleicht habe ich mich falsch ausgedrückt, sorry.
 
Zuletzt bearbeitet:
Solange der darauf stehende Text ebenso grafisch gestaltet ist, müsstest Du für jeden Button eine CSS-Klasse für die Verschiebung bei hover und/oder focus erstellen.
 
Das mit dem focus hab ich schon versucht, klappt irgendwie nicht, kann sein das ich z-index falsch angewendet habe oder einfach irgendwas übersehen habe.
Kannst du mir vielleicht mal so ein Beispiel-css-Code schreiben? Wäre dir sehr dankbar.
 
Du lädst die Seite denke ich mal neu?

Frage ab, auf welcher Seite du bist, und gib dem Button, der zu der derzeit aufgerufenen Seite gehört, eine Klasse 'active'. Das musst du dann aber entweder mit PHP/Perl oder JavaScript machen.

Der Nachteil bei Focus ist, dass der Button den Zustand verliert, sobald du wo anders hinklickst.
 
Nein, die Navigation wird nicht neu geladen, so fällt die Lösung mit Php weg.

AUSSER es gibt keine andere Lösung.

Php ist jetzt nicht so meine Stärke, hab nur 40 Seiten aus nem Php 4 Buch gelesen. Von daher müsstet ihr mir das dann am besten erklären.
 
Zuletzt bearbeitet:
Die grundlagen hab ich ja drauf, es geht mir nur darum wie man das alles realisieren kann. Soweit ich weiß muss man um Php nutzen zu können die Seite neu laden. Das will ich ja vermeiden.
 
Dann wäre JavaScript der Weg. Damit könnte man z.B. die passende Klasse bei dem jeweiligen Link setzen, wenn dieser angeklickt wird.

HTML: 
<a href="linkziel.html" onclick="this.className = 'aktiv';return false;">Linkbeschriftung</a>
 
Super, klappt. Aber ich habe mehrere Buttons und wie kann ich den Klassen-namen von den anderen zurücksetzen?
 
Habe nicht den gesamten Thread gelesen, aber prinzipiell etwa so:

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function () {
                $('.demo p').bind('click', function () {
                    $('.demo p').removeClass('selected');
                    $(this).addClass('selected');
                });
            });

        </script>
        <style type="text/css">

            .selected {
                background: red;
            }

        </style>
    </head>

    <body>

        <div class="demo">
            <p>Bitte anklicken</p>
            <p>Bitte anklicken</p>
            <p>Bitte anklicken</p>
            <p>Bitte anklicken</p>
            <p>Bitte anklicken</p>
        </div>

    </body>

</html>
 
Man könnte z.B. aus den Klassen des Objektes eine bestimmte Zeichenfolge entfernen - dadurch entfernt man diese Klasse. Stichwort: replace().

Man könnte auch in deinem Fall den active-Status an das <li> hängen, nicht an den Link. Wäre per CSS möglich und o.g. Code-Beispiel würde damit (leicht angepasst auf <li>) auch funktionieren.
 
Verwirrung.

Wie müsste ich das denn z.B. hierfür machen? Ich blick das überhaupt nicht xD

Code: 
.home {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 102px;
	height: 70px;
	background-repeat: no-repeat;
	background-position: 0 0;
}
.home span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-repeat: no-repeat;
	background-position: 0 -70px;
	opacity: 0;
	-webkit-transition: opacity 1.5s;
	-moz-transition: opacity 1.5s;
	-o-transition: opacity 1.5s;
}

.home:hover span {
	opacity: 1;
}

.home_active {
	display: inline-block;
	position: relative;
	text-indent: -9999px;
	width: 102px;
	height: 70px;
	background-repeat: no-repeat;
	background-position: 0 -140px;
}

.home_active span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-repeat: no-repeat;
	background-position: 0 -210px;
	opacity: 0;
	-webkit-transition: opacity 1.5s;
	-moz-transition: opacity 1.5s;
	-o-transition: opacity 1.5s;
}

.home_active:hover span {
	opacity: 1;
}

'home_active' ist natürlich das, dass nach klick benutzt werden soll. Soweit ich das jetzt verstanden habe soll einfach der Code von 'home', bei klick, mit dem von 'home_active' erstetzt werden?
 
Per JavaScript sollst Du nicht den CSS-Code ändern sondern die Einbindung der CSS-Klassen in HTML. Dein CSS-Code hilft da wenig weiter und sollte von dir auch nicht angepasst werden.
 
Achsooooooooooooooooooo..

Ich hab den Code vorher noch nie ausprobiert.
Ich werd das morgen direkt mal einbinden.

Danke :)
 
Ich habs jetzt schonmal für den ersten und letzten Button versucht ..
Irgendwie verschwindet das nicht :/

Ich hab das Gefühl, dass man das umschreiben muss, aber ich weiß nicht wie.
Das soll im Prinzip so laufen wie das mit dem roten Hintergrund.
Wenn ich jetzt aber den ersten Button anklicke und anschließend den letzten, dann bleibt der 'active'-Hintergrund beim ersten Button.

Wie muss ich das machen damit es funktioniert?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben