Navigation mit Sprite: Sanftes Überblenden?

[Jens Pielawa]

Liebe CSS-Kenner,

ich habe mit etwas Anleitung eine Sprite-Menüführung hinbekommen, die auch funktioniert (Baustelle neu.hudh.de). Die Hover-Übergänge sind wie zu sehen blitzartig. Wie bekommt man nun eine sanfte Überblendung zwischen Link und Hover hin? Ich habe mit diversen Tipps mit opacity keinen Erfolg gehabt, entweder verschwinden die eingeblendeten Bilder oder mit anderen Effekten verschieben sich die Menüpunkte. Ich habe da keinen weiteren Anhalt mehr. Dies wäre auch wichtig, weil ich eventuell noch einen dritten Zustand (aktive Seite) dazudefinieren möchte.
Mein Beispiel-CSS für einen Menüpunkt (jede Seite hat eine eigene Klasse):

.main-navigation .hartmuth a, .main-navigation .hartmuth a:link, .main-navigation .hartmuth a:visited {
    background: rgba(181, 214, 231, 1) url("hudh-navi-slices.gif") no-repeat scroll -121px 0;
    width:185px;
}
.main-navigation .hartmuth a:hover, .main-navigation .hartmuth a:focus, .main-navigation .hartmuth a:active, .main-navigation .hartmuth span, .main-navigation .hartmuth.trail a {
    background: rgba(255, 255, 0, 1) url("hudh-navi-slices.gif") no-repeat scroll -121px -84px;
    width:185px;
}

[mlweb]

Das Zauberwort ist in dem Fall "transition", z.B.

.main-navigation .hartmuth a, .main-navigation .hartmuth a:link, .main-navigation .hartmuth a:visited {
    background: rgba(181, 214, 231, 1) url("hudh-navi-slices.gif") no-repeat scroll -121px 0;
    width:185px;
    transition: all 1.5s ease;

}

Nachtrag: Wobei Du grundsätzlich alle identischen Eigenschaften zusammenfassen und nur die für jeden einzelnen Punkt spezifischen einzeln zuordnen solltest.

[Spooky]

Für das background-image kann man allerdings keine Transition machen.

[tab]

Ist deshalb wohl besser ein Pseudoelement (::before oder ::after) dafür zu benutzen und dem dann den Background zuzuweisen. Für das gesamte Pseudoelement sollte sich dann die opacity per Transition ändern lassen.

[mlweb]

Für das background-image kann man allerdings keine Transition machen.

In dem Fall geht da was. Er tauscht das Bild ja nicht aus sondern verwendet ein Sprite. Animiert wird damit die Verschiebung.

Nachtrag: Ob man da jetzt noch etwas mit opacity machen könnte habe ich nicht getestet. Ich habe das sanfte Überblenden jetzt nicht direkt auf die opacity bezogen. Vielleicht ein Fehler.

[derRenner]

Hallo
ungetestet sehe ich beim sprite und transition jenes Problem, dass der neue Bildteil dann ja sichtbar verschoben wird.
Eigentlich müsste das Bild ausgeblendet werden dann verschoben um danach wieder smooth (opacity) eingeblendet werden

Gesendet von meinem LG-D802 mit Tapatalk

[Spooky]

In dem Fall geht da was. Er tauscht das Bild ja nicht aus sondern verwendet ein Sprite. Animiert wird damit die Verschiebung.

background-position kann man animieren. background-image, wie gesagt, nicht.

[tab]

Hallo
ungetestet sehe ich beim sprite und transition jenes Problem, dass der neue Bildteil dann ja sichtbar verschoben wird.
Eigentlich müsste das Bild ausgeblendet werden dann verschoben um danach wieder smooth (opacity) eingeblendet werden

Gesendet von meinem LG-D802 mit Tapatalk

Deswegen würde ich mit zwei zusätzlichen Elementen (z.B. einfach mittels ::before und ::after per CSS zu erzeugen und zu positionieren) mit unterschiedlichen Hintergründen arbeiten. Die Elemente haben jeweils nur die entsprechenden Hintergrundbilder, die man natürlich auch mittels Sprites erzeugen kann um Ladezeit zu sparen. Dann blendest du die Elemente als Ganzes eben passend aus und ein, sei es per jQuery oder mit Transitions.

