Dynamisches Ausklapp-Menu mit Jquery

20. Mai 2010

Wer sich schon einmal mit Jquery beschäftigt hat, weiß um die Vorzüge dieses Javascript-Frameworks. Die Bibliothek bietet bereits viele optimierte Methoden zur dynamischen Webseiten-Gestaltung für die eigene Homepage.

Heute zeige ich, wie Ihr mit einfachen Mitteln und ein wenig Programmiererfahrung ein einfaches Ausklappmenu erstellen könnt. Es bleibt Euch natürlich überlassen dieses noch zu verfeinern und weiter zu entwickeln.

Ein dynamisches Ausklapp-Menu könnt Ihr Euch auf dieser Seite anschauen.

dynamisches Ausklappmenu

-Hier klappt das Menu auseinander und es erscheinen die einzelnen Menupunkte.-

An Hand eines lauffähigen Beispielcodes demonstriere ich nun ein simples Aufklappmenu.

Als erstes erstellen wir die HTML-Elemente

Clevere CSS Navigationen

27. Oktober 2009

Einer der wichtigsten Teile einer Website ist sicherlich die Navigation und diese ist meistens auch am aufwendigsten zu erstellen. Deshalb ist es besonders wichtig ein übersichtliches und semantisch sauber programmiertes Menü zu erstellen, welches die eine einfache Navigation ermöglicht und den Besucher schnell zu dem gewünschten Ziel führt. Eine Möglichkeit, die Stylesheets bieten sind Listen (UL / LI) um solche Menüs zu erstellen. Hier sind ein paar Beispiele:

Magix: CSS Dropdown Menü

Magix Navi
Magix verfügt über eine große Anzahl von Links und verpackt diese in einer optisch sehr ansprechenden und logisch aufgebauten Drop-Down-Navigation. Die fünf Oberkategorien zeigen jeweils verschiedene Unterkategorien, welche alle mit einem Hover-Effekt versehen sind. Dieser Effekt zeigt eindeutig wo man sich befindet und erleichtert so die Navigation.

Joost De Valk’s 40 Tips in 40 Minuten über Wordpress Optimierung

11. Mai 2009

MS Web Platform Installer bekommt einen Katalog über Web Anwendungen dazu - Web App Gallery

11. Mai 2009
NEW YORK - NOVEMBER 30:  (NO SALES, NO ARCHIVE...
Image by Getty Images via Daylife

MojoPortal, Wordpress, Drupal, alles drin…..

Klar ist hier die Web Strategie von Microsoft zu sehen….und schlecht soll diese “Web App Gallery” auch nicht sein.
Wer meint in diesem Web Katalog befinde sich nur, wie man annehmen könnte, Applikationen aus dem Microsoftlager, also ASP- und .NET-basiertes, der täsucht sich, denn sogar Web Anwendungen, wie Wordpress, Silverstripe oder Drupal sind in diesem Katalog zu finden. Selbst das aktuelle PHP lässt sich per WPI auftragen.
Das es MS im Bezug auf Web Standards und hohe Skalierbarkeit und Perfomance schwer hat….soll mit dem WPI  Rezept und der neuen App Gallery ein Hexkraut geköchelt werden…..

Die treuen Newsletter Leser wissen es bereits…

23. April 2009

…Jaaaaaaa…auch bei uns wird fleissiger Einsatz gelobt - und belohnt!

Und das gibst zu gewinnen

Und das gibst zu gewinnen

Wir haben in unserem Forum einen Aktions-Thread eröffnet, in dem Ihr Eure Ideen und Vorschläge einbringen könnt.
Mit diesem Schritt möchten wir Euch an der Weiterentwicklung des Forums beteiligen.

Und das Beste: Ihr könnt auch was gewinnen!

Grübelst du noch oder postest Du schon?

Also registrieren (sofern überhaupt noch nicht geschehen - tze!), posten und mitverbessern!

Vielen Dank vorab schon mal an die Teilnehmer!

Es grüsst Euch

Das CSS-Info - Team

Alle CSS Selektoren auf einen Blick

30. März 2009
css-cheat-sheet-v2

Oi!
habe soeben ein nützliches CSS Cheat Sheet auf AddedBytes gefunden, welches auf den ersten Blick sehr nützlich sein kann, und einen gute groben Überblick der Möglichkeiten von CSS darstellt.

Online Zeitvertreib und gute Laune fürs Wochenende mit JamLegend

27. März 2009

The JamLegend Team

Image by Somewhat Frank via Flickr

Seit einiger Zeit gibt es  die kostenlose Online Alternative zu Guitar Hero namens JamLegend. Ähnlich wie die Spiele Guitar Hero und Rock Band, simuliert JamLegend den Nervenkitzel vor einer ausverkauften Menge zu rocken.

Dazu ist natürlich diese Webseite auch ein Paradebeispiel für gutes Design und intuitive Bedienung für den Tastatur Rocker ;). Die Hauptanwendung ist mittels Adobe Flex realisiert und ist fast so üppig wie die Spiele auf den Konsolen, und das alles im Browser…..einfach genial.

In diesem Sinne viel Spass!

Link: JamLegend.com

Wie kann ich mein Farb-Schema sorgfältig auswählen?

26. März 2009
Adobe Kuler: create color schemes

Image by PeterForret via Flickr

Wer kennt es nicht? Wireframes erstellen ist ja schön und gut, jedoch die richtige Farb-Atmosphäre zu erstellen ist oftmals sehr schwer….

Heute möchte ich euch 2 nette, kleine aber wie so oft feine Tools präsentieren:

A) Color Scheme Designer:

Einfach Tool! Ohne viele Worte zu verlieren, ist man mit diesem online Tool in der Lage, schnell monochrome, komplemetäre und analoge Farb-Gestaltungen zu erhalten. Das Tool ist mit einer gehörigen Portion Javascript (Jquery ist nat. auch dabei) und viel Liebe und Kaffee von  Petr Stanicek entwickelt worden, und gehört ab sofort zu meinen lieblings Bookmarks.

Neue Version von CSS-Info.de ist nun online

25. März 2009

Hallo!

seit gestern gibt es das alt-bekannte CSS Info Forum im neuen Gewand. Hier findest Du Tipps und Hilfe bei Fragen zu dem Thema Cascading Style Sheets.
Das Forum dient dazu Fragen zu veröffentlichen und mit anderen Mitgliedern deine CSS-Probleme und - Ansätze zu besprechen und am besten zu lösen.

Wir hoffen es gefällt euch und wünschen euch viel Spass beim suchen und posten.

Vorher

Before Relaunch

Before Relaunch

Nachher

After Relaunch

After Relaunch

CSS Layouts mit YAML und dem YAML Builder

25. März 2009
A graphical depiction of a very simple css doc...

Salve! anbei findet ihr hier meinen Tip für heute: Der Yaml Builder.

Der YAML Builder ist ein Werkzeug zur Erstellung von CSS-Layouts. Er erlaubt die Einstellung grundlegender Layouteigenschaften, die Anzahl und Positionierung der Content-Spalten, sowie die dynamische Erstellung Grid-basierter Layouts auf Basis der Subtemplates per Drag & Drop. Nicht ganz WYSIWYG, aber nahe dran!

aktuelle Version steht hier zum download bereit.