/assemble-navigation-demo

A demo for the Assemble Navigation Middleware

Primary LanguageCSSMIT LicenseMIT

assemble-navigation-demo

A demo for the Assemble Navigation Middleware and helpers.

Site outline

  • Home
    • What this site is about
    • Packages used
    • Git repo
    • Install and config Navigation
  • Simple Navigation demo *
  • Ordering Menu items
  • Foundation Top-Bar demo
  • Slideshows
    • Installing slick.js and creating a basic slideshow of menu items
      • Install slick's JS and SCSS files
      • Adding images to frontmatter
      • Generating Slick markup from navigation menu
    • Creating a carousel
    • Slideshow combining images and text
  • Mega dropdowns
    • Dropdown with images
    • Changing dropdown layouts

Features Demonstrated

Navigation

  • Install and config
    • Setup middleware
    • Configuration
  • Adding Custom Menus
  • Setting Default Menu
  • Debug navigation using Midden
    • install and config
    • including scripts and stylesheets
    • using with navigation object
  • Understanding file & menu hierarchies
  • Navigation data structure

Menus

  • Creation of custom links
    • Links task
    • Off site links
    • Links to a static file
    • Load links from a data file
  • Hierarchal menuing
  • Stub Menu Items
  • Custom menu paths
  • Highlight active path
  • Highlight current page in nav

Menu Items

  • Defaults
  • Setting titles
    • Custom link titles
  • Specifying menus in YAML
  • Custom linkIDs
  • changing target attributes

Cook book

Handlebars

  • Simple handlebars based navigation
  • Creating breakcrumbs
  • Organizing templates and partials
  • Custom menu paths
  • Custom classes
  • Using linkIds

Using Navigation helpers

  • CollectionQuery helper
  • Breadcrumb helper

Zurb Foundation

  • Foundation Top Bar
  • Foundation Side bar menu
  • Block Grid of menu items

Twitter bootstrap

Ordering Menu items

  • Sorting with handlebars
    • order by title
    • order by data attributes
    • order by datetime
  • Sorting with an app task
  • (upcoming feature) Sorting with the menu config

Slideshow

  • Using slick.js to create a slideshow from menu items
  • Adding images to front matter
  • linking to pages from a slide
  • Using slick to create an image carousel from menu items
  • Slick slideshow with text overlaid on images

Mega Dropdowm menus

  • Dropdown with custom images
    • front matter with images and other custom attributes
  • Customizing dropdowns
  • Customizing menu orientation

Additional Info

  • Link to site github repo
  • Links to referenced packages
    • Assemble
    • Assemble Navigation
    • Helpers
    • Navigation helpers
    • Midden Helper
  • Where to go with more questions