[Andreas]

Du kannst dem LI den blauen Hintergrund geben und dem A den gelben. Das A setzt du auf opacity:0; und bei hover auf opacity:1; mit transition:all .2s ease 0s;.

[mlweb]

Er setzt aber zusätzlich noch auf ein unterschiedliches Hintergrundbild (Sprite Verschiebung).

[Andreas]

Das ist kein Problem. Mit "gib dem LI den blauen Hintergrund..." meine ich natürlich, dass er den Hintergrund genauso formatiert, wie er ihn jetzt hat, inkl. Bild, Position usw.

[mlweb]

Ok, das kam für mich nicht so klar rüber.

[Jens Pielawa]

Das ist kein Problem. Mit "gib dem LI den blauen Hintergrund..." meine ich natürlich, dass er den Hintergrund genauso formatiert, wie er ihn jetzt hat, inkl. Bild, Position usw.

das funktioniert dennoch nicht, man sieht immer die Sprite-Verschiebung von unten nach oben. Ich habe mal den Menüpunkt "Start" so formatiert, CSS dazu:

.main-navigation li.home {
    background: rgba(181, 214, 231, 1) url("hudh-navi-slices.gif") no-repeat scroll left top;
    width: 121px;
    opacity:1;
}
.main-navigation .home a, .main-navigation .home a:link, .main-navigation .home a:visited {
    background: rgba(181, 214, 231, 1) url("hudh-navi-slices.gif") no-repeat scroll left top;
    width: 121px;
    opacity:0;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
    -ms-transition: All 0.3s ease;
    transition: All 0.3s ease;
}
.main-navigation .home a:hover, .main-navigation .home a:focus, .main-navigation .home a:active, .main-navigation .home span, .main-navigation .home.trail a {
    background: rgba(255, 255, 0, 1) url("hudh-navi-slices.gif") no-repeat scroll 0 -84px;
    width:121px;
    opacity:1;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
    -ms-transition: All 0.3s ease;
    transition: All 0.3s ease;
}

Den Menüpunkt "Hartmuth" habe ich mit :before und :after versucht, aber ich denke mal, dass das CSS-Grütze meinerseits ist, weil es nicht funktioniert :

.main-navigation li.hartmuth {
    background: rgba(181, 214, 231, 1) url("hudh-navi-slices.gif") no-repeat scroll -121px 0;
    width: 185px;
    opacity:1;
}
.main-navigation a.hartmuth:before, .main-navigation a:link.hartmuth:before, .main-navigation a:visited.hartmuth:before  {
    background: rgba(181, 214, 231, 1) url("hudh-navi-slices.gif") no-repeat scroll -121px 0;
    width:185px;
}
.main-navigation a:hover.hartmuth:after, .main-navigation a:focus.hartmuth:after, .main-navigation a:active.hartmuth:after, .main-navigation span.hartmuth:after, .main-navigation .trail a.hartmuth:after {
    background: rgba(255, 255, 0, 1) url("hudh-navi-slices.gif") no-repeat scroll -121px -84px;
    width:185px;
    -webkit-transition: All 0.3s ease;
    -moz-transition: All 0.3s ease;
    -o-transition: All 0.3s ease;
    -ms-transition: All 0.3s ease;
    transition: All 0.3s ease;
}

Wenn's nicht geht, geht's halt nicht, dann wird es nichts mit Transition.
Ich glaube eher, dass man mit zwei horizontalen Sprites arbeiten muss.

[mlweb]

Das was Andreas vorgeschlagen hat, das funktioniert schon. Ist eine geschickte Lösung. Hier der Code (Der Übersichtlichkeit halber nur das was für diese Funktionalität benötigt wird):

.main-navigation li.home {
background: rgba(181, 214, 231, 1) url("hudh-navi-slices.gif") no-repeat scroll left top;
 }
