Navigation Elements and Animations with CSS3

This course is included in our On-demand training solution.


Effective navigation is a key element of good site design. CSS3 contains many features that allow you to configure and style navigation elements. In this course, you will learn how to apply these features and you will also learn how to use CSS3 animations to create dynamic and attractive sites.

Target Audience

Web developers who want to learn how to use the features of CSS3



Expected Duration

60 min.

Course Objectives

Course Introduction

Styling Links

  • use CSS to style links
  • Styling Lists as Nav Bars

  • use CSS to style a list to generate a vertical and horizontal nav bar and display descriptive information
  • Configuring Multilevel Navigation

  • use CSS to style nested lists for multilevel navigation
  • Configuring Tabbed Navigation

  • configure tabbed navigation using CSS
  • Creating Flyout Menus

  • use lists and CSS to create flyout menus
  • Configuring Drop-Down Menus

  • use CSS to configure drop-down menus
  • Styling a Site Map

  • use CSS to style a site map
  • Applying Rollover Effects

  • use CSS to apply basic rollover effects to navigation options
  • Applying Rollover Images

  • use CSS to apply rollover images with an image sprite in navigation elements
  • Using 2-D Transforms

  • use 2-D transforms of CSS to manipulate elements
  • Using 3-D Transforms

  • use 3-D transforms of CSS to manipulate elements
  • Element Transitions

  • use CSS to apply transitions to elements
  • Introduction to Keyframe Animations

  • use simple CSS keyframe animations
  • Animating Multiple Properties with Keyframes

  • use CSS to apply basic animations to elements
  • Advanced Animation Techniques

  • apply advanced CSS animation techniques
  • Exercise: Create an Animated Menu





    Multi-license discounts available for Annual and Monthly subscriptions.