Wie kann ich das hier nachbauen (siehe Link)?

[ezekiel23]

Hallo,

ich finde das hier ganz cool um einen Ablauf auf meiner Website zu veranschaulichen (). Da ich aber aus dem SEO-Sektor komme, ist die Idee aus Usability-Sicht wirklich nicht schlecht aber rein technisch betrachtet kaum zu unterbieten (jeder Schritt eine eigene HTML-Seite = Duplicate Content).

Meine Frage: Ist es besser dies mit jQeury umzusetzen und gibt es dafür (oder für ähnliche Ideen) bereits fertige Skripte (bin leider kein Webdesigner).

Danke für eure Hilfe.

 

[leveler]

AW: Wie kann ich das hier nachbauen (siehe Link)?

Du könntest das mit Tabs umsetzen, schau mal hier
http://jquerytools.org/demos/tabs/index.html

 

[Duddle]

AW: Wie kann ich das hier nachbauen (siehe Link)?

Du meinst sicher die klickbaren Schritte der Energieberatung. Das sind quasi nur Tabs.

Das Prinzip dahinter ist einfach: alle Inhalte stehen in Blöcke unterteilt auf der gleichen Seite, werden aber versteckt. Wird ein Tab angeklickt, wird der dafür passende Block angezeigt.

An sich ist das mit JS kein großes Ding, aber warum das Rad neu erfinden wenn es gute Lösungen in Form von Bibliotheken gibt, zum Beispiel die Tabs von jQuery UI, die du nur noch stylen musst.


Duddle

 

[ezekiel23]

AW: Wie kann ich das hier nachbauen (siehe Link)?

Danke für eure Antworten.

Wie kann ich denn die Tabs stylen, dass die aussehen wie solche Pfeile nach rechts? Ist diese "blockige" Form der einzelnen Tabs nicht vorgegeben? Farbe, Schriftart und -größe würde ich noch hinbekommen aber aus dem Tab eine Pfeilform zu machen - Mmh, geht das überhaupt?

Ansonsten finde ich die Lösung mit den Tabs prima. Es wäre schön wenn wir dafür eine Lösung finden.

Danke euch!!

 

[Duddle]

AW: Wie kann ich das hier nachbauen (siehe Link)?

Bilder. Du könntest dir hier die Apple-Breadcrumb-Navigation als Vorbild nehmen.

Es klingt aber so, als ob dir Grundlagen im HTML und CSS fehlen, wenn du das nicht erkennst. Diese (insbesondere CSS) solltest du dir wohl erstmal aneignen, bevor du dich alleine daran wagst.


Duddle

 

[leveler]

AW: Wie kann ich das hier nachbauen (siehe Link)?

entweder, wie dudle schon anmerkte , über Bilder, oder pur über css, siehe zb hier:
http://jonrohan.me/guide/css/creating-triangles-in-css/

http://apps.eky.hk/css-triangle-generator/

 

[ezekiel23]

AW: Wie kann ich das hier nachbauen (siehe Link)?

Danke Duddle, leider funktioniert dein Link nicht.

HTML und CSS-Kenntnisse sind im Grundlagenbereich vorhanden - ich bin einfach nur schon 3 Jahre raus aus dem Bereich aber ich denke ich kann mich recht schnell wieder einarbeiten und es wird sicher nicht die schwierigste CSS-Aufgabe sein die Tabs anzupassen, nur fehlt mir ein wenig der Einstieg. Kannst du daher den Link nochmal bitte posten?

Eine Frage noch: Wie funktional sind die jQuery-Tabs auf mobilen Geräten? Das Layout der Website ist responsive und ich würde gerne auch den Bereich "Ablauf" für mobile Geräte optimiert anbieten. Gibt es hier keine Probleme?

 

[ezekiel23]

AW: Wie kann ich das hier nachbauen (siehe Link)?

entweder, wie dudle schon anmerkte , über Bilder, oder pur über css, siehe zb hier:
http://jonrohan.me/guide/css/creating-triangles-in-css/

http://apps.eky.hk/css-triangle-generator/

Ja der Triangle-Generator ist natürlich ne coole Sache. Danke, ich werde das mal ausprobieren und mich bei Problemen ggfs. nochmal melden.

 

[leveler]

AW: Wie kann ich das hier nachbauen (siehe Link)?

Eine Frage noch: Wie funktional sind die jQuery-Tabs auf mobilen Geräten? Das Layout der Website ist responsive und ich würde gerne auch den Bereich "Ablauf" für mobile Geräte optimiert anbieten. Gibt es hier keine Probleme?

Wenn Du mobile Geräte in der Nähe hast, teste es doch einfach selbst.

 

[ezekiel23]

AW: Wie kann ich das hier nachbauen (siehe Link)?

Hab ich grad leider nicht Und wenn dann auch nur von einem Hersteller bzw. Betriebssystem. Dachte vielleicht es gibt allgemeine Informationen zum Einsatz von jQuery(-Tabs) im Responsive Design.

 

[leveler]

AW: Wie kann ich das hier nachbauen (siehe Link)?

Es gibt noch die jquery mobile Variante (mit der ich aber keine Erfahrung habe)
http://jquerymobile.com/
http://jquerymobile.com/demos/1.0rc2/docs/toolbars/docs-navbar.html
...evt hilft`s Dir ja...

 

[teste123]

AW: Wie kann ich das hier nachbauen (siehe Link)?

Du könntest das mit Tabs umsetzen, schau mal hier
http://jquerytools.org/demos/tabs/index.html

sehr gut erklärt
MfG

 

[ezekiel23]

AW: Wie kann ich das hier nachbauen (siehe Link)?

Es gibt noch die jquery mobile Variante (mit der ich aber keine Erfahrung habe)
http://jquerymobile.com/
http://jquerymobile.com/demos/1.0rc2/docs/toolbars/docs-navbar.html
...evt hilft`s Dir ja...

Danke, da schaue ich gerne mal rein. Vielleicht bekomme ich das ja iwie hin