Lateral Code
A Web Design Blog Focused on Code and Technology
Currently Browsing: Home » Styling List Elements
Styling List Elements
By Karthik Viswanathan
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.
View a Demo Download the Files
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="http://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="http://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!
This entry was posted on Tuesday, March 10th, 2009 at 18:33:58. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
One Response to “Styling List Elements”
Leave a Reply
Great Post!…I have never seen this before. LateralCode is bookmarked.
Thanks.