Menus and Navigation

1-day Web Design Course in Styling Menus & Navigation — CSS3-06

Web Design TrainingCourse Overview

This advanced CSS course enables students to style attractive, usable, fully-accessible, and responsive web menus, links and navigation on top of advanced HTML5 markup — using progressive enhancement techniques.

As such, this web design course helps students to employ 'bleeding edge' CSS3 presentation, while continuing to support the best graphical effects supported by older, or less capable, web browsers ... right back to IE6 and beyond.

So, for example, this CSS course will show you how to use drop shadows, gradients, CSS3 transitions and tranforms, pop-up navigation help, etc., while ensuring that visually similar (or even visually identical) effects are available for browsers with no built-in CSS3 support.

Like all our web design training, this CSS3 course is (W3C) web standards compliant and comes with cross-browser compatibility — including WAI-ARIA.

Web Design TrainingCourse Contents

Structured and semantic navigation

  • Semantic markup structure for grouping and identifying links — lists
  • Accessibilty — skip links, title attrs, semantic anchors, kbd access, ARIA roles
  • The HTML5 nav element — when and how to use it
  • Block level links — wrapping multiple blocks in link anchors

Basic CSS link styles

  • Consider user needs — labelling, underlining, focus, colour contrast, simplicity
  • Default styles for all links (globals) — normalise focus and link states
  • Links style consistency vs. contextual — across the page, across the site
  • Links states and user interaction — visited, active, hover, etc.
  • Off-site links and target file types — variation, labelling, scalability, icon fonts
  • Image link styles — default border sizes, white space, dock-style hoverable thumbnails

Vertical menu blocks

  • List zero-ing — normalisation, by stripping browser-specific default styles
  • Link area dimension — display:block, width, height, container
  • Link text formatting — font family, weight, style, colour, contrast
  • Vertical text alignment — line-height, auto vertical centring, padding
  • Vertical separation — bottom margin, margin transparency
  • Using borders for vertical separation — avoid margin collapse and transparency limits
  • Rollover effects — simple, consistent, legible, contrast, avoid distraction
  • Constraining extremes — :first-child, :last-child, :first-of-type, :last-of-type
  • Indicating current page or site section — incl. cursor styling, disabling link

Horizontal menus and navbars

  • Displaying blocks horizontally — display:inline, display:inline-bock, float
  • Clearing floats — collapsed parents, hanging and overlapping floats
  • Horizontal link sizing, space and extra separation — blocks, lines, padding
  • Button styling — colours, images, font formtting, gradients, shadows, tabs, etc.
  • Rollover effects — similarity vs. difference from vertical, vary vertical dimensions
  • Indicating current page or site section — incl. cursor styling, disabling link

Styling and controling drop-down menus

  • Combining horizontal and vertical list styling
  • The markup — nested lists
  • Styling the sub-menus
  • Rollover effects on the sub-menus
  • Using CSS positioning to place the sub-menus
  • Hiding and revealing sub-menus — accessibility and usability issues
    • position:absolute vs. no display, hidden visibility, transparency
    • Persistence and animation

Advanced CSS menu styling

  • Pure CSS buttons
    • Shrink-wrap containers: inline-block vs. table display vs. floats
    • Word-wrapping and cursors
  • CSS3 curvy borders and shadows — incl. managing experimental syntax
  • CSS3 gradients — linear, radial, reversal, legacy webkit syntax, IE6-8 filter, ColorZilla
  • Styling link regions — block level links, link states, selecting sub-parts
  • Using sprites — latency esp. mobile, space in sprites, positioning, hover states

Web Design TrainingFurther Details

Course Objectives

On completion of this CSS training course, students will be able to:

  • Appreciate that good navigation design depends on clean, well-structured, HTML
  • Create well-structured, semantic, menu and link markup — using list markup
  • Establish robust default link styles for an entire web site
  • Design and style different menu types — including:
    • Vertical menus
    • Horizontal menus
    • Pure CSS drop down menus
  • Design accessible menus
  • Apply best practice usability techniques to menu design
  • Use cutting edge CSS3 effects — while supporting older browsers

Target Audience

  • Advanced web designers
  • Front-end web developers/programmers
  • Graphic designers with advanced web design skills

Training Pre-requisites

These 2 WDA web design courses — or equivalent experience:

While prior CSS3 experience is not strictly required, you will get more out of this course if you know something of the CSS3 features covered in our CSS3 Essentials course (CSS3-01)

Training Style

This web design course is particularly hands-on and practical; devoting roughly half the contact time to hands-on practical exercises.

The CSS3 code written during the course will be predominently hand-coded — but sample HTML5 and CSS3 is provided with exercises, to save time and to focus activity on the skills that matter.