Stu Nicholls | CSS play | Site Map for CSS play

Menus - Basic Text Only: Visited menu
How to use :visited to show where you have been.; Menu one
A simple change of border style on :hover.; Menu two
A border style to look like a button.; Menu three
A neon glow menu.; Menu four
A right border change on :hover.; Menu five
Text movement on :hover.; Menu six
Border art to indicate the link on :hover.; Menu seven
Additional link text on :hover.; Menu nine
A shadow added on :hover.; Menu ten
Indented text on :hover.; Menu eleven
45 degree slant using border art.; Menu twelve
Image rollover effect.; Menu fourteen
A border art pointer on :hover.; C1sissy's menu
Both horizontal and vertical links; A 45° slant menu » 07-02-2007
A tab menu with sloping edges.
Menus - Tutorial: Button menu tutorial
How to style a list of links.; :hover craft tutorial » 17-09-2006
Working with :hover on links and lists
Menus - Tabbed: Menu eight
Chamfered corners on your link boxes.; Menu thirteen
Chamfered corners using border art.; Fitted doors
Using three images to allow resizing of text.; Fitted doors NO images
As above but using border art.; Fitted tabs NO images » 22-08-2006
As above but fully radiused.; Tab menu with pointer
A horizontal list with an indicating pointer.; Centering a 'float left' menu
Centering float left menus of known and unknown widths.; Horizontal non floating
Horizantal lists without using floats.; A hidden tab menu
A hidden menu using a single tab to reveal.; Hidden tab menu take two » 05-01-2007
A follow on from the previous menu.; Sliding doors » 06-01-2007
100% clickable sliding doors tabs.; Centered sliding doors » 02-02-2007
100% clickable sliding doors - centered; Mini tabbed pages » 09-02-2007
A set of six mini tabbed pages; Ovelapping tab menu » 13-02-2007
A simple overlapping tab menu; Ovelapping tabs type 2 » 16-02-2007
Another overlapping tabs; Ovelapping tabs type 3 » 17-02-2007
Overlapping tabs using png; Ovelapping gif tabs » 18-02-2007
Overlapping tabs using gif; Vertical gif tabs » 19-02-2007
Vertical tabs using gif; Vertical gif tabs v2 » 23-02-2007
Vertical tabs v2 using gif; Side tabs » 25-03-2007
Side tabs with semi-transparent flyouts
Menus - Button: Menu fifteen
A three state menu using a single background image.; ULTIMATE buttons
A realistic button menu using border art.; Definition list v2
Definition list buttons using border art.; Rocker switch style
Definition list racker buttons using border art.
Menus - Definition List: Definition list menu
Styling a definition list with curved corners.; A drop-down definition list » 03-11-2006
Using definition lists to make a drop-down menu.; Another drop-down definition list » 04-11-2006
Styling all the links on a drop-down list.; A final drop-down definition list » 05-11-2006
Combines a drop-down with snazzy borders.; One last drop-down definition list » 16-11-2006
One final version with wider drop down.; Variable width drop-down definition list » 30-11-2006
A variable width drop down definition list menu.; An opaque drop-down definition list » 18-12-2006
An opaque drop down definition list menu.; A flyout definition list » 07-11-2006
A flyout version of the drop-down definition list style; A sliding definition list » 28-12-2006
A vertical slide version of the drop-down definition list
Menus - No Flicker: Flicker free :hover
Using text image replacement without flicker.; Flicker free mk2
Another method of image replacement without flicker; Flicker free mk3
A final method of image replacement without flicker.
Menus - Curved Border: Snazzy menu
A resizeable tab menu without images.; More snazzy menus
Two more tab menus using border art.
Menus - Sliding: Sliding tabs menu
A vertical sliding menu system with images and text.; horizontal sliding menu
A horizontal version of the above menu.; a vertical sliding sub-menu
Using page jumping to navigate.
Menus - For Fun: Coded list of spies
A fun menu using jumbled letters.; Horizontal vertical menu
Vertical links placed horizontally.; An unordered list with link images
Links with pop-up images and link lines.
Menus - No active/focus Border: Non-rectangular links
Links in a cross shape.; Jigsaw links
Links in the shape of jigsaw pieces.; Circular links
Links in a circular shape.; Letter links
Links styled to look like letters.; Olympic links
Interlocking links.; Basic dotted line replacement tutorial
How to remove the ative/focus dotted lines.
Menus - Magnifying: Enlarging unordered list
Link enlargement on :hover.; Magnifier menu
A graduated text magnifier on :hover using images.; Image magnifier menu
Enlarging link images on :hover.; Exploding menu
Exploding images into four identical images on :hover.; Magnifier text menu
As the first menu in this group, but using only text.
Menus - Multi-Level CSS Only: Cross browser drop-down
The original drop-down menu that started this group.; Cross browser flyout menu
A flyout menu that works in IE using ONLY CSS.; Simple 4 level flyout menu » 28-07-2006
A much simplified version of the flyout menu.; Another flyout menu » 16-10-2006
Another version of the flyout menu.; A flyout menu with overlap » 24-10-2006
A flyout menu that has ovelapping submenus.; Five level overlap & overrun » 19-03-2007
A four sub-level with overlap and overrun.; Simple 4 level left flyout menu » 02-09-2006
A left flyout version of the simplified menu.; It could have been this simple » 01-09-2006
How simple a fly out menu could have been.; It could have been this simple mkII » 02-09-2006
How simple a dropdown/fly out menu could have been.; Validating drop-down menu
The second version of the drop-down/flyout menu.; Validating drop-line menu
A drop-down horizontal menu using only CSS.; Validating drop-line menu v2 » 11-10-2006
Another drop-down horizontal menu using only CSS.; Doors drop-line menu » 13-01-2007
A sliding doors drop-down horizontal menu.; Doors drop-line menu two » 26-01-2007
Another doors drop-down horizontal menu.; Doors drop-line menu three » 26-01-2007
One last doors drop-down horizontal menu.; Basic drop-down menu
The basic single level drop-down .; Cross-browser pull-up menu
Based on the drop-down/flyout this one pulls-up.; A simplified pull-up » 03-09-2006
A simplified pull-up menu with 2 fly-outs.; Artists drop-down menu
A drop-down with associated text.; Flyout graphic menu
A single level fly-out using images.; Flyout transparent menu
A fly-out single line with transparency.; Flyout/dropdown menu
A fly-out line with drop-down.; Ultimate dropdown menu
The final drop-down/fly-out menu.; Ultimate menu v2 » 27-07-2006
One more improvement on the previous menu; An improved drop menu » 20-10-2006
A further improvement to the drop-down menu; A drop menu with overlap » 25-10-2006
A small change to the drop-down menu to include overlapping of the sub menus; A drop menu with overrun » 30-12-2006
A drop down menu with overlap and overrun; A tab menu with overrun » 09-03-2007
A tab drop down menu with overlap and overrun; A six level menu with overrun » 22-03-2007
A simple drop down menu with overlap and overrun; Variation on a drop-down
A single level drop-down menu with transparency.; Drop-down examples
A series of 'web ready' menus using drop-down techniques.; Drop-down scrolling » 05-03-2007
A dropdown menu with scrolling.; Fly-out examples
A series of 'web ready' menus using fly-out techniques.; Vertical slide menu
A vertical push-down menu using just CSS.

