Lab 6: Mobile Navigation Design Prepared by Jack G. Zheng for IT 4213, Spring 2019

This exercise will let you responsive web navigation design.

Tasks

Navicon

Explore the different HTML+CSS way to create the hamburger navicon and tranformicon. For example:

http://css-tricks.com/three-line-menu-navicon/ (read the comments for ideas as well)

https://www.w3schools.com/howto/howto_css_menu_icon.asp

https://codepen.io/designcouch/pen/Atyop

Which method do you prefer? Can you think of your own?

Menu design: Follow the following tutorial to design a responsive navigation.

http://www.hongkiat.com/blog/responsive-web-nav/

http://filamentgroup.com/lab/responsive_design_approach_for_navigation/

www.smashingmagazine.com/2013/01/off-canvas-navigation-for-responsive-website/

Also look for examples on http://bradfrost.github.io/this-is-responsive/patterns.html

Start with the given example file "menu.html". The page initially implements the "Do Nothing" pattern. Modify the design to implement the following patterns. Include this part in the lab report.

"Footer Anchor" pattern.

"Toggle" pattern.

Off Canvas - left nav flyout

"Sticky Footer".

"Toggle" + "Sticky Footer"

Use some of the following plugins or libraries to develop a responsive multi-level menu. Discuss and compare them on features like coding methods, ease of use, functionalities, performances, etc.

FlexNav http://jasonweaver.name/lab/flexiblenavigation

Slicknav http://slicknav.com

http://thecodeblock.com/multilevel-toggle-menu/

https://github.com/jalvarado91/cbFlyout

Submission

Compile required part (part 3) into a single lab report document. All screenshots need to be complete and no editing/cropping. Clearly label each part. Upload required solutions to your website and provide links. Submit it before the due date listed in D2L Brightspace.

Grading

Your grade is determined on:

How much you have satisfied the requirements specified in the instruction, and your creativity.

Professional writing and formatting.

Follow the submission requirements.

Rubric:

Score	Summary	Rating Description
10	Outstanding work; beyond expectation.	Clear and detailed explanation for all parts with complete screenshots. Excellent coding to implement required functionalities. Professional writing and formatting.
8-9	Good work; meet expectations	Clear and detailed explanation for all parts. Good solutions on coding. Professional writing and formatting.
6-7	Adequate work;	Brief explanation for all parts. Missed some key parts of responsive design in coding. Need to improve writing and formatting.
<6	Lack of effort.	Missing screenshots or explanations. Missing any part. Live webpages are not working. Disorganized writing and formatting.