University of Vermont

UVM Self-help Web Guide

A-Z Bars

A-Z remains one of the most popular pages on the UVM website. If you have a large website, you may opt to customize and build your own departmental A-Z. Categorizing the items is manual. Here's how to create the functionality:

The alpha bar style can be created using <p class="alpha"> </p>. It will display like this:

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A

B

How to:

Code for the above example:

<p class="alpha">
<a href="?Page=a_z.html#A">A</a>
<a href="?Page=a_z.html#B">B</a>
<a href="?Page=a_z.html#C">C</a>
<a href="?Page=a_z.html#D">D</a>
<a href="?Page=a_z.html#E">E</a>
<a href="?Page=a_z.html#F">F</a>
<a href="?Page=a_z.html#G">G</a>
<a href="?Page=a_z.html#H">H</a>
<a href="?Page=a_z.html#I">I</a>
<a href="?Page=a_z.html#J">J</a>
<a href="?Page=a_z.html#K">K</a>
<a href="?Page=a_z.html#L">L</a>
<a href="?Page=a_z.html#M">M</a>
<a href="?Page=a_z.html#N">N</a>
<a href="?Page=a_z.html#O">O</a>
<a href="?Page=a_z.html#P">P</a>
<a href="?Page=a_z.html#Q">Q</a>
<a href="?Page=a_z.html#R">R</a>
<a href="?Page=a_z.html#S">S</a>
<a href="?Page=a_z.html#T">T</a>
<a href="?Page=a_z.html#U">U</a>
<a href="?Page=a_z.html#V">V</a>
<a href="?Page=a_z.html#W">W</a>
<a href="?Page=a_z.html#X">X</a>
<a href="?Page=a_z.html#Y">Y</a>
<a href="?Page=a_z.html#Z">Z</a>
</p>

<h4 id="A" >A</h4>

<ul class="nobullet">
<li><a href="examplelink.html">list item 1</a></li>
<li><a href="examplelink.html">list item 2</a></li>
</ul>
<h4 id="B">B</h4>
<ul class="nobullet">
<li><a href="examplelink.html">list item 1</a></li>
</ul>

Last modified September 13 2011 01:06 PM