Menus And Navigation

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

Web Design Training Course 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.

Course contents — 1 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

Course contents — 2 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

Course contents — 3 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

Course contents — 4 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

Course contents — 5 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

Course contents — 6 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

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.