Week 3 — Element selector patterns,
CSS multi-column layout,
Drop down menus

CSS element selector patterns

Selector pattern examples are here.

Picture gallery example

Look at examples and definitions at w3schools CSS selector reference

Multi-column layouts

• Example 1 structure for a two column page layout with the
  page header in the right column
• Example 2 structure for a two column page layout with the
  page header across the top of both columns
• Example 3 multiple column layout with
  divisions ranging from 1 to 4 columns

Drop down menus

• This example that shows how a one-level sub-menu can be constructed.
  It has a simple structure but the drawback of this method is that it is difficult to extend to more levels.
  one-level sub-menu
• Creating multi-level drop down menus are easily created with the styles used in this example.
  creating multi-level sub-menus
  The original source is a Line25 tutorial.

Create sub-menus with JavaScript

This section is here for comparison with the previous examples but we will not study this example, as using JavaScript to create sub-menus is cumbersome and difficult.

The example Sub-menus with JavaScript shows the use of mouse actions to call JavaScript functions to make menus visible and invisible. The length of time a menu is displayed is controlled by a timer. Can create sub-sub-menus but the JavaScript becomes complex as you have to not hide parent menus but the current version does hide parent menus.