Essentials

CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices

July 7th, 2008

When we think about CSS-Styled lists, different ideas come to mind but that rusty old image of bulleted items is not one of them anymore. There are lots of different methods to format nice HTML lists that is used in most web designs not only for navigation menu (vertical or horizontal) but for formatting many design blocks in a stylish and elegant manner. In this article, we’ll have a look at how such lists can create a whole new look, feel, and effect of a site.

You might be interested to check other CSS related posts :


Different Uses of Styled Lists

1-Custom Select Box

Ordered Lists


<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)" class="module">Recent Archives</dt>

<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
	<li><a href='http://www.darrenhoyt.com/2008/06/' title='June 2008'>June 2008</a></li>
	<li><a href='http://www.darrenhoyt.com/2008/05/' title='May 2008'>May 2008</a></li>
	<li><a href='http://www.darrenhoyt.com/2008/04/' title='April 2008'>April 2008</a></li>
</ul>
</dd>
</dl>

2-Code Blocks

Ordered Lists


<div id="portfolio">
<ul id="gallery">
<li><img src="/{client}/before.jpg" /></li>
<li><img src="/{client}/sketch.jpg" /></li>
<li><img src="/{client}/wireframe.jpg" /></li>
<li><img src="/{client}/after.jpg" /></li>
</ul>
<img id="frame" width="580" height="415" src="frame.png" />
<ul id="sequence">
<li id="before"><a href="/{client}/before.jpg"><a></li>
<li id="sketch"><a href="/{client}/sketch.jpg"><a></li>
<li id="wireframe"><a href="/{client}/wireframe.jpg"><a></li>
<li id="after"><a href="/{client}/after.jpg"><a></li>
</ul>
<a id="launch" rel="external" href="{url}">
<img src="launch.png" alt="Launch this site" />
</a>
</div>

3-Tabs

unOrdered Lists


<ul id="home_button">
  <li><a href="javascript:void(0)" onMouseOver="showContent('home_welcome_content','home_button_welcome')" id="home_button_welcome" class="on">Welcome</a></li>
  <!-- <li><a href="javascript:void(0)" onMouseOver="showContent('home_mymonterey_content','home_button_mymonterey')" id="home_button_mymonterey">My Monterey</a></li> -->
  <li><a href="javascript:void(0)" onMouseOver="showContent('home_visitors_content','home_button_visitors')" id="home_button_visitors">Visitor's Guide</a></li>
  <li><a href="javascript:void(0)" onMouseOver="showContent('home_multimedia_content','home_button_multimedia')" id="home_button_multimedia">Multimedia Gallery</a></li>
  <!-- <li><a href="javascript:void(0)" onMouseOver="showContent('home_travelblog_content','home_button_travel')" id="home_button_travel">Travel Blog</a></li> -->
  <li><a href="javascript:void(0)" onMouseOver="showContent('home_weather_content','home_button_weather')" id="home_button_weather">Weather</a></li>
  <li><a href="javascript:void(0)" onMouseOver="showContent('home_surf_content','home_button_surf')" id="home_button_surf">Surf Report</a></li>
</ul>


4-Post’s Information

unOrdered Lists


<ul>
  <li class="dateposted">Posted on: 19th November 2006</li>
  <li>Posted by: <a href="http://ifelse.co.uk">Phu</a></li>
  <li>Number of comments: <a href="http://ifelse.co.uk/archives/2006/11/19/cssedit-2-review/#comments">29</a></li>
  <li><a href="http://ifelse.co.uk/archives/2006/11/19/cssedit-2-review/#commentform">Add a comment</a></li>
</ul>

5-Popular Posts Block

unOrdered Lists


6-Blog’s Comment

unOrdered Lists


7-CSS Galleries

unOrdered Lists


8-Text Blocks

unOrdered Lists


Tutorials and Examples

1-Nested lists used to create a simple folder metaphore- A rough and ready example showing how to make a folder analalogy using a nested list.

unOrdered Lists


2-Mini Slide Navigation

unOrdered Lists


3-html vs css pt2/navigation lists- This article will take a closer look at navigation lists and how an extra span + optional extra class can make our css work easier.

 /* html code */  <li><a class="item"> nav item </a></li>  <li class="active"><span class="item"> nav item </span></li>  /* css code */  li .item {display:block; padding:0.5em;}  /* css code alternative */  li a, li span {display:block; padding:0.5em;}

4-Floating next and back buttons using lists- For this exercise, you want to float a “back” button to the left and a “next” button to the right. You could use two divs, but to make it simpler you will use two list items.

unOrdered Lists


 /* html code */  <li><a class="item"> nav item </a></li>  <li class="active"><span class="item"> nav item </span></li>  /* css code */  li .item {display:block; padding:0.5em;}  /* css code alternative */  li a, li span {display:block; padding:0.5em;}

5-Safe Lists Next to Left-Floated Elements- There are lots of different methods to format nice html lists. But are those methods reliable in all contexts and in all browsers? In this article, we’ll have a look at a simple context: a list with some left-floated element next to it.

