CSS3 Transition Tutorial - Menü mit Slide-Effekt im Apple-Style

CSS3 Transition Tutorial - Menü mit Slide-Effekt im Apple-StyleCSS-Transitions - Fliessend animierte Übergänge wie Slide-Effekte bei Webseiten-Elementen wie bspw. einem Menü zu erzeugen, wurde bisher meisten von kleinen Plugins basierend auf einem JavaScript-Framework wie jQuery umgesetzt. Die CSS3-Eigenschaft Transition ermöglicht ein solches "Bewegungsmuster", ebenso wie die hier kürzlich vorgestellte CSS3-Eigenschaft Animation, nur ohne JavaScript. Das heißt, das bspw. "Slide-Effekte" ausschließlich via CSS umgesetzt werden können. Im folgenden kleinen Tutorial wird daher beschrieben wie unter der Verwendung von Border-Radius, Gradient ( Farbverlauf via CSS ) und Transtion, dieser Slide-Effekt in wenigen Schritten ohne JavaScript und ohne Grafiken, ausschließlich mit CSS(3) realisiert werden kann.

Modernes Webdesign mit CSS - Das neue Buch!

CSS3 Transition Menu - Step 1: Definieren der HTML-Struktur

Das HTML-Grundgerüst dieses Accordion-Menüs behinhaltet drei fiktive Menüpunkte ( Brand, Promotion, Event ) verwendet, die interessierten CSS-Anwendern vielleicht bereits aus den vorhergehenden CSS3-Tutorials bekannt sind. Die zu den verlinkten Überschriften gehörenden Inhalte werden in Paragraphen abgelegt.

CSS3 Transition
...
<div class="accordionMenu">
  <h1>Accordion Menu</h1>
  <div id="brand" class="menuSection">
    <h2><a href="#brand">Brand</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,...</p></p>
  </div>
  <div id="promotion" class="menuSection">
    <h2><a href="#promotion">Promotion</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,...</p></p>
  </div>
  <div id="event" class="menuSection">
    <h2><a href="#event">Event</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,...</p></p>
  </div>
</div>
...

Die daraus resultierende Abbildung sieht, ohne CSS, noch relativ unspektakulär aus.

CSS3 Tutorial - HTML-Struktur des Accordion-Menüs
Abb. 1: CSS3 Tutorial - HTML-Struktur des Accordion-Menüs

CSS3 Transition Menu - Step 2: Anlegen der Hintergrundfarbe der Navigation

Die ersten CSS-Arbeiten sind noch eher unspektakulär, denn im zweiten Arbeitsschritt werden erst einmal Schrifteigenschaften und ein paar Innen, sowie Außenabstände für die Elemente dieses kleinen CSS3-Tutorials festgelegt. Die erste in diesem Tutorial verwendete CSS-Eigenschaft ist text-shadow ( siehe Zeile 13 & 24 ). Eine CSS-Eigenschaft die im Vergleich zu späteren CSS3-Eigenschaften ohne jeglichen Suffix wie bspw. -moz-, -webkit- oder -o- auskommt. Der Aufbau dieser Eigenschaft ist hierbei denkbar einfach. Der hier erste Wert von 2px gibt den Versatz des Schattens von links an, der zweite die Verrückung nach unten, der dritte Wert definiert den Grad der Unschärfe des anzuziegenden Schattens. Der letzte Wert entspricht dann der Farbe des zu verwendenden Schattens.

