Styling horizontal menus

Focus on:

  • Using dynamic pseudo-class selector to style links according to user interaction
  • Understanding how descendant selectors allow you to isolate ubiquitous tags and only style the instances you want according to those tags' ancestry in the document tree
  • Understanding how to use the display, flex and float properties to create horizontal menus
  • Understanding how to create and apply a class for "current page" styles in a menu

Overview

Use the screen shots and video tutorials to help guide you as you style the menus in this exercise. Replicate the screen shots as closely as you can. The layout styling is done already so you can focus on the menu styling.

Page layout styling is complete, but you will have to adjust the layouts as needed for your horizontal menus.

Video tutorials are necessary to understand how these menus are made. Be sure you watch them! Each menu has its own video.

Workflow

Menu 1: display: inline

Use the "display inline" technique to create the horizontal menu in the screenshot.

  • color of hyperlink is green
  • hover color hyperlink is darkblue
  • active color of hyperlink is white
  • current page style is hover with bottom border

Menu 2: display: inline alternate

Use the "display inline" technique to create the horizontal menu in the screenshot. This example aligns the text to the center.

  • color of hyperlink is darkblue
  • hover color hyperlink is lightcyan
  • active color of hyperlink is blue
  • current page style is hover style

Menu 3: display: flex

Use the "flexbox" technique to create the horizontal menu in the screenshot. This example aligns the menu to the left.

  • the background color of the menu is silver
  • color of hyperlink is maroon
  • hover color hyperlink is #dedede and background color is gray
  • active color of hyperlink is black
  • current page style of hyperlink is the same as the hover

Menu 4: display: flex alternate

Use the "flexbox" technique to create the horizontal menu in the screenshot.

  • color of hyperlink is cornflowerblue
  • hover background color is lightsteelblue
  • active color of background is lightgoldenrodyellow
  • current page style of hyperlink has a background color of aliceblue

Menu 5: float

Use the "float" technique to create the horizontal menu in the screenshot. Float is new to us, and I'm including this because it is an easy method to make dropdown menus. Listen to my description of how float works.

  • color of hyperlink is darkblue
  • hover background color is gold
  • active color of background is lightgoldenrodyellow
  • current page style of hyperlink is same as hover

Validation

You want to be sure you've written valid markup and valid styles. Use the online validator tools to check your work. If there are errors, read what the validator says about them and check the lines in your markup where the errors occur.