Navigation Bar System v2

[VillageHubertChen]

• [x] HC: Specify → Features Navigation Bar
• [x] Compile → Heroes Navigation Bar
• [x] HC, LC: Tune → Features Navigation Bar
• [x] Fix Bug: → Making Third Level Navigation Work
• [x] Add Feature → Add Menu Item to Front Matter
• [x] LC: Explain to HC how the Nav Bars in V² Site work.
• [x] HC: Write → Coding Complex Nav Bar System in Jekyll
• [x] @LukasChen Implement → Features Navigation Bar, then trigger HC for testing
• [x] Test new Navigation bar. Use → Features Navigation Bar as check list.
• [x] @LukasChen Publish: → YAML for Book-Bar
• [x] @LukasChen Proof Read: → Coding Complex Nav Bar System in Jekyll

[VillageHubertChen]

Features Navigation Bar

Table of Contents

• Introduction
• Navigation
• Library Metaphor for Navigation ← NEW
• Tooltips ← NEW
• Integration with Jumbotron
• Considerations for Jekyll and Repositories
• Behaviors
• Layout of Nav Bars
• Mobile Support
• Terms ← NEW
• Reference

Introduction

Features can be adjusted to fit a Template

If we find a Template we like very much, we should try to adjust features to fit template, so that we minimize customization of the Template Navigation Bar.

Modern Look

We pick the look from one of the Heroes → Heroes Navigation Bar

Based on a Google Material Design Template

This hopefully saves us lots of time in development, testing and debugging → Google Design Site build using Google Material Design

Navigation

2 Level Navigation with two Nav Bars

• Level 1: Chapter, Horizontal, Above Jumbotron, Breadcrumbs via underlines
• Level 2: Chapter, Horizontal, Below Jumbotron, Breadcrumbs via underlines

Simple Way of 4 Level Navigation

• Three Level Example Page → http://v-squared.github.io/v2-Plan/system/plan-reference/
• Navigation Paradigm:
  • First and Second Bar navigate Level 1 and 2 directly
  • First and Second bar serve as Bread crumbs by showing selection of the corresponding button
  • Third Level is shown in bread crumbs
  • Navigation to another page in third level is done to go one level up using 2nd nav bar. In that page is a linked table of content of all pages of that level.

Luxury Way of 4 Level Navigation

On Big Screen

• Add an additional Sub Section Nav Bar left to Article
• Structured, linked list for levels three and four
• Hero:Luxury Way of 4 Level Navigation

On Small Screen

• Collapse the Sub Section Nav Bar to Nav Bar Toggle Button
• When toggled a left Off Canvas Side Bar with the Navigation Menu shows

Library Metaphor for Navigation

Library Metaphor Explained

Finding Articles of your interest on the V² Site is the same problem you are faced with when entering a library. You already know how to do that in a Library. So we modeled the V²Site Navigation after the Library Metaphor.

For more information → Library Metaphor for Navigation

Tooltips

We are using tooltips for two distinct functions:

1. Give preview of what is the content behind the Menu Button in Level 1 & 2 (We already implemented it, check the working V²Site)
2. Teach the Library Metaphor → #44►Tooltips teach Library Metaphor

Library Metaphor Tooltips

Each Navigation Bar is equipped with in Info Icon that invokes a tooltip. For more information → Tooltips teach Library Metaphor

Integration with Jumbotron

• Jumbotron is either between First Level and Second Level Nav Bar, or it is directly under Nav Bar. In any event it is tightly link and we consider this here
• Jumbotron background image is always 4:1 wide screen. It does not change aspect ratio on smaller screen. It scales 1:1 to become ever smaller height with ever screen reduced screen width
• Hero for background image

Considerations for Jekyll and Repositories

• Each Repository has its own:
  • page content
  • Jekyll Templates

Behaviors

Sticky for 2nd level Nav Bar

• First Level Nav Bar scrolls out on scroll down
• Second Level Nav Bar sticks to top of page

Hiding for 2nd level Nav Bar (Bonus)

• hide when scrolling down
• show when scrolling up
• Bonus feature only when have time
• Angular Code for Hiding 2nd Level Nav Bar

Toggle Menu Button

→ Mobile Support

Layout of Nav Bars

Hero

• https://developers.google.com/schemas/now/cards

Chapter Nav Bar

• V² Logo left aligned
• All Menu Items right aligned
• Breadcrumb with underscore of selected chapter
• Color is chapter color. Each chapter different color

Jumbotron

• Darkened background picture (if no have than chapter color darkened by 50%)
• Bread Crumbs top left
• Chapter Title and Chapter Sub Title: Left aligned. White font color.

