Information
Based on my recent selection of dropdown and flyout menus this is a method of displaying several pages just by hovering over tabs. As with my menus this works in Opera, IE5.5, IE6, IE7 beta & Firefox. It should work in Safari 1.3.2 and Firefox 1.0.4 but will not work on Mac IE5.
Just hover over the tabs to display a page of text with a picture and embeded links. A working scroll bar is added for each page as required.
24th March 2006
To please Netrscape and hopefully FF 1.0.4 users I have added a second set of tabs that do not use scroll bars.
Cascading Style Sheet
If you look at the header of this page you will see that the normal method of loading a file is used for the non-ie browser css files.
The first tab set
<link rel="stylesheet" media="all" type="text/css" href="css/one_page.css" />
The second tab set
<link rel="stylesheet" media="all" type="text/css" href="css/two_page.css" />
The IE only style sheets are loaded using the conditional comment.
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/one_page_ie.css" />
<link rel="stylesheet" media="all" type="text/css" href="css/two_page_ie.css" />
<![endif]-->
The xhtml
The xhtml code for the first tab set can be seen here in text format.
The xhtml code for the second tab set can be seen here in text format.
You will see that conditional comments have been used to hold the IE specific version of the tab set which used nested tables. The other browsers will not see the tables and instead will use the normal unordered lists.
Please note that you will also need a standards compliant !doctype for this menu to work correctly.
Copyright
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
1. If you are using this on a personal web site then please add a link back to CSSplay and retain any copyright comment in the stylesheet.
A donation to the 'Support CSSplay' fund would be appreciated.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and in this case a donation to the 'Support CSSplay' fund is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.
Recommended Sites
- VPS Hosting
Virtuozzo VPS Hosting - $19.95/mo - Web design in Dorset
Bournmouth based web design agency - web hosting, dedicated servers
web reseller, managed servers - SEO
First Rate - Australian SEO Company - Create Free Flash website
Create amazing websites with Wix.com - CSS Menus
A CSSplay develoment
"The
web site uses
CSS Play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."
Damon Clark - Brandwidth
CSS play pages