.main-navigation .home a {
background: rgba(255, 255, 0, 1) url("hudh-navi-slices.gif") no-repeat scroll 0 -84px;
opacity:0;
transition: all 0.3s ease;
 }
.main-navigation .home a:hover {
opacity:1;
 }

Nachtrag: Du zeigst im Normalzustand das Hintergrundbild an, welches im li hinterlegt ist.
Das Hintergrundbild vom Link würde das Hintergrundbild von li überdecken und wird mit opacity=0 ausgeblendet.
Beim Hovern wird die Farbe verändert und das Hintergrundbild von a weich eingeblendet.

Mal ne andere Frage. Kann mir mal einer sagen, wie man verhindert, dass der Codeblock einen verticalen Scrollbalken bekommt.
Ich bin noch nicht dahintergestiegen wann das passiert.

[Andreas]

Mein Code dazu sähe so aus:

#top .main-navigation li,
#top .main-navigation li a {
  width: unset;
  background-color: unset;
  background-repeat: no-repeat;
  background-position: left top;
  background-image: url(http://neu.hudh.de/files/opensauce/css/hudh-navi-slices.gif);
}
#top .main-navigation li a {
  opacity: 0;
  transition: all .3s ease 0s;
}
#top .main-navigation li a:hover {
  opacity: 1;
}
#top .main-navigation li.home {
  width: 121px;
}
#top .main-navigation a.home {
  background-position: left -84px;
}
#top .main-navigation li.hartmuth {
  width: 185px;
  background-position: -121px top;
}
#top .main-navigation a.hartmuth {
  background-position: -121px -84px;
}
#top .main-navigation li.media {
  width: 118px;
  background-position: -306px top;
}
#top .main-navigation a.media {
  background-position: -306px -84px;
}
#top .main-navigation li.tour {
  width: 103px;
  background-position: -424px top;
}
#top .main-navigation a.tour {
  background-position: -424px -84px;
}
#top .main-navigation li.kontakt {
  width: 161px;
  background-position: -527px top;
}
#top .main-navigation a.kontakt {
  background-position: -527px -84px;
} 

Das #top und das unset kannst du bei dir entfernen, habe ich nur gebraucht um deine Angaben zu überschreiben.

Da sind noch 2 grobe Fehler auf der Seite. Im HEAD ist das hier:

<div id="fb-root"></div>

Und die icon-box hat verschachtelte Paragraphen:

<p><p>Einige Infos über Berlins zwei*köpfiges Loop*monster.</p></p>

[Jens Pielawa]

Mein Code dazu sähe so aus:

Danke, Andreas, den habe ich mal 1:1 eingebaut – er macht aber aktuell weder Anker noch Hover, sondern die Grafiken sind total "stumm". Das Einzige, was angezeigt wird, ist noch der Link-Textstehenbleiber des <a>.
Wenn ich den Code von mlweb versuchsweise einbaue, verschwindet der Menüpunkt "Start" ganz, der Rest wird nur als Text dargestellt.
Mir schwirrt der Kopf...

[mlweb]

Meinen Code kannst Du auch nicht 1:1 nehmen, weil ich dort zum besseren Verständnis, was der Code tuen soll nur genau die Sachen eingebaut habe, die fürs sanfte Überblenden beim Hovern benötigt werden. Du brauchst also schon noch einiges aus Deinem eigenen Code.
Funktionieren tut es mit meinem Code. Habe ich temporär im Firefox getestet.
@Andreas hat sich sogar die Mühe gemacht Deinen Code zu bereinigen und sauber zusammenzufassen.
Mal ne Frage: Verstehst Du eigentlich was der Code machen soll?

Code einfach nur zu kopieren ist immer eine schlechte Idee. Man sollte schon versuchen zu verstehen, wozu das Ganze gut ist bzw. welche Idee hinter Lösung steckt.

[Jens Pielawa]

@Andreas hat sich sogar die Mühe gemacht Deinen Code zu bereinigen und sauber zusammenzufassen.
Mal ne Frage: Verstehst Du eigentlich was der Code machen soll?