CSS3 Transition
.css3Tutorial {
.accordionMenu {
  font: 12px Arial, Verdana, sans-serif;
  color:#424242;
  background: #fff;
  padding: 10px;
  width: 500px;
  margin:0;
}
.accordionMenu h1 {
  margin:0;
  font-size: 20px;
  text-shadow: 2px 2px 2px #aeaeae;
}
.accordionMenu h2 {
  margin:5px 0;
  padding:0;
}
.accordionMenu h2 a {
  font-size: 13px;
  display: block;
  font-weight: normal;
  color:#424242;
  text-shadow: 2px 2px 2px #aeaeae;
  text-decoration:none;
  margin:0;
  padding:10px;
  background: #8f8f8f;
}

Wichtig ist vorallem die hier in diesem zweiten Arbeitsschritt definierte letzte Eigenschaft. Auch wenn die Festlegung der Hintergrundfarbe der verlinkten Überschrift alles andere als beeindruckend ist, sollte sie an dieser Stelle nicht vergessen werden! Denn im weiteren Verlauf wird diesem Element via CSS ein Farbverlauf ( Gradient ) zugewiesen, da aber nicht alle Browser CSS-Farbverläufe unterstützen, sollte "background: #8f8f8f" als Fallback für diese Browser herhalten. Denn die später beim Hover-Effekt verwendete Farbe weiß, wäre ohne eine entsprechend kontrastreiche Hintergrundfarbe schlecht sichtbar.

CSS3 Transition Tutorial - Darstellung des verwendeten Text-Schatten
Abb. 2: CSS3 Transition Tutorial - Darstellung des verwendeten Text-Schatten

CSS3 Transition Menu - Step 3: Anlegen der Farbverlaufes und der "Runden Ecken" der Überschrift

Im diesem Schritt wird mit der Farbverlaufseigenschaft ( Gradient ) der oben festgelegte Wert der Hintergrundfarbe von den Browsern die diese diese Eigenschaft bereits interpretieren können, überschrieben. Der Aufbau dieser Eigenschaft, ist ebenso wie der des Text-Schattens denkbar einfach. Hierzu wird der Ausgangspunkt des Farbverlaufes definiert, im Falle der Webkit-betriebenen Browser wird auch Richtungsart ( linear ) angegeben. Wie auch bei der Erstellung einer Grafik mit Farbverlauf üblich, muss auch im Falle von CSS, ein Anfangs- ( erster Wert ) und ein Endwert ( zweiter Wert ) in Form eines Hexadezimalwertes festegelgt werden.

CSS3 Transition
.accordionMenu h2 a {
  ...
  background: -moz-linear-gradient( top, #cecece, #8f8f8f);

  background: -webkit-gradient
  (linear, left top, left bottom, from(#cecece), to(#8f8f8f));

  filter: progid:DXImageTransform.Microsoft.gradient
  (startColorstr=#ffcecece, endColorstr=#ff8f8f8f);

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
  (startColorstr=#ffcecece, endColorstr=#f8f8f8f)";

  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius: 5px;
}

Microsoft unterstützt die CSS3-Eigenschaft des Farbverlaufes überraschenderweise nicht, allerdings bieten die Redmonder mit dem Gradient Filter eine Lösung dieses Problems an. Wobei die Eigenschaft "filter" von Zeile 8 und 9 für IE5.5 bis IE7 gilt und der -ms-filter für IE8. Zum Abschluss wird den Überschriften, die die Menüpunkte darstellen noch ein Border-Radius von 5px zugewiesen.

CSS3 Transition Tutorial - Darstellung des 
Farbverlaufes und der runden Ecken
Abb. 3: CSS3 Transition Tutorial - Darstellung des Farbverlaufes und der runden Ecken

CSS3 Transition Menu - Step 4: Definieren der Menüpunkte für den Hover-Effekt

Im folgenden Schritt werden für den Hover-Effekt entsprechende Hintergrund-Eigenschaften festegelgt. Um dies entsprechend auffällig zu tun, wird wie in der Abbildung beim Menüpunkt "Promotion" neben dem wechselnden Hintergrundverlauf für diesen Zustand, auch die Schriftfarbe verändert.

CSS3 Transition
.accordionMenu :target h2 a,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:active {
  ...
  background: #2288dd;
  background: -moz-linear-gradient( top, #6bb2ff, #2288dd);

  background: -webkit-gradient
  (linear, left top, left bottom, from(#6bb2ff), to(#2288dd));

  filter: progid:DXImageTransform.Microsoft.gradient
  (startColorstr=#ff6bb2ff, endColorstr=#ff2288dd);

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
  (startColorstr=#ff6bb2ff, endColorstr=#ff2288dd)";

  color:#FFF;
}

Mit der noch im weiteren Verlauf dieses Tutorials zum Einsatz kommenden Pseudoklasse :target ( siehe Zeile 1 ), werden dem jeweils aufgeklappten Menüpunkt die gleichen farblichen Veränderungen des Hintergrundes zugewiesen, wie beim Hover-Effekt auch.

CSS3 Transition Tutorial - Darstellung des Farbverlaufes und der runden Ecken beim Hover-Effekt
Abb. 4: CSS3 Transition Tutorial - Darstellung des Farbverlaufes und der runden Ecken beim Hover-Effekt

CSS3 Transition Menu - Step 5: Slide-Effekt-Eigenschaften mit "Transition" festlegen

Jetzt kommen wir zu der CSS3-Eigenschaft die erst dem Entstehen dieses Tutorials geführt hat. CSS-Transistion ermöglicht, wie bereist eingangs erwähnt fliessend animierte Übergänge. In diesem Fall soll sie dem Menü einen Slide-Effekt zuweisen. Das heißt, beim Klick auf die Menüpunkte werden die dazugehörigen und in den Textabsätzen befindlichen Texte ein- bzw. ausgeblendet. Wer diesen Content auch für IE-Nutzer sichtbar machen möchte, muss den hier auf Null festgelegten Wert der Hühe auf das gewünschte Maß für die Texthühe anpassen. Da beim IE dieser Auf- und Zuklappmechanismus nicht funktioniert und die Inhalte für Nutzer dieses Browsers trotzdem zugängig sein sollten, sollte für sie bsp. via Conditional Comments eine Anpassung der Höhe vorgenommen und angeboten werden.

CSS3 Transition
.accordionMenu p {
  padding:0 10px;
  margin:0;
  height: 0;
  overflow: hidden;
  -moz-transition: height 0.5s ease-in;
  -webkit-transition: height 0.5s ease-in;
  -o-transition: height 0.5s ease-in;
  transition: height 0.5s ease-in;
}

Die Eigenschaft Transition kann auf die verschiedensten Bereiche angewendet werden um "Bewegung" zu erzeugen. In Fall dieses Tutorial-Beispiels werden die nach den Menüpunkten befindlichen Textabsätze ein- bzw. ausgeblendet. Hierzu muss zum einen die Höhe für den Ausgangswert ( zugeklappt ) auf Null gesetzt werden und die Inhalte des des p-Tags die aus diesem Bereich herausragen würden, abgeschnitten werden. Kommentiert overflow: hidden einfach mal aus, dann seht ihr was damit gemeint ist. Funktionieren tun diese auf dem CSS Transitions Module Level 3 basierenden Eigenschaften momentan allerdings nur mit Webkit-betriebenen Browsern wie Safari und Google Chrome, aber auch die aktuelle 10.5er Opera-Version, als auch die noch in der Entwicklung befindlichen Version 3.7a 1 des Firefox unterstützen CSS-Transitions.

CSS3 Transition Tutorial - Slide-Effekt Transition festlegen
Abb. 5: CSS3 Transition Tutorial - Slide-Effekt "Transition" festlegen

CSS3 Transition Menu - Step 6: Höhe für den Slide-Effekt mit Pseudoklasse :target festlegen

Im letzten Schritt dieses für euch hoffentlich interessanten Tutorials, wir die Höhe des einzublendenden Bereich festgelegt. Möglich wird dies durch die Pseudoklasse :target. Verweist jemand direkt auf ein Zielelement ( im diesem Fall auf #brand, #promotion und #event ) kann darüber das entsprechende Element ( in diesem Fall der p-Tag samt Inhalt ) über :target ein- bzw. ausgeblendet werden. Die Eigenschaft "overflow" und der dazugehörige Wert "auto" erzeugen wie in der Demo-Version dieses Tutorials zu erkennen ist, einen möglichen Scrollbalken, falls der Inhalt innerhalb des p-Tags nicht in 100px Höhe "hineinpasst".

CSS3 Transition
.accordionMenu :target p {
  overflow: auto;
  height:100px;
}

Ohne die Angabe des Wertes für die Höhe von 100px, wird sich im Verhalten des Menüs nicht viel ändern und ihr er- bzw. behaltet eine Darstellung die der Abbildung 5 entspricht.

CSS3 Tutorial - Höhe für den Slide-Effekt mit Pseudoklasse :target festlegen
Abb. 6: CSS3 Tutorial - Höhe für den Slide-Effekt mit Pseudoklasse :target festlegen

Internet Explorer - No Transition, no Slide-Effect!

Da vom Internet Explorer sowohl die Pseudoklasse :target, als auch die CSS3-Eigenschaft "Transistion" nicht unterstützt werden und auch der Farbverlauf innerhalb der verlinkten Überschrift lediglich aufgrund eines Microsoft-Filers ( siehe Step 3 & 4 ) realisiert werden kann, verwundert es sicherlich nicht, dass jenes Resultat welches der Browser seinen Nutzern präsentiert, ein eher bescheidenes Ergebnis liefert.

CSS3 Accordion Menu - The Demo

Wenn der Browser mit dem du dieses CSS3-Tutorial besuchst Eigenschaften wie die hier vorgestellten CSS3-Transistions unterstützt, dann dürfte die folgende Darstellung des CSS3 Menu in etwa Abbildung 6 entsprechen:

View Tutorial Demo

Fazit

Diejenigen von Euch, die die erwähnten Browser verwenden, besitzen mit dieser CSS3-Eigenschaft nun einen Ansatz den "Slide-Effect" für entsprechende Inhalte von Webseiten ohne Grafiken und JavaScript umsetzen zu können!

Ähnliche Artikel zum Thema CSS3:
  1. Felix de Ruiter
    05 Mär 2010, 11:03

    Sehr gutes Tutorial und vor allem erstklassige Idee!

    Es tut zwar etwas weh, diese FIltergeschichte, aber ich glaube, wenn hier niemand eine Vorreiterrolle einnimmt (auch bei invalidem CSS-Code), wird sich auch in 5 Jahren nichts tun. Vielleicht baue ich das auf meiner Website ein. : )


  2. Markus 05 Mär 2010, 14:02

    Kann mich Felix nur anschließen, klasse Tutorial das zum Nachmachen einlädt! Als User der mit Safari unterwegs ist, bleibt mir das bescheidene Ergebnis des IE's erspart ;o)


  3. Rolf 05 Mär 2010, 14:32

    Ich habe es gerade mal im Chrome probiert, da funktioniert es einwandfrei. Im Firefox funktioniert die Bewegung leider noch nicht, daher ist es eher ein Feature, das ich mir für die Zukunft merke. Danke für das schöne und übersichtliche Tutorial :-)


  4. Webstandard-Team
    05 Mär 2010, 15:43

    @Rolf: Wie im Artikel erwähnt, funktioniert die verzögerte Eigenschaft transition in der beschriebenen Alpha Version 3.7, sowie in Opera 10.5. Der Auf- und Zuklappmechanismus funktioniert aber auch in älteren Firefox-Versionen. Welche Version nutzt du?


  5. Rolf
    05 Mär 2010, 17:55

    Ich benutze Firefox Version 3.6. Es klappt auch auf und zu, aber ohne Animation. Hattest du es so gemeint?


  6. max
    08 Mär 2010, 00:51

    sehr gutes Tutorial, aber für den praktischen Einsatz leider noch nicht geeignet, oder seh ich das falsch? würde so eine navi gerne auf http://www.schnaeppchenfuchs.com einsetzen...


  7. Webstandard-Team
    08 Mär 2010, 08:06

    @Max: Da ein sicherlich nicht unbeachtlicher Anteil der Besucher der von dir erwähnten Seite Nutzer des Internet Explorers sein werden, ist der Einsatz einer solchen Navigation dort sicherlich nicht zu empfehlen. Dieses Tutorial soll auch erst einmal einen Ausblick auf das gewähren, was in Zukunft ( hoffentlich auch mit dem IE ) möglich sein wird.


  8. D4rk 09 Mär 2010, 07:51

    Danke für dieses Tutorial. Mir gefällt es wirklich sehr gut, was man bald alles allein per CSS realisieren kann. An dieser Demo stört mich eigentlich nur, dass man es nicht wieder komplett schließen kann, oder liegt das auch am Browser? Bin grad mit FF 3.6 da...


  9. Webstandard-Team
    09 Mär 2010, 08:47

    @D4rk: Nein, dass liegt leider nicht am Browser. Als Alternative könnte man aber bspw. einen Link außerhalb der Menüpunkte positionieren und dann über den Link mit dem das Tutorial aufgerufen wird, wieder den Ausgangspunkt herstellen womit wieder alle Menüpunkte geschlossen wären.


  10. Felix de Ruiter
    27 Mär 2010, 15:46

    In Kombination mit dem :not-Selektor funktioniert das ganze (ohne Ein- und Ausklappen und Animationen) im IE.

    Quelle: http://hyperkontext.at/weblog/artikel/css-target-tab-navigation-aus-sprunglinks-in-ueberschriften/


  11. Seraina 28 Mär 2010, 21:36

    super Tutorial! echt genial gemacht und dies ganz ohne JS. cool
    nun wollte ich aber ein Bild in meinen Text einfügen und dies wird aber nicht ausgeblendet... hm.. hat da jemand eine lösung?


  12. Dan 06 Apr 2010, 15:39

    Sehr geniales Tutorial.

    Ich hab noch das Problem das er mein Javascript (simpleviewer wird damit angesprochen) da dann leider vorangig behandelt und somit die galerie ausgeklappt bleibt sozusagen. Evtl einen tipp dafür parat? Die Höhe des Java/Flashviewers muss ja angegeben sein...

    Grüße


  13. Frank 08 Mai 2010, 11:14

    Super Sache,

    schade nur das IE das auf/zu-klappen so garnicht unterstüzt. Aber für den könnte eine Browserweiche und eine (allt)ernative mit java bis es vielleicht mal geht abhilfe schaffen.
    Die Aussicht das FF die Animation ab 3.7 machen soll ist doch was.

    Gibt es eigentlich auch eine Aussicht wann Opera den Farbverlauf unterstützen soll?


  14. TGK 09 Mai 2010, 12:28

    Wow klasse Tutorial. Bin begeister, dass sowas ganz ohne JS funktioniert.
    Werde es in meiner nächsten Seite mal ausprobieren.
    Gibt es für den IE irgendwann diese "Aufklappunterstützung" - da ja noch die meisten User leider den IE benutzen.
    Als vielen Dank und weiter so.
    Viele Grüße


  15. MB 12 Mai 2010, 10:41

    Ein sehr gutes Tutorial.


  16. Frank 14 Mai 2010, 19:34

    Ich habe mit den Conditional Comments für IE bei der Anpassung der Höhe ein Problem.
    Scheinbar erkennt der IE den Kommentar in der css-datei nicht.

    .accordionMenu ul {
    padding-left: 0px;
    margin:0px auto;
    list-style-position: inside;
    list-style-type: none;
    height: 0;
    overflow: hidden ; /* hidden - sorgt dafür das seite ans ende springt */

    -moz-transition: height 0.5s ease-in;
    -webkit-transition: height 0.5s ease-in;
    -o-transition: height 0.5s ease-in;
    transition: height 0.5s ease-in;
    }

    habe ich da einen Fehler drin?


  17. Frank 25 Mai 2010, 16:54

    Ich habe dies tolle Tutorial genutzt um meine Navigation JS-frei umzusetzen.
    Und mit einem Link wie z.B.

    index.php?Bereich=medien&Art=Buecher&Inhalt=die_vermieterin&#Bücher

    kann ich auch dafür sorgen das diese Navigation nach dem erneuten laden wieder aufklappt. Doch dabei Springt (weil es sich wir mir scheint um einen # = Anker handelt.
    Ich habe schon ausprobiert die Reihenfolge z.B.

    index.php?#Bücher&Bereich=medien&Art=Buecher&Inhalt=die_vermieterin

    der mit der URL übergebenen Varialblen zu verändern. Und # gegen id=Bücher auszutauschen. Doch entweder läuft dann wie bei der Reihenfolge garnichts mehr oder die Navigation klappt nicht mehr an der Stelle auf.

    Hintergrund für diese Versuche ist das dass springen etwas störend ist.
    Da die gesammte Seite (scrollbar) hochspringt.
    Und ein fixiren nicht möglich ist da sonst Teile der zum Teil recht langen Navigation nicht mehr einsehbar ist.

    Meine Frage also gibt es nach dem erneuten Laden der Navigation eine Möglichkeit diese wieder an der Stelle aufzukappen an der sie vor dem Klick war ohne das die Seite dort hin springt?

    P.S: Leider kann ich keine Link zur Website angeben, da diese noch auf dem virtuellen Server in der Entwicklung ist.


  18. AKamleiter
    23 Jun 2010, 14:07

    Sehr schönes Tutorial. CSS3 ist ja echt eine feine Sache. Habe selbst schon ein bisschen mit den Schatten und abgerundeten Ecken herum gespielt.
    Schade, dass es im IE noch nicht unterstützt wird :-(

    Aber trotzdem ein toller Artikel. Weiter so!


  19. Ruhrgebiet Typ 27 Aug 2010, 16:59

    Ich frage mich wann denn mit einer Implementierung von CSS3 beim Internet Explorer zu rechnen ist. Ich hoffe mal, dass die von ihrem elitären Ross langsam absteigen und sich an Webstandards halten. Ich glaub aber auf Dauer werden die sich schneller anpassen weil sonst die Nutzer immer mehr auf alternative Browser wechseln. Ansonsten aber sehr schönes Tutorial!


  20. Webseitenanalytiker
    07 Dez 2010, 13:28

    Vielen Dank für dieses gute CSS Tutorial.

    Mit der Gefahr als kleinlich betrachtet zu werden: Mir ist bei der Analyse Eurer Webseite auf Rechtschreibung ein kleiner Fehler im Link aufgefallen: siehe Step 5: "CSS-Transistion". Es müßte wohl heißen: "CSS-Transition". ;)


  21. Susi 07 Dez 2010, 14:16

    Das ist echt eine tolle Sache, aber solange das nicht Standard für alle Browser ist, lohnt sich die Umsetzung ja gar nicht, immerhin ist man ja nicht der alleinige Nutzer seiner Website. Ich halte auf jeden Fall die Augen offen für das Thema CSS3!


  22. mandy
    29 Dez 2010, 21:24

    Genau so ein Menü habe ich gerade gesucht im Netz. Danke :-)


  23. Bernd
    04 Mär 2011, 09:36

    Sieht sehr gut aus. Schöner wäre es noch wenn nach dem Klick der Text auch wieder verschwindet.


  24. Farbundstil 23 Mai 2011, 11:55

    Super Tutorial. Vielen Dank


  25. Björn Zimmermann 09 Jun 2011, 00:25

    Einen Haken hat das ganze aber gegenüber JS und co:

    Der Zurückbutton des Browsers nimmt jeden Klick als eigenständigen Schritt auf. So muss man, wenn man in dem Beispiel ein paar mal die Slider probiert hat, auch entsprechend oft zurück klicken.
    Das dürfte für viele User noch ungewöhnlich und nervig sein.

    Aber sonst echt ne klasse Sache, vielen Dank für den Artikel


  26. Michael Kalmutzki 01 Jul 2011, 07:06

    Gibt es eine Chance, dieses System in Joomla zu integrieren? Für Tipps oder Anleitungen wäre ich extrem dankbar.


  27. Michael Kalmutzki 01 Jul 2011, 15:41

    Ich habe es mittlerweile in hinbekommen, das Ganze in Joomla zum laufen zu bringen, indem ich einfach den CSS-Part in die CSS-Datei des verwendeten Themes eingebaut und dann den HTML-Teil in meinem Artikel verwendet habe. Jetzt habe ich aber ein anderes Problem und zwar würde ich gerne die Höhe des ausklappenden Textblocks immer auf 100% haben, also so, dass der gesamte Text ohne Scrollbalken angezeigt wird. Wenn ich allerdings bei

    .accordionMenu :target p {
    overflow: auto;
    height:100px;
    }

    height auf 100% setze zeigen mir weder Firefox, noch Chrome, noch Safari, noch Opera das Menü richtig an, bzw. das Menü und der Text werden angezeigt, aber die sanfte Animation funktioniert nicht mehr. und das gleichzeitige ein- und ausklappen seiht auch komisch und hakelig aus. Vorschläge?


  28. jnz31
    05 Jul 2011, 17:39

    @björn z
    das der zurückbutton ebenfalls teil des spiels ist, liegt daran, dass jeder button auch einen anker mitliefert. lässt man den weg, ändert sich auch nicht die url und es dürfte auch in der history nichts passieren..

    @michael k
    mal height: auto; ausprobiert..?


  29. jnz31
    05 Jul 2011, 17:45

    ich rede in beiden fällen mist, sorry.


  30. bpgs 15 Jul 2011, 13:49

    Eine der vielen gehaltvollen Anleitungen auf dieser Website. Danke !!!


  31. Yury 18 Jul 2011, 18:20

    Eine Super-Sache.

    Mich stört jedoch noch der Scrollbalken, welcher beim "Aufbau" kurzzeitig angezeigt wird. Ohne diesen wäre das Ganze noch ein Stück feiner..


  32. Toni 07 Sep 2011, 11:52

    Hey Leute,

    hat einer eine Idee! Das sollte doch zumindest auch ohne animation im IE funktionieren oder? So dan Nutzer wenigstens den Inhalt sehen können!

    Wäre für hilfe dankbar, übrigens super Sache!


  33. Polovnjaci 14 Sep 2011, 23:12

    Sehr gutes Tutorial, aber für den praktischen Einsatz leider noch nicht geeignet, oder seh ich das falsch?


  34. T-Rex 13 Okt 2011, 12:44

    So hab auch viel Senf zum dazu geben :).
    Im großen und ganzen ist das ein super Tutorial und zeigt hervorragend was man mit Transition machen kann.

    Es gibt aber diverse Schwachstellen.
    Der Anker wurde ja öfters angesprochen. Man kann ihn zwar weglassen, dann funktioniert das auf und zu klappen nicht mehr. Das ist ja auch logisch, da die Änderung (also das auf und zu klappen) auf den :target Selektor beruht.

    Eine andere Schwachstelle ist, dass man keine zwei unabhängige Menüs auf einer Seite erstellen kann. Wenn sich das :target ändert klappen alle Menüs zu, die nichts mit diesem :target zu tun haben. Auch können keine zwei Punkte in einem Menü offen bleiben.

    Mein Fazit ist, dass so ein Menü auf kleinen Hilfeseiten z.B. Handbucher durchaus verwendet werden kann. Auf größeren Webseiten ist es ein wenig zu unflexibel.

    Aber wie gesagt, es demonstriert super die Anwendungsmöglichkeiten von Transition!

    Gruß
    hat etwas gelernt
    T-Rex


  35. ferdi
    14 Okt 2011, 13:32

    Hab mal ne frage: kann ich anstatt dem text (also 'p') auch ein div-container einsetzten?
    hab schon vieles versucht, klappt aber irgendwie nicht.


  36. Ulrich 24 Okt 2011, 10:42

    Dieser Effekt ist einfach nur klasse. Den werde ich auf jeden Fall einmal ausprobieren. Nach so welchen Tutorials suche ich gerne.
    Das hier ist sehr gut beschrieben und übersichtlich. Weiter so.
    Ein wirklich großes Plus an dem Tutorial ist die Schritt-für-Schritt Anleitung. So können auch ungebübte den Inhalt gut nachvollziehen.


  37. marcuswelvis
    03 Nov 2011, 18:35

    ich danke Ihnen sehr für den Posten, wirklich interessant dank


  38. Andi 17 Nov 2011, 14:28

    Danke für den Artikel, er hat mir wirklich sehr weitergeholfen!


  39. Ulhrich 17 Nov 2011, 14:32

    Hi,

    obwohl ich immer alles mit JQ fabriziert habe bin ich nie auf den Gedanken gekommen, hier das mal auszuprobieren mit css3. Als ich der Anleitung folgte viel mir aber auf, dass das leider nicht für IE7 funktioniert. Alternativen sind natürlich besser, aber dennoch eine gute Idee,

    Danke


  40. Sebastian 20 Nov 2011, 11:01

    Hallo,

    tolles Tut, leider funktioniert es bei mir nicht. Bin der Anleitung gefolgt und habe versucht es direkt in eine Wordpress Seite einzubinden. Bei mir wird nur ein Teil des Textes verdeckt und der gewünschte slide bleibt auch aus.

    Woran könnte das liegen?


  41. fimbim 16 Dez 2011, 09:30

    Perfekt. Funktioniert und sieht super aus! Scheiss auf den Internetexplorer. Mit nem Hack funktioniert´s da auch, aber eigl. bin ich es auch Leid da immer nachjustieren zu müssen… 


  42. Will
    20 Feb 2012, 15:57

    Tolles How-To. CSS3 bietet wirklich tolle Funktionen. Hoffentlich setzen sich die neuen Browser schnell durch so das man ohne Bedenken die eigene Website umstellen kann.


  43. Reiseziele Hans
    19 Mär 2012, 12:17

    Perfekt. Das habe ich gesucht - und nach langem hin und her gefunden - der Farbverlauf UND gleichzeitig runde Ecken. Jetzt muß ich die Seite nur noch fertig bringen. Ein paar Mosaiksteinchen habe ich noch vor mir. Such z.B. noch "klappbare Menülisten", wenn wer was weiss...


  44. Karwendel Matthias 05 Mai 2012, 11:20

    Das mit den "klappbaren Menüleisten" von Hans ist noch ungelöst. Weiß jemand weiter???


  45. Thomas webtu 06 Jul 2012, 16:29

    Ein Akkordeon Menü ist immer wieder eine gute Wahl, wenn man nicht viel Platz auf der Seite hat. Eine sehr ausgearbeitete Anleitung mit vielen Erläuterungen, die ihres gleichen sucht und die ich gern verlinken möchte.
    Vielen Dank dafür und beste Grüße Thomas


  46. Michael 11 Jul 2012, 22:26

    Herzlichen Dank für den, sogar für mich als Web-Laien, verständlichen Text. Werde das gleich kurzfristig umsetzen lassen.
    Michael


  47. Michael 05 Sep 2012, 15:19

    Der Hover Effekt macht wirklich was her - danke für die Anleitung!


  48. Lars Richter 10 Okt 2012, 20:32

    Hallo!
    Erstmal: Riesiges Tutorial! Macht wirklich was her, und da ohne CSS auch Adminfreundlichen :)

    Eine Frage bzw. ein kleines Problem habe ich jedoch. Ist es möglich die Seite so aufzurufen, das bereits ein "Menüpunkt" offen ist? Ich hab jetzt etwas experimentiert, jedoch keine praktikable Lösung gefunden.

    Falls du die Zeit hast, würde ich mich über eine Antwort sehr freuen!

    Vielen Dank!

    MfG

    lars


  49. Maximilian 31 Okt 2012, 09:05

    Hallo zusammen,
    besten dank erst mal für dieses ausführliche Tutorial.
    Mir ist jetzt einiges klarer geworden und kann nun wieder strukturiert an die Arbeit gehen.
    Schöne Grüße und nochmals vielen Dank


  50. Julian Post 05 Okt 2013, 03:28

    Hallo und danke für die super Anleitung.

    wo genau kopiere ich den CSS Code hin? oder ist das egal wohin das in der style.css kommt?
    Leider funktioniert es nicht.

    In dem anderen Grundlagen-Tutorial bekomme ich es ohne weiteres hin.

    Vielen Dank für eure Hilfe


  51. moal 14 Nov 2013, 13:48

    Hallo zusammen,

    ein sehr schönes Tutorial. Im hier beschriebenen Zustand in Lichtgeschwindigkeit einzubauen... super!
    Leider suche ich seit geraumer Zeit nach einer etwas ausgefeilteren Lösung und hoffe man kann diese hier vielleicht ein wenig modifizieren? Fragen kostet nix... :)

    Ich würde diese Menü gern als Navigationsleiste nutzen, was vom Grundsatz auch kein großes Problem darstellt.
    Allerdings hat man bei einer Navigation ja nicht unbedingt zu jedem Menü-Punkt Unterpunkte, so dass es ab und zu notwendig wäre, die fiktiven Menüpunkte zu aktiven Menüpunkten zu machen. Sprich, wenn keine Unterpunkte vorhanden sind müsste ich den sogenannten fiktiven Menü-Punkt direkt verlinken.
    Auch das bekomme ich noch hin, allerdings habe ich dann das Problem, dass sich ein eventuell aufgeklapptes Untermenü bei Klick auf diesen aktiven Menüpunkt nicht wieder schließt.
    Kann man das in irgendeiner Weise ändern?

    l.g. moal


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage