Creating Page Layouts with CSS

Code referenced in my Pluralsight course "Creating Page Layouts with CSS".

Start File with 4 CSS Files

This start file has an index.html, four linked css files with media queries and a linked empty JavaScript file.

Mobile Menu v1

Features very simple single level navigation using Flex Box.

SMALL - Stack the menu items

MEDIUM - Horizontal menu items (sized for mobile touch)

LARGE - Smaller for mouse access

Mobile Menu v2

Features single level navigation with a hamburger icon for small screens.

SMALL - Stack the menu items

MEDIUM - Horizontal menu items (sized for mobile touch)

LARGE - Smaller for mouse access

Mobile Menu v3

Features single level navigation with a hamburger icon for small screens.

SMALL - Skip navigation to page bottom

MEDIUM - Horizontal menu items (sized for mobile touch

LARGE - Smaller for mouse access

Mobile Menu v4

Features animated hamburger to X.

SMALL - Stacked menu items

MEDIUM - Horizontal menu items (sized for mobile touch)

LARGE - Smaller for mouse access

Mobile Menu v5

Features two level deep navigation.

SMALL - Stacked menu items with down arrow for parent items

MEDIUM - Horizontal menu items (sized for mobile touch

LARGE - Smaller for mouse access

Mobile Menu v6

Features off canvas navigation with hamburger.

SMALL - Menu items are hidden off screen and slide on screen

MEDIUM - Same as small screens

LARGE - Horizontal nbavigation