Responsive Navigation Patterns

Brad Frost stellt die Vor- und Nachteile einige Navigations Muster vor die sich für Responsive Design eignen.

7 Ansätze werden in dem Beitrag beleuchtet:

  • Top Nav or “Do Nothing” Approach
  • The Footer Anchor
  • The Select Menu
  • The Toggle
  • The Left Nav Flyout
  • The Footer Only
  • The “Hide and Cry”
 

CSS3 Accordion Menü

Das Webstandard-Blog stellt ein Accordion Menü nur mit CSS3 vor. Das klappt in allen modernen Browser, also alles != IE und > IE 8.

Die CSS3 Pseudoklasse :target und die Negationspseudoklasse :not(), zusammen mit dem CSS3-Modul Transition, ermöglichen ein solches “Bewegungsmuster”. Nur eben ganz ohne JavaScript! Das heißt, dass die durchaus beliebten “Akkordeon- oder auch Toggle-Effekte” ausschließlich via CSS umgesetzt werden können! Das heißt auf der anderen Seite dann natürlich auch das Requests für JavaScript eingespart werden könnten.

 

Animated Text And Icon Menu

Mal wieder eine nette jQuery Spielerei.

Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.

 

Mal wieder: Nette jQuery Plugins

Auf zwei nette jQuery Plugins bin ich heute im Feed Reader gestoßen:

Zum einen das Vegas Background jQuery Plugin für Full-Screen Background Image Galleries, sehr nett.
Und dann das Sliding Background Image Menu.

This menu will have several panels, each one corresponding to a different background image that will show on all panels when we hover over a panel label. Also, a submenu will slide out from the bottom. This menu comes with some configuration possibilities, such as the size of the image, the hover effect and custom default states.

 

Drupal: Mega Menus

Eine recht detaillierte Erklärung wie man Mega-Menus mir Drupal realisiert gibt es hier.

We will be using the Mega Menus module for Drupal 6 which is great because it saves us from having to any TPL or PHP work. Our strategy will be to first install modules and set up links using Drupal’s built-in menu system. Lastly we will be styling with CSS.