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
- Complete travelguide to Phuket
- UK Game Server Hosting
- Free layouts and more - Myspace
- The Hotfix forum for windows
- web hosting, dedicated servers
web reseller, managed servers - Web design in Dorset
Bournmouth based web design agency - pay as you go e-commerce
Build your own SEO friendly webshop - Host Color
Web Hosting for 30 Websites





