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 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: inline-block

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

  • color of hyperlink is maroon, background color is #efefef, border is double gray
  • hover color hyperlink is red and background color is #cccccc
  • active color of hyperlink is black
  • current page style of hyperlink is black and the border is black
  • pay attention to the size of the "buttons" and the intervals between them.

Menu 4: float

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

  • color of hyperlink is lightgoldenrodyellow
  • hover color hyperlink is darkblue and the background color is burlywood
  • active color of background is lightgoldenrodyellow
  • current page style of hyperlink is the same as the hover
  • pay attention to the size of the "buttons".

Menu 5: float alt

Use the "float" technique to create the horizontal menu in the screenshot. This menu has equally-sized list items and the text is centered within them.

  • color of hyperlink is darkgreen
  • hover color hyperlink is lightgoldenrodyellow and the background color is darkolivegreen
  • active color of background is lightgoldenrodyellow
  • current page style of hyperlink is black and the background is #cfca89

Menu 6: display: grid

Use CSS grid to create 6 equal "buttons" with a gap between them. The hyperlink on this doesn't go anywhere, and you need to open this page separately because the menu for the 5 other pages doesn't have the 6th menu item.

  • color of hyperlink is darkblue and the background color is cornflowerblue
  • hover color hyperlink is black and the background color is lightsteelblue
  • current page style of hyperlink is black and the background is aliceblue
  • "buttons" are 15% wide and gap is 2% wide

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.