unOrdered Lists


6-Style Your Ordered List- Here is a quick CSS tutorial on how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list.

unOrdered Lists


7-Centering List Items Horizontally- Slightly Trickier Than You Might Think

unOrdered Lists


8-Advanced CSS Menu Trick- Instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall.

unOrdered Lists


9-A Stripe of List Style Inspiration- Instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall.

unOrdered Lists



Further Reading on CSS-Styled Lists

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags:

31 comments for „CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices
  1. liam on July 7th, 2008 at 6:22 am

    Wow, really loving your collections more and more. These are brilliant.

  2. YaMTaR on July 7th, 2008 at 7:57 am

    i like “8-Advanced CSS Menu Trick”

  3. Mike Robinson on July 7th, 2008 at 10:46 am

    I’m keen to hear what people have to say about a post I wrote a little while ago, asking are lists appropriate in form mark-up. While it’s not a tutorial, I feel it turns the cogs a little ;)

  4. verycheeky on July 7th, 2008 at 2:32 pm

    Hello!
    thank you for this, good stuff. Question though, your using wordpress for this site, are you able to use any of these?

  5. Shaho on July 7th, 2008 at 2:35 pm

    Excellent!

  6. Pinkpetrol.com on July 7th, 2008 at 3:48 pm

    Great post might use some on mine! – http://www.pinkpetrol.com/blog – might be useful for people :) thanks

  7. Paul on July 7th, 2008 at 5:50 pm

    Very nice list of lists. :)
    Can sometimes be one of the harder elements to work with at times.
    Great list.

  8. vasu on July 7th, 2008 at 6:03 pm

    Excellent!

  9. Zany on July 7th, 2008 at 6:23 pm

    Very useful ….. thank you for this :D

  10. John Jones on July 7th, 2008 at 7:03 pm

    Nice! Very good tutorials given here. Thank you
    http://www.FireMe.To/udi

  11. Santiago on July 7th, 2008 at 7:32 pm

    Very nice tricks, I will be playing around with these for future projects.

  12. Madhav Tripathi on July 7th, 2008 at 11:58 pm

    Thanks, I can understand You would have hard work after this great work.

  13. BlackHat on July 8th, 2008 at 3:43 am

    I’m disappointed noupe, a selection of poorly designed lists to be honest, first time i’ve been put off by your posts….gah maybe it’s just the advanced css menu trick that I liked but I mean who hasn’t heard or seen or even done that you know?

    Anyway, happy belated 4th of july to noupe :)

  14. de on July 8th, 2008 at 3:58 am

    This is great. Noupe rocks

  15. JSHAW on July 8th, 2008 at 4:30 am

    CSS makes me excited especially in list form!

  16. Wes on July 8th, 2008 at 5:34 am

    Once again you guys rock! Great resources and plan on implementing some of them on my site.

  17. Patrick Sweeney on July 8th, 2008 at 5:42 am

    Fantastic! Your site is quickly becoming one of those sites to watch constantly. Thanks!

  18. Guillaume on July 8th, 2008 at 8:02 am

    Lists are always a simple way to create menus. Plus, it’s 100% W3C ready and it increases SEO.

    It’s easy to tune them with CSS, I don’t consider making menus without lists.

    Great links, thank you !

  19. Giovanna on July 8th, 2008 at 5:36 pm

    Great list. My blog has a terrible design and will definitely apply the tips on this list. I need to get a design first. Hmm.

  20. Christian on July 8th, 2008 at 9:54 pm

    Great list, go css!

  21. Andy on July 9th, 2008 at 10:55 am

    wrong, wrong, wrong. Learn about graceful degradation and semantics before you show off your “best practices”.
    This is clearly not it.

  22. Kim on July 10th, 2008 at 5:54 am

    Great collection! Thanks :)

  23. Tl7 on July 10th, 2008 at 8:53 pm

    Great collection thanks :)

  24. Jon S on July 11th, 2008 at 8:28 am

    Great Post, I’ve been looking for some good tutorials on list styling.

  25. Nocom on November 27th, 2008 at 7:58 am

    Great resources thanks a lot

  26. James Waugh on November 27th, 2009 at 9:44 pm

    Cheers Noupe! … great tips as always boys !

  27. dandy on February 15th, 2010 at 2:28 pm
  28. Tahsin Hasan on September 30th, 2010 at 11:56 am

    Hello,

    here is boxy tabs on tahsin’s garage

  29. ilham ali on October 2nd, 2010 at 5:43 pm

    some of them are really nice, I am looking for a listing style of product list with pictures, any one can give me a direction?

  30. S.W. Atcher on January 27th, 2011 at 2:30 am

    Pretty nice post. I just stumbled upon your weblog and wanted to say that I’ve truly enjoyed surfing around your blog posts. After all I will be subscribing to your feed and I hope you write again soon!

  31. Akif on August 17th, 2012 at 11:50 pm

    Thank you! Really Helpful.