Styling Lists with CSS

Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.

Vertical lists

• Simple list
• Simple list with square bullets
• Simple list with circle bullets
• Using images for bullets
• Using CSS background images for bullets
• Eric Meyer's simple separators
• Eric Meyer's Panelise
• Rollover lists
• Eric Meyer's Strengthening the links
• A List Apart's Taming lists
• ProjectSeven's Uberlist
• Bieler Batiste's list
• Vertical buttons
• Bulleted Rollover List
• 3D Imenu in blue
• Double Border
• Copongcopong's Pop Pad List
• IE HACK for "Eric Meyer's Strengthening the links" - added 17 May 2005

Horizontal lists

• Simple horizontal list
• Rollover horizontal list
• Rollover horizontal list navbar
• Eric Meyer's navbar
• Eric Meyer's tabbed navbar
• Simple Bits tabbed navbar
• ProjectSeven's horizontal Uberlist
• Kalsey CSS tabs
• Jeffrey Zeldman's DWWS navigation
• Clagnut CSS Tabs
• Unraveled CSS Tabs
• Dive into Mark Pure CSS Tabs
• Horizontal buttons
• Webfroot Horizontal NavBar
• ZDnet Emulation
• Centred list navbar
• Image swap
• Seth's horizontal list
• Float your boat
• Brick
• Contrast: smhill
• Alteration to Rollover Horizontal List Navbar
• SuperfluousBanter 2003
• Horizontal Bullet On Hover
• The Gradient Green Navigation Bar
• Centred List Navbar Updated
• Tomek Garbiak's list
• Reflowing Folder Image Rollover Nav
• Copongcopong's Under Tabs
• Central Horizontal Boxes
• Fat Erik 5s Simple Pipe List
• Fat Erik's breadcrumbs
• CheapOsx
• Sleek vertical boxes
• Pipe dream

Experimental lists

• Anton Andreasson's Big Boxes
• Adjacent-Sibling selector list

Links to other lists

• Strange ordered multilevel list
• Dynamic Vertical list
• Dynamic horizontal list
• Dynamic vertical list (new)
• Expanding Nested Lists
• Menus dynamiques
• Horizontal Toolbar List with Access Keys
• Tabular list
• PureDom Nav
• Hover CSS menu
• Modification of Seth's horizontal list
• Seth's new vertical list
• Iubito's CSS menu
• CSS menus gallery
• Archadia Bluff Golf Clubs
• Powderseekers Resort Map
• Sitemap Structure List
• Sitemap Structure List (rounded)
• TJK design CSS-based Dropdown with a twist
• TJK design Tabs menu
• CSS dropdown menu with downloadable zip file
• CSS rollover gallery
• Full width navigation bar with CSS
• Andrea Lazzarotto's centered list
• Andrea Lazzarotto's centered list (English version)
• Modification on Nick Rigby's horizontal css menu
• Pushbutton Links

Information about the lists

• External resources used on this site
• Why use lists for site navigation?
• Browsers types and lists
• The IE box model and Doctype modes
• Browser support chart

List Auto-Generators

• List-o-matic
• List-o-Rama Dreamweaver Extension
• Bellspace

 

출처: http://css.maxdesign.com.au/listamatic/