CSS Menus and Rollovers Agenda foil Separating style

CSS Menus and Rollovers Agenda foil   Separating style

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. Thats 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 (well 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 dont 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.

Thats 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

Recently Viewed Presentations

  • Return on Investment of the Recruiting Process

    Return on Investment of the Recruiting Process

    Ethnic Disparities in Berks County, PA Coalition for Juvenile Justice May 4, 2009 * * * * * * * * Detention Reductions Have allowed us to: Eliminate 24 of 72 detention beds Enlarge PREP, a post-adjudication local residential program...
  • AP Review Session 6: Cognition and Language:

    AP Review Session 6: Cognition and Language:

    VI. Scripts, Mental Models, and Images . Scripts: A mental representation of familiar sequences of activities.. EX: How I get ready in the morning. Mental Models: A cluster of propositions representing our understanding of objects and processes that guide our...
  • Presented by Maj Gen Thad Martin 1 CT

    Presented by Maj Gen Thad Martin 1 CT

    Litchfield Readiness Center (FYDP FY26) ($11.2M Fed / $3.7M State) TASMG, Aircraft Maintenance Hangar ADD/ALT (FYDP FY23)($27M Fed) ... All 8 aircraft on station. Executing all aspects of C-130 flying training. Wing manned at 103%.
  • Weather Radios could save your life!  Weather radios

    Weather Radios could save your life! Weather radios

    Burning Safely. Never burn if a burn ban has been issued! First violation of a burn ban is a class B misdemeanor: up to 30 days in jail and a $1,500 fine. Never leave a fire unattended, and never leave...
  • Analysis of Algorithms

    Analysis of Algorithms

    Vectors The Vector ADT ("Vector" = "Array List" in ยง6.1) The Vector ADT extends the notion of array by storing a sequence of arbitrary objects An element can be accessed, inserted or removed by specifying its rank (number of elements...
  • Quantitative Chemical Analysis 7e - SJSU

    Quantitative Chemical Analysis 7e - SJSU

    Quantitative Chemical Analysis 7e Author: Daniel C. Harris Last modified by: Roger Terrill Created Date: 12/24/2002 1:08:46 AM Document presentation format: On-screen Show (4:3) Manager: Sumanas, Inc. Company: W. H. Freeman & Co. Other titles
  • Introduction to GCSE History Starter: please fill in

    Introduction to GCSE History Starter: please fill in

    In the early Anglo-Saxon period, England was actually 7 separate Kingdoms. ... Made new laws, controlled circulation of pennies, granted land to his followers and could take land away (could raise people to title of thegn), had the power to...
  • SECURITY MANAGEMENT R80.20 Use Cases and More Anat

    SECURITY MANAGEMENT R80.20 Use Cases and More Anat

    [Internal Use] for Check Point employees Wildcard Object. 192.29. 0.1. 192.29. 1.1. 192.29. 2.1. 192.29. 3.1. 192.29. 255.1. Assume you have the following deployment in your organization, and you want to allow an access for all to a specific server....