Mobile Friendly Website

CSSPLAY

Doing it with style

CSS DEMOSCross browser tabbed pages with embedded links

Date : 20th March 2006

For all modern browsers


This demo is too wide for your mobile screen.
Please view on a tablet or PC.













NO javascript - just CSS - and it validates


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 embedded links. A working scroll bar is added for each page as required.

24th March 2006

To please Netscape and hopefully FF 1.0.4 users I have added a second set of tabs that do not use scroll bars.

18th February 2009

Updated to bring into line with current techniques. CSS has come a long way on CSSplay since 2006 and this demo now uses just one stylesheet and a single top level list item for each method and it still works in IE6.


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 retain the copyright comment in the stylesheet.
    A support donation is now required for this demonstration.
  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 again a support donation 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.

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page