Section Nav Bar

• Left aligned
• White Font Color
• Bread Crumbs via underline

Mobile Support

Two Nav Systems

The Navigation is made with two Nav Bar Systems

1. Chapter & Section Nav Bars
2. Sub Section Nav Bar

On Small Screen

• Each of the two will collapse to a Nav Bar Toggle Button on too small width
• When toggled a left Off Canvas Side Bar with the Navigation Menu shows

Terms

Level	Metaphor	Nav Bar	Nav Bar Placement
0	Shelf	Shelf Bar	Drop Down Menu from top
1	Board	Board Bar	Horizontal Navigation Bar above Jumbotron. Boards are color coded
2	Book	Book Bar	Horizontal Navigation Bar under Jumbotron
3	Article Collection	Article Bar	Vertical Navigation Bar left to body
4	Article	Article Bar	Vertical Navigation Bar left to body
5	ToC	ToC Bar	Vertical Navigation Bar right to body

For more Terms regarding the Library Metaphor that we use for the V² Site Nav Bar System check out → Library Metaphor

Reference

• Material Design►Color Palete

[VillageHubertChen]

Heroes Navigation Bar

• http://mdbootstrap.com/live/_products/Landing-Page/index.html#sec-best-features
• https://developers.google.com/schemas/now/cards
• https://design.google.com/resources/
• http://www.materialup.com/posts/wip-landing-page
• http://www.bdinfosys.com/demo/appmate/sites/home-solid.html

[VillageHubertChen]

Coding Complex Nav Bar System in Jekyll

Table of Contents

• Features
• Technologies
• How it Works
• Coding
• References

Features of V² Site Nav Bar from Coding Perspective

• 4 Distinct Nav Bars: Board-Bar, Book-Bar, Article-Bar, Toc-Bar
• Each Bar represents one Level
  • List all pages of that level
  • Ability to order items in each list
  • Highlight the current selection in each level

Technologies

• Jekyll Static Web Site generator written in Ruby by GitHub
• gh-Pages Web Hosting Service of GitHub with Jekyll support
• Liquid Templating System used by Jekyll. We created a custom template for V² Site. Luckily Shopify (which we use for our online store) is using Liquid as well!
• YAML Human-readable data exchange format. We use it to describe the entries in the various Nav Bars.

How it Works

1. Each Nav-Bar is described in a YML file
2. At Jekyll compile time the YML file of each Nav Bar is read and the corresponding Nav bar is generated as HTML file.
   • Note: The CSS and JS to bring the Nav Bar to live has been written by hand beforehand.
3. Pushing the gh-pages branch publishes the Jekyll Site of that repository
   • Note: You can use the GitHub Web Interface to manipulate markdown and yml pages and once you commit it will trigger automatically a Jekyll compile process on the GitHub server. Pretty cool!
4. When adding a new page, you also need to add it into the corresponding YML file.

Coding

• Each Nav-bar is coded in one HTML file
• That HTML file contains Ruby code which read the YAML file to generate dynamic HTML code of the final Nav Bar at the time of running the Jekyll Compiler
• That Ruby Code is written by us, based on the references listed below
• These HTML files are included into the Liquid Template which make our V² Site
• All of these HTML files are in the _include folder of Jekyll

References

• Gaurav Manek►Templating with Jekyll►Complex Menu Design
• Twitter bootstrap navigation bar with Jekyll
• PixelCog►Jekyll From Scratch - Core Architecture
• GitHub►jnvsor►jekyll-dynamic-menu
• ThinkShout►Creating Dynamic Menus in Jekyll
• Building a pseudo-dynamic tree menu with Jekyll

[VillageHubertChen]

YAML for Book-Bar

File Name and Location

• Name: "book-bar.yml"
• Location: "_data"

Content of book-bar.yml

- menu: Target
  url: /target/
- menu: Road Map
  url: /road-map/
  subitems:
    - menu: Strategy
      url: /road-map/strategy/
    - menu: Campaign 1
      url: /road-map/campaign01/
    - menu: Campaign 2
      url: /road-map/campaign02/
    - menu: Campaign 3
      url: /road-map/campaign03/
- menu: Dashboard
  url: /dashboard/
- menu: Contributing
  url: /contributing/
- menu: System
  url: /system/
  subitems:
    - menu: Agile Philosophy
      url: /system/agile-philosophy/
    - menu: Agile Workflow
      url: /system/agile-workflow/
    - menu: Reference
      url: /system/plan-reference/
    - menu: Problems
      url: /system/problems/
    - menu: Sprint Workflow
      url: /system/sprint-workflow/

[VillageHubertChen]

All done. Closed.