CSS Menus and Rollovers

Agenda foil Separating style from content 3 pages in one file Rollovers in CSS Horizontal drop-downs Vertical drop-downs

Separating style from content It is considered good programming style to separate the information from its formatting. The information goes into the HTML file. The formatting goes into the CSS file. A good demonstration of this can be found in the site:

3 Pages in One File

3 pages in one file In many web pages the masthead remains the same from page to page, as does the menu. All that changes is the content. So we put the content for 3 pages onto the one page and hide two of the “pages”. We use CSS: – display: block; – display: none;

3 pages in one file Demo what it does (a-switch)

The menu links call a JavaScript routine When clicked, the link does not call a web page (“#”) Instead, it calls a JavaScript routine using a parameter (‘n0’ etc).

Here are the JavaScript functions The links call the function “display()”.

3 pages in one file The links call the JavaScript functions First the function “killall()” sets all content sections to invisible. Then the function “display(x)” selects the content section to make visible. That’s all folks:

Rollovers in CSS

The key to making rollovers work is to use the :hover pseudoclass as in: a:link a:visited a:hover

Rollovers with background colour

Demo (rollover, bgcolour)

Rollovers with background images

You simply define a different image in a:hover Demo

Rollovers with background images

Horizontal drop-downs

By this I mean a horizontal menu, from which a second menu drops down Demo (horiz-6)

Horizontal drop-downs We start off with a normal web page (demo html) We then use CSS to style everything except the menu (demo html+css). We want a horizontal menu, but we now have a vertical menu.

Horizontal drop-downs Next we flatten the menu (html+css-1), using: list style: none; margin: 0; padding: 0;

Horizontal drop-downs Next (html+css-2) we arrange the list elements horizontally by floating them to the left.

Horizontal drop-downs Next (html+css-3) we display all links as blocks of width 200px and height 30px. This spreads the top line along the menu bar. We also remove the underlines of the links using text-decoration: none;

Horizontal drop-downs Next (html+css-4) we stop the submenus from being displayed at all (we’ll get them back later). We also set the submenus to position absolute, so they will not disturb the rest of the layout when they do appear.

Horizontal drop-downs Here is an example of what happens when you don’t set the dropdown elements to position absolute: (demo try-index)

Horizontal drop-downs Next (css+html-5) we make the submenus appear when the menu elements are moused over. We use “hover” for that.

Horizontal drop-downs Finally (html+css-6) we style the submenus to make them look better. That’s it!

Vertical drop-downs

This section covers vertical menus with submenus which appear to the side. Perhaps “drop-down” is an inappropriate name.

We start with a standard HTML page (1-html)

We add CSS to put everything in the right place.

As usual, we put in CSS to hide the submenus normally, but display them when the main menu is moused over (demo 4-strict css).

We style the box, to give it a background colour. We give it a width and a position, which would cause it to interact with the content section, So we make the block absolute, so it sits on top of the content block. (5-strict css+style)

Finally we tidy up the page by adjusting the background colours. (6-tidy1)

Agenda foil Separating style from content 3 pages in one file Rollovers in CSS Horizontal drop-downs Vertical drop-downs