Ich bin nicht der CSS-Guru, sonst würde ich ja nicht ab und zu eine Frage stellen. Es reicht, um das Wichtigste stylen zu können. Leider sind allerdings Menüs, und gerade jetzt in diesem Fall eines mit Sprites, reichlich vertrackt und nicht immer leicht nachzuvollziehen.
Andreas gibt jedem Menüpunkt und damit auch jedem Anker die Grafik mit auf dem Weg, die dann für jede einzelne Seite verschoben wird. Anker werden grafisch unsichtbar geschaltet und sollen bei jedem Hover sichtbar werden. So weit so gut. Ich kann mir aber nicht erklären, warum dann die Anker inaktiv sind.
Ist es denn richtig, dass die Hover nur einmal definiert werden müssen?
Ganz ehrlich, ich weiß ab hier nicht mehr weiter und erkenne auch fehlende Teilchen nicht. Wenn es nicht weiter geht, baue ich den alten (offenbar aufgeblähten) Code wieder ein und verzichte dann auf einen Ease-Effekt.

Code einfach nur zu kopieren ist immer eine schlechte Idee. Man sollte schon versuchen zu verstehen, wozu das Ganze gut ist bzw. welche Idee hinter Lösung steckt.

Siehe oben: Menüführung ist nicht gerade "font-weight:bold" und fertig.

[Jens Pielawa]

OK, ich hab's offenbar jetzt, und zwar mit den "alten Teilen zusammen:

.main-navigation-wrapper {
	position: relative;
	clear: both;
	background: #B4D5E8;
        height: 84px;
	}
@media screen and (max-width: 599px) {
.main-navigation-wrapper {
	position: relative;
	clear: both;
	background: #afd6d8;
    padding-top: 0em;
    padding-bottom: 0em;
    }
}

.main-navigation {
	overflow: hidden;
	margin-left: 3.57143%;
	margin-right: 3.57143%;
	font-family: DroidSans, sans-serif;
    font-size: 0.88889em;
	font-weight: bold;
	color: #000000;
}
@media screen and (max-width: 900px) {
	.main-navigation {
		margin-right: 0;
		font-size: 0.83333em;
	}
}
@media screen and (max-width: 599px) {
	.main-navigation {
		display: none;
	}
}
.main-navigation ul,
.main-navigation li {
	margin: 0;
	padding: 0;
	display: inline;
    float: left;
}

.main-navigation ul
{
   margin:0;
   padding:0;
   list-style-type:none;
}

.main-navigation li
{
   margin:0;
   padding:0;
}

.main-navigation a,
.main-navigation span
{
   height:84px;
   display:block;
   text-indent:-3000px;
   background-repeat: none;
}

.main-navigation li.home {
background: rgba(181, 214, 231, 1) url("hudh-navi-slices.gif") no-repeat scroll left top;
width: 121px;
}
.main-navigation .home a {
background: rgba(255, 255, 0, 1) url("hudh-navi-slices.gif") no-repeat scroll 0 -84px;
opacity:0;
transition: all 0.3s ease;
}
.main-navigation .home a:hover {
opacity:1;
}

.main-navigation li.hartmuth {
background: rgba(181, 214, 231, 1) url("hudh-navi-slices.gif") no-repeat scroll -121px top;
width: 185px;
}
.main-navigation .hartmuth a {
background: rgba(255, 255, 0, 1) url("hudh-navi-slices.gif") no-repeat scroll -121px -84px;
opacity:0;
transition: all 0.3s ease;
}
.main-navigation .hartmuth a:hover {
opacity:1;
}

.main-navigation li.media {
background: rgba(181, 214, 231, 1) url("hudh-navi-slices.gif") no-repeat scroll -306px top;
width: 118px;
}
.main-navigation .media a {
background: rgba(255, 255, 0, 1) url("hudh-navi-slices.gif") no-repeat scroll -306px -84px;
opacity:0;
transition: all 0.3s ease;
}
.main-navigation .media a:hover {
opacity:1;
}

