Horizontal Navigation with Flexbox

Housekeeping

• Assignment 2 due Wednesday, January 24th

1. Activity: Dissect a nav menu

Instructions

Search for an example of a horizontal navigation menu online that you think you can duplicate.

1. Using the eyedropper tool, create a color palette based on your selected menu.
   • Don’t forget hover and active states.
2. Using the Font panel of the Inspector, try to find the font(s) used in the navigation.
3. Turn on the phone emulator in the inspector and open the mobile menu on your selected site. Take a screen cap of this menu for reference in the next activity.

2. Accessible Horizontal Navigation

Materials

• Inspiration: Tony’s nav banner research
• Styling links as buttons
• Sample Code
  • Typical vertical navigation menu

3. Activity: Make your own vertical nav menu

Try to duplicate the nav menu and banner using today’s slides and sample code.

1. Create a list of HTML links using the <nav> and <ul> elements.
2. Using CSS, remove the default bullets and padding from the <ul>.
3. Make your links clickable by adding padding (and by making your links block-level).
4. Define your colours according to your selected palette from the earlier activity
5. Define your fonts and any other styles needed to match your nav bar to your online example.

4. Demo: Flexbox Basics

Materials

• Flexbox Froggy
• Complete Guide to Flexbox
• Sample Code
  • Flexbox Navigation Examples

5. Activity: Horizontal navigation with Flexbox

Try to duplicate the nav menu and banner using today’s slides and sample code.

1. Set your <ul> to display: flex.
2. Choose a justification setting based on your example navigation.
3. Stretch: Create a list of <img> elements from Lorem Picsum and create a gallery with Flexbox.
   • What element will be your flex container?
   • Try using gap to space out your images