TDWI mobile navigation

With the launch of the latest site a mobile first responsive css method was applied to ensure the growing mobile audience experience would be a success instead of an after thought. I created the CSS for a “hamburger” menu icon that transitions into an X using css transitions without image files to ensure a crisp clean navigation no matter the resolution.

Mobile Navigation Open
Color separation of the utility navigation and top navigation

Mobile Navigation Search
Search slides open from the top despite its right handed placement in desktop mode

Mobile Subnavigation
Visual indicators of expanded sub navigation

Mobile Navigation Closed
Transition back to a hamburger menu icon