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: http://www.csszengarden.com/
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
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
Rollovers with background colour
• Demo (rollover, bgcolour)
Rollovers with background images
Rollovers with background images
• You simply define a different image in
a:hover
• Demo
Rollovers with background images
Horizontal drop-downs
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
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