Link: 5 typical RWD navigation approaches (Stewart Foss)

One of the largest challenges that anyone developing a EDU site faces is the vast amount of navigation we have to deal with. Stewart Foss presented a decent brief of 5 typical RWD navigation approaches in his presentation, “Top trends and techniques in Higher Ed Responsive Websites”. Here are some of the examples to consider as a starting point:

Example 1: Top Nav (arranged at top region on large display, adjusts down to fit small mobile display):  McGill University

Example 2: Footer Anchor (topics at top are scaled down for mobile view and get hidden behind button to works as anchor link): George Mason University, School of Law

Example 3: The Select Menu (a group of arranged tops scale down to a select menu on mobile view): Lancaster University

Example 4: The Toggle (larger menu is collapsed and moved down screen on mobile view): Regent College

Example 5: The Left Nav Flyout Menu (popularized by the Facebook iPhone app, page slides to right to reveal option menu on mobile view): Barack Obama

(Update: the Obama site no longer uses this method, but here’s an example of Left Nav Flyout: jQuery mobile WordPress theme with horizontal slide menu )