Lists - HTML5/CSS

List Tag - UL, OL, DL

Lists can be great tools for presenting data on a webpage.

Their various types can be used separately or they can be nested within each other to present complicated data displays in an organized manner.

Lists can be used for other purposes like creating drop down menus like the one used on the top of this page.

There are 3 different kinds of lists which can be displayed using HTML.

They are:
Unordered,
Ordered
and Definition lists.

Most inline attributes for setting list types are deprecated in the latest version of HTML4.

Use style sheets to set types and attributes.

Note: Items in a list do require a closing tag for w3c compliance. </li>

Unordered Lists - UL

List items in an unordered list are preceded by a bullet.

To designate the bullet selection of DISC, SQUARE or CIRCLE use style sheets.
Example: list-style : disc or list-style-type : disc.

To eliminate the bullet use the style sheet code:
list-style : none or list-style-type : none.

 

Ordered Lists - OL

Ordered List Types: The items of an ordered list are preceded by letters or numbers instead of bullets. The choices are integers as 1,2,3....., letters as upper or lower case A,B,C... a,b,c.... and Roman Numerals upper or lower case as I,II,III... i,ii,iii....

Types of ordered lists are set using style sheets.
Example: list-style : lower-alpha or list-style-type : integer
Choices are: integer, lower-alpha, upper-alpha, lower-roman, upper-roman.

 

 

The Start attribute used in earlier versions of HTML is Deprecated.

You designate the starting letter or number in an ordered list using the value attribute in the list item tag as shown above.

 

Definition Lists - DL

The definition list is handy for displaying a list of terms and their definitions. The definition <dd> is automatically indented below its associated term <dt>.

 

An easy way to remember which tag goes where: <dt> = Define Term
<dd> = Define Definition

Nesting Lists

Different types of lists can be nested or placed within each other to create sophisticated hierarchical structures.

Nested lists are often used to make drop down menus using CSS.

 

 

Drop Down Menu - Nested Lists - 3 Tier

 

HTML code

The HTML code shown here demonstrates the creation of a 3 button drop down menu.

Examples for a single tier, two tier and three tier button are provided.

<nav class="navigate5">
<ul class="vnavbar5"><!--Parent Unordered List-->

<li><a href="#">Category</a></li> <!--Single Tier-->
<li><a href="#">Category</a> <!--Two Tier in Green-->
  <ul>
    <li><a href="#">Sub Category</a></li>
    <li><a href="#">Sub Category</a></li>
    <li><a href="#">Sub Category</a></li>
    <li><a href="#">Sub Category</a></li>
    <li><a href="#">Sub Category</a></li>
  </ul>
</li> <!--End Two Tier List-->
<li><a href="#">Category</a> <!--Three Tier in Burgundy-->
  <ul>
    <li><a href="#">Sub Category</a>
      <ul>
        <li><a href="#">Article 1</a></li>
        <li><a href="#">Article 2</a></li>
      </ul>
    </li>
  </ul>
</li> <!--End Three Tier List-->
</ul> <!--End Parent List-->
</nav>

 

The CSS

 /* First remove all default padding and margins*/
  * {
    margin: 0 0;
    padding: 0 0
  }
  
nav.navigate5 {
width: 200px;
background-image: url(images/texture-firebrick.jpg);
padding: 8px 10px;
float: left;
box-shadow: 5px 5px 10px #0e0e0e
}
nav.navigate5 a {
  font-family: arial, tahoma, serif;
  color: #ffd700 !important;
  text-decoration: none
}



/*Remove list style */
ul.vnavbar5,
ul.vnavbar5 li ul,
ul.vnavbar5 li ul li ul {
list-style: none;
}

/*float list items - 1rst tier*/
ul.vnavbar5 li {
position: relative;
margin: 0 1%;
float: left;
}

/* Define Button Appearance and Hover change*/

ul.vnavbar5  a {
             display: block;
             width: 168px;/*button width minus padding*/
             height: 19px;/*button height minus padding*/
	         padding: 5px 5px;
             margin: 0 0;
	         background-image: url(images/button-211.gif);
             box-shadow: 2px 2px 8px #202020;

}

ul.vnavbar5  a:hover {
	
	background-image: url(images/button-212.gif);
	box-shadow: 2px 2px 4px #000000 ;
}


/* Hide nested lists*/
ul.vnavbar5 li ul,
ul.vnavbar5 li:hover ul li ul {
position: absolute;
display:none
}


/*display 2nd tier ul list*/
ul.vnavbar5 li:hover ul, 

/*Display 3rd tier ul list*/
ul.vnavbar5 li ul li:hover ul {
display: block;
position: absolute;
top: 0;
left: 178px; /* display right - start with button width and adjust to taste */

z-index: 10 /* Display on top of everything*/
}

The Pics

 

Create Your First Tiered Menu

1...Copy the HTML code into a new HTML page.

Note: Preview the page before you add the CSS.

2...Copy and place the CSS in the head section using the embedded style tag:

<style type="text/css">
CSS here
</style>

3...Copy the 3 images into your images folder.

Did You Know:

You can open the windows file manager to the right of this document and actually drag the images into the desired folder.

4...Test the Booger!!