How To Style Unordered Lists

Perhaps you're wondering why you would use a list to display navigational elements?
Well if you think about it, a navigational menu is a list, so why not treat it like one?
Using lists for navigational menus is far easier that just separating them by a few spaces or line breaks as it gives you much more control over the appearance of the menu as a whole, as well as each individual list item.

Using Lists For Navigation:

When creating navigational menus, occassionally you may want the list to display horizontally, this is very easy to achieve if you're using an unordered list, you just need to give the list a Class or ID and set the "display" property of the list items (li) to "Inline" and there you have it.
Below is an example to illustrate this:

CSS:

#mylist li{
display : inline;
}


HTML:

<ul id='mylist'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

This will create an inline list that can be used as a horizontal navigational menu.
Now you'll want to just add a bit of a margin and maybe some padding to the <li>s to tidy it up a bit.
I'll write another article in the future providing the in's and outs of creating a menu structure, watch this space.

Custom Bullet Images:

Sometimes you don't want the standard black circle next to each list element, sometimes you'll want a star, or a baseball or some other image as a bullet, well once again, css to the rescue.
If you want to, you can even remove the bullet alltogether.

To have no bullet at all, just set the css property "list-style-type" to "none".

To specify your own image, set the list-style-image (Instead of list-style-type) to the path to the image you want to display instead. The css should be written as follows (replace "myimage.jpg" with the path to your image name):

#mylist li {
display:inline;
list-style-image:url(myimage.jpg);
}

You need to type in the path (Relative preferably) to the image, and of course the actual image name and extension.

It should be noted that applying this style to the ul tag (or simply the "mylist" id in the example above) will apply the same image to each of the list items. In most cases this is desireable, however if you wish to set up different images for each list item, you can give each list item their own class or id, but if you want to be even more fancy, you can use javascript to traverse the DOM and apply a different image to each list item without having to hard code classes into the markup yourself, I'll show you how to do this in a future article)

Removing The Indentation From The Left Of The List:

If you've removed the bullet, you'll probably also want to remove (Or perhaps adjust) the indentation on the left of the list.
This is very easy and is no mystery, simply set the left padding and margin to 0, (Or whatever you had in mind if you want an indentation to exist) and you're done.

Nesting Lists:

Sometimes having just 1 level of a list is not enough, imagine a menu at a resturant, the first level will be starters, main, desert, drinks, but you can't have it as simple as that, it's far too vague.

In a situation like this, you'll want to nest your lists to create more detailed levels.

You may have a list like the following:

How it looks in the browser:

  • Level 1
  • Level 1
    • Level 2
    • Level 2
      • Level 3
      • Level 3
      • Level 3
    • Level 2
    • Level 2
  • Level 1
  • Level 1

Markup:

<ul id='mylist'>
<li>Level 1</li>
<li>Level 1
<ul>
<li>Level 2</li>
<li>Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
<li>Level 2</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>

This is a simple example of a nested list (Several infact).
Styling the entire list is easy, but if you want to display the sub-menu items differently from their parents for example, you'd need to select them specifically using ul ul, which means "select all unordered lists that have unordered lists as parents", (i.e. an unordered list within an unordered list).

We've briefly touched on inherritance here, but we'll save that for another article.

If you enjoyed this article, please consider giving it a +1

Tags: css, ul

Published: 5/12/2014 7:30:17 PM
By: Stephen Warren