Styling List Elements

List elements are present throughout every website. Navigation usually consists purely of these tags. In order to give your website some pizzazz, follow along as we teach you the process of styling list elements.

First, set up some basic HTML that sets up an unordered list and instructions:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple List Styling</title>
</head>
<body>

<p>Click on a list item to toggle it's informational area. Click it again to view the whole list.</p>

<ul id="menu">
	<li><a href="#">Lorem Ipsum</a></li>
	<li>This is very interesting. Very interesting.</li>
	<li><a href="#">Pellentesque</a></li>
	<li>Wow! Amazing stuff. Just plain amazing.</li>
	<li><a href="#">Tristique Es</a></li>
	<li>I ran out of stuff to say. Stuff to say.</li>
</ul>

</body>
</html>

Adding some CSS yields:

* {
	padding: 0;
	margin: 0;
}

body {
	font: 85%/155% Georgia, "Times New Roman", Times, serif;
	color: #333333;
	width: 960px;
	margin: 20px auto;
}

#menu {
	width: 200px;
	border: 1px solid #FAB2C1;
}

#menu li {
	list-style-type: none;
	border-bottom: 1px solid #FAB2C1;
}

#menu li.odd {
	font-size: 90%;
	padding: 2px 8px;
}

#menu a {
	display: block;
	width: 184px;
	color: #800F25;
	text-decoration: none;
	padding: 2px 8px;
}

#menu li.even {
	background-color: #FAC7D2;
}

#menu li.odd {
	background-color: #fff;
	display: none;
}

#menu li.odd a {
	color: black;
}

#menu li.last {
	border-bottom: none;
}

p {
	padding-bottom: 20px;
}

This sets up basic text properties as well as our menu. #menu li.odd, #menu li.even, and #menu li.last are classes that will be added using jQuery.

Note how the #menu a elements are defined as blocks. This enables the whole list element to be a link, instead of just the text.

To being the jQuery used in this example, import it from Google AJAX Libraries:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js></script>

The first necessary job is to add in the .even, .odd, and .last classes dynamically:

$('#menu li:even').addClass('even');
$('#menu li:odd').addClass('odd');
$('#menu li:even:last').addClass('last');

Next, you must bind a click event to each even list element. When this event is triggered, the next element (which contains a description of the even list element) is toggled.

All elements in the ul that do not correspond with this title and description are hidden. This provides nice animation and a great viewing effect.

$('#menu li:even').click( function() {
	$('#menu li:even').toggle(500);
	$(this).toggle(500);
	$(this).next().slideToggle();
} );

And now the list styling is finished! Here is the final code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

body {
	font: 85%/155% Georgia, "Times New Roman", Times, serif;
	color: #333333;
	width: 960px;
	margin: 20px auto;
}

#menu {
	width: 200px;
	border: 1px solid #FAB2C1;
}

#menu li {
	list-style-type: none;
	border-bottom: 1px solid #FAB2C1;
}

#menu li.odd {
	font-size: 90%;
	padding: 2px 8px;
}

#menu a {
	display: block;
	width: 184px;
	color: #800F25;
	text-decoration: none;
	padding: 2px 8px;
}

#menu li.even {
	background-color: #FAC7D2;
}

#menu li.odd {
	background-color: #fff;
	display: none;
}

#menu li.odd a {
	color: black;
}

#menu li.last {
	border-bottom: none;
}

p {
	padding-bottom: 20px;
}
</style>
<title>Simple List Styling</title>
</head>
<body>

<p>Click on a list item to toggle it's informational area. Click it again to view the whole list.</p>

<ul id="menu">
	<li><a href="#">Lorem Ipsum</a></li>
	<li>This is very interesting. Very interesting.</li>
	<li><a href="#">Pellentesque</a></li>
	<li>Wow! Amazing stuff. Just plain amazing.</li>
	<li><a href="#">Tristique Es</a></li>
	<li>I ran out of stuff to say. Stuff to say.</li>
</ul>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$('#menu li:even').addClass('even');
	$('#menu li:odd').addClass('odd');
	$('#menu li:even:last').addClass('last');

	$('#menu li:even').click( function() {
		$('#menu li:even').toggle(500);
		$(this).toggle(500);
		$(this).next().slideToggle();
	} );
});
</script>
</body>
</html>

Thanks for your attention!

Leave a Reply

Styling List Elements