Magix: CSS Dropdown Menü

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.

Technisch ist diese Navigation durch drei verschachtelte UL-Listen gelöst. Die Navigationselemente der Oberkategorie (z.B. Produkte, Free Download,…) sind in der obersten Liste eingebunden und die jeweilige Unterkategorien (z.B. Foto, Grafik & Web,Video,…) sind wieder eigene Listen, welche durch ein float: left nebeneinander angeordnet werden. Letztendlich sind die eigentlichen Links je Unterkategorie (z.B. Retten Sie Ihre Videokassette, Video deluxe,…) in die untersten Listen eingeordnet.

Die Oberkategorie wird immer angezeigt und führt auf die im Stylesheet durch ein visibility: hidden standardmäßig ausgeblendeten Unterpunkte der Navigation. Diese werden mit der Pseudo-Klasse :hover angesprochen und kommen mit einem visibility: visible zum Vorschein.

Eine gute Vorlage für die eigene Nutzung eines solchen Dropdown-Menüs bieten Patrick Griffiths and Dan Webb mit ihren Son of Suckerfish Dropdowns. Hier wird übersichtlich und leicht verständlich Schritt für Schritt erklärt wie man eine solche Navigation selbst erstellt und aufgeteilt nach HTML und CSS in die eigene Website einbindet.

Ein kleiner Unterschied zur Navigation von Magix besteht allerdings, da hier nicht mit visibility: hidden sondern mit absoluter Positionierung gearbeitet wird. Der Inhalt wird nicht unsichtbar gemacht, sondern mit left: -999em aus dem sichtbaren Bereich nach Links verschoben und bei Bedarf mit left: auto wieder am richtigen Platz angezeigt. Dies sind jedoch zwei gleichwertige Möglichkeiten Teile der Navigation so lange “zu verstecken”, bis sie gebraucht werden.

Storopack Deutschland: CSS Dropdown Menü

Storopack ist ein weiteres Beispiel für die Nutzung der absoluten Positionierung. Hier wird sinngemäß auch das “Son of Suckerfish Dropdown” genutzt und die Unternavigation wird mit left: -999em aus- und mit left: auto wieder eingeblendet.

Auch hier wird der Hover-Effekt eingesetzt um die Navigation zu erleichtern. Einmal in Form eines Pfeils als Hintergrundgrafik und weiter durch die Eigenschaft text-decoration: underline, um die aktiven Links hervorzuheben.

Telekom Training: CSS Drop-Down/Right Menü

Telekom Training hingegen hat eine andere Möglichkeit gefunden, das Menü erst auf Wunsch auszuklappen. Sie benutzen die Eigenschaft display mit dem Wert display: none um das Menü zu verstecken, und display: block um es wieder anzuzeigen.

Der Grundgedanke dieser Navigation ist der gleiche wie bei den oberen Beispielen, obwohl sich dieses Menü nach rechts und nicht nach unten öffnet. Das Untermenü wird immer rechts von dem aktivierten Link angezeigt. Diese Möglichkeit das jeweilige Untermenü immer an der passenden Stelle nach rechts aufklappen zu lassen wird hier mit position: absolute und in diesem Zusammenhang mit top: 0px und left: 156px erreicht, wobei der zweite Wert genau die Breite des jeweiligen Obermenüs darstellt.

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…..

Download WPI+ Web App Gallery

Related articles by Zemanta

• Leaving DotNetNuke (DNN)… (daveenjoys.com)
• Top 10 Popular Free Drupal themes (taragana.com)
• What is Your Favorite Blog Platform and Why? (ariwriter.com)

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

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.

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

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.

B) Adobe Kuler:

Adobe Kuler ist ähnlich, wenn auch etwas mächtiger, ist auch nicht eine One-Man Show und kommt von A……mit social community ansätzen und der ganze Kramm…lol..prinzipiell ist man auch hier in der Lage Farb Themen zu erstellen, Inspirationen abzuholen…und zu guter Schluss sein Farb-Experiment in der Kuler Gemeinde auszustellen.

In diesem Sinne, viel Spass.

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

Nachher

After Relaunch

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.

Image via Wikipedia

Die richtige Inspiration zum Thema Design und Layout zu finden ist nicht immer so einfach, wie es sich anhört. Hier möchten wir euch eine coole Link Sammlung zu diesem Thema vorstellen:

Online Web Galerien

Delicious CSS - Sehr beliebte CSS Web Design Galerie, welche Webseiten durch ihr Farb Schemata kategorisiert.
Raster - Fotographie und Kunst Galerie gegündet in 2001 mit dem Ziel Inspiration durch Bilder und Kreative Gedanken zu unterstützen.
CSS Galaxy - Französische CSS Galerie zum Thema Standards-Compliance, Technik, zusammenhängendes Grafik-Design und Ästhetik.
CSS Uber Clean - Getreu nach dem Motto “Weniger ist mehr” - eine weitere Design Galerie zum Thema “simple, minimalist, super-clean designs”
Light on Dark - Kollektion von dunklen Webseiten Demos mit leuchtenden Text Farben. Eine richtige Herausforderung für alle Designer.
Veer: Ideas - Ideen Kollektion im Blog Stil über News und Updates von der Firma Veer.

Blogs

Computerlove - Social Platform und Blog zum austauschen und staunen deiner ArtWork. Dazu bietet ComputerLove Neues aus der Rubrik Web Design und kann deine Arbeit in den richtigen Kreisen promoten…
Design is Kinky - Design Blog mit den Zutaten: Designs und Artwork von überall des blauen Planeten. Einer der ältesten Blogs auf diesem Markt.
Think Vitamin - Einer meiner lieblings Blogs für Usability Designers und Entwickler mit einer Menge an Material rund um das Thema. Diese Seite kommt aus den Händen von Carsonified, die selbige Firma, die auch Future of Web Design and Future of Web Apps conferences in Bewegung gebracht hat.

Online Magazine

Blanket Magazine - A free PDF magazine covering all areas of art, design, and photography. Each issue also features humorous stories and informative interviews.
RevolutionArt Magazine - Magazine focusing on art as well as culture with over 70,000 subscribers. They cover the arts, modeling, music and more and consider themselves a massive worldwide propaganda machine for making people think about global messages.
TXTnein - A free art magazine available in PDF, Flash or executable files for both PC and Mac. Submissions are open to graphic designers, photographers and artists from all over the world.

Flickr Design Gruppen

Design the Logo - A graphic design pool focused specifically on logo design. Features well-known logos as well as ones for lesser known brands and companies.
Poster Design - Flickr Gruppe mit mehr als 10.000 poster designs und tolle Inspiration im Bereich Poster oder Print Design.
CMYK design - A collection of photos of print designs. This is definitely the pool to look at if you’re looking for inspiration for package or marketing materials design.

Diese Liste ist natürlich nur eine kleine Auswahl zum unendlichen Thema ‘Design’ dar…