List of Layouts

Layouts: Three columns
Two simple methods of producing a three column layout with header and footer.; CSS Frame - The Holy Grill
A method of emulating a 'frame' layout.; position:fixed; (fixed)
Position fixed for Internet Explorer.; Shrink your body
Resizing the body tag to create a fixed layout.; IE6 only web site
This was for IE only, but now Firefox will work.; 'Fixed' layout version 1
Fixed width, header and footer 100% high.; 'Fixed' layout version 2
Full width and height. Fixed header, footer and left navigation.; 'Fixed' layout version 3
Full width and height. Fixed header, footer and left navigation with content only scrollbar.; 'Fixed' layout version 4
Full height, fixed header and footer, multiple scrolling columns.; Back to BASICS
The bare essentials of Layout 3.; Back to BASICS 2
The bare essentials of Layout 2.; Cross browser FIXED
Fixed header and footer, scrolling content.; Simple minimum width layout
A layout to demonstrate min-width in Internet Explorer.; 100% 'background' image
Adding an image in the background that resizes when the window resizes.

List of Box Model Demonstrations

Boxes: Jack in the Box
A flip top box.; Curved Corners
An unusual way to do curved corners.; Three curved corners » 01-01-2007
A definition list used to produce three curved corners.; Four curved corners » 01-01-2007
A definition list used to produce four curved corners.; Border Writing
How to put text in your borders.; Border Colors
A look at the way different browsers do border colours.; Left Scrollbars
How to place the scroll bar on the left.; IE6 3px Float Fix
Another way to fix the 3 pixel float error in Internet Explorer.; Snazzy Borders
Adding snazzy curvedcorners without images.; More Snazzy Borders » 22-07-2006
Another idea for snazzy borders.; Krazy Korners
More corners without images.; Percentage PLUS Pixels
How to define a width as a percentage plus a fixed pixel amount.; Min-Width for IE
A fix for the lack of min-width in Internet Explorer.; Min-Height for IE
A cross browser method of using min-height.

Non-IE browser Demonstrations List

Mozilla: Drop down menu
A drop-down menu using an unordered list and li:hover.; Cascading menu
A fly-out menu using an unordered list and li:hover.; Content:
Adding extra content using just CSS.; Mozzie box
A demonstration of using :hover on a div.; Rainbow box
A Demonstrating of border transparency.; Snooker cue
Border art and border transparency to produce a snooker cue.; Target practise
Using :target to dynamically change page styling.; Two tone headings
A method of producing two colour text using content:.

List of Explorer Demonstrations

Explorer: Example One
A demo of pop-up boxes, opacity and top to bottom text.; Weft Fonts
Using any font you like with IE Weft.; Vertical Align
A method of vertical alignment using CSS.

List of Opacity Demonstrations

Opacity: Opaque Colours
A colour wheel showing how colours mix.; Opaque Menu
An opaque menu that uses :hover to give no opacity.; Partial Opacity
Four different methods of opacity.

Tutorials

Tutorials for some of my demonstrations: Photograph Gallery; Two Step Photograph Gallery; CSS Image Map; CSS Animation

Copyright

Most of my demonstrations can be used without asking for permission. However, some will require email approval first. Just check each page for the copyright requirements before use.

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.