.main-navigation li.tour {
background: rgba(181, 214, 231, 1) url("hudh-navi-slices.gif") no-repeat scroll -424px top;
width: 103px;
}
.main-navigation .tour a {
background: rgba(255, 255, 0, 1) url("hudh-navi-slices.gif") no-repeat scroll -424px -84px;
opacity:0;
transition: all 0.3s ease;
}
.main-navigation .tour a:hover {
opacity:1;
}

.main-navigation li.kontakt {
background: rgba(181, 214, 231, 1) url("hudh-navi-slices.gif") no-repeat scroll -527px top;
width: 161px;
}
.main-navigation .kontakt a {
background: rgba(255, 255, 0, 1) url("hudh-navi-slices.gif") no-repeat scroll -527px -84px;
opacity:0;
transition: all 0.3s ease;
}
.main-navigation .kontakt a:hover {
opacity:1;
}

Ich möchte eigentlich nur noch die jeweils aktive Seite mit einem anderen (dritten) Hintergrund markieren (#006699), und versuche:

.main-navigation .home a.trail {
background: rgba(0, 102, 153, 1) url("hudh-navi-slices.gif") no-repeat scroll left top;
opacity:1;
}

Das klappt nicht. Wieder viel trial and error, obwohl ich es mir von anderen Codes abgucke.
[/CODE]

[folkfreund]

.main-navigation .home a.trail {
background: rgba(0, 102, 153, 1) url("hudh-navi-slices.gif") no-repeat scroll left top;
opacity:1;
}

Hat dein Menü mehrere Ebenen?
Einen Link, den du per "a.trail" addressieren kannst, gibt es nur, wenn du dich auf einer Unterseite befindest. Auf einer Seite der obersten Ebene wird nur ein

<span class="active submenu">Seite xyz</span>

generiert. Schau einfach mal mit den Entwicklertools deines Browsers nach.
Vielleicht reicht es, deinen Code so anzupassen:

.main-navigation .home span.active, 
.main-navigation .home a.trail {
background: rgba(0, 102, 153, 1) url("hudh-navi-slices.gif") no-repeat scroll left top;
opacity:1;
}

Falls du 2 Unterebenen in deinem Menü hast, dann gibt es sowohl im .level_1 wie auch im .level_2 ein "a.trail", wenn du dich auf einer Seite der 2. Unterebene befindest. Also Achtung! Das spielt natürlich keine Rolle, wenn dein Menü einfacher ist.

[Jens Pielawa]

Hat dein Menü mehrere Ebenen?

Nein, dafür hat die Seite zuwenig Inhalt. Aber danke Dir für den Hinweis mit dem <span>, das hat es jetzt zusätzlich gebracht.
Nun ist dieses Menü-chen mit fünf Hauptpunkten exakt so, wie ich es mir vorgestellt habe. Es war ein langer Weg und ich danke allen. CSS in Menüs ist und bleibt ein langwieriges Werk, besonders wenn man fertige Template-CSS abändern möchte.

[folkfreund]

Wie schön, dass es funktioniert!

Ansonsten kann ich dir nur ans Herz legen: schau einfach mal mit den Entwicklertools deines Browsers nach. Da siehst du genau, welche CSS-Regeln bei einem Element greifen und kannst sogar online Änderungen ausprobieren. Der Lerneffekt ist enorm!

Schöne Ostern, folkfreund

[Jens Pielawa]

Hallo Folkfreund,

die Benutzertools sind mir ja bekannt, und die benutze ich auch. Allerdings scheint es manchmal so zu sein, dass man, wenn man vor einem Problem steht, immer das Naheliegendste vernachlässigt und nach anderen Wegen schielt, auf denen man sich dann verrennt.

[Andreas]

Schade, dass ich nicht da war. Das war bestimmt nur ne Kleinigkeit, warum das nicht funktioniert hatte.

Ja, dass ist richtig, dass da nur ein Hover ist. Die Menüpunkte sind ja alle bereits "fertig". Die LIs haben das blaue Hintergrundbild und die As das gelbe. Das einzige was also noch gemacht werden musste ist, das A, welches ja transparent ist, bei hover opak zu schalten.