skip to primary navigationskip to content
 

Adding an a-z selector bar to a page, or on multiple linked pages

There is a block of code that may be used to add a selector bar to a page, as is used on the A-Z on the page http://www.ucs.cam.ac.uk/az/intro - to add the code you need to be in the html view of the page. You may find it easier to alter the code to suit in a text editor and then paste it into the html view of a page.

The code will cause the following block to be created:

Select please selectABCDEFGHIJKLMNOPQRSTUVWXYZ

In order to use it you first need to allow the label and option tags to be used on the site, which you would do by going to Site setup > HTML filtering, selecting the tags and clicking on 'Remove selected tags' and saving. If you don't do this those tags will be stripped from the code block.

The code that is used to create this bar is as follows

<div class="az-list">
<ul><li><a href="#a">A <span class="campl-list-indicator"></span></a></li>
<li><a href="#b">B <span class="campl-list-indicator"></span></a></li>
<li><a href="#c">C <span class="campl-list-indicator"></span></a></li>
<li><a href="#d">D <span class="campl-list-indicator"></span></a></li>
<li><a href="#e">E <span class="campl-list-indicator"></span></a></li>
<li><a href="#f">F <span class="campl-list-indicator"></span></a></li>
<li><a href="#g">G <span class="campl-list-indicator"></span></a></li>
<li><a href="#h">H <span class="campl-list-indicator"></span></a></li>
<li><a href="#i">I <span class="campl-list-indicator"></span></a></li>
<li><a href="#j">J <span class="campl-list-indicator"></span></a></li>
<li><a href="#k">K <span class="campl-list-indicator"></span></a></li>
<li><a href="#l">L <span class="campl-list-indicator"></span></a></li>
<li><a href="#m">M <span class="campl-list-indicator"></span></a></li>
<li><a href="#n">N <span class="campl-list-indicator"></span></a></li>
<li><a href="#o">O <span class="campl-list-indicator"></span></a></li>
<li><a href="#p">P <span class="campl-list-indicator"></span></a></li>
<li><a href="#q">Q <span class="campl-list-indicator"></span></a></li>
<li><a href="#r">R <span class="campl-list-indicator"></span></a></li>
<li><a href="#s">S <span class="campl-list-indicator"></span></a></li>
<li><a href="#t">T <span class="campl-list-indicator"></span></a></li>
<li><a href="#u">U <span class="campl-list-indicator"></span></a></li>
<li><a href="#v">V <span class="campl-list-indicator"></span></a></li>
<li><a href="#w">W <span class="campl-list-indicator"></span></a></li>
<li><a href="#x">X <span class="campl-list-indicator"></span></a></li>
<li><a href="#y">Y <span class="campl-list-indicator"></span></a></li>
<li><a href="#z">Z <span class="campl-list-indicator"></span></a></li>
</ul>
<div class="campl-mobile-list-layout"><label class="hidden" for="navigation-select">Select</label> <select id="navigation-select"><option value="">please select</option><option value="#a">A</option><option value="#b">B</option><option value="#c">C</option><option value="#d">D</option><option value="#e">E</option><option value="#f">F</option><option value="#g">G</option><option value="#h">H</option><option value="#i">I</option><option value="#j">J</option><option value="#k">K</option><option value="#l">L</option><option value="#m">M</option><option value="#n">N</option><option value="#o">O</option><option value="#p">P</option><option value="#q">Q</option><option value="#r">R</option><option value="#s">S</option><option value="#t">T</option><option value="#u">U</option><option value="#v">V</option><option value="#w">W</option><option value="#x">X</option><option value="#y">Y</option><option value="#z">Z</option></select></div>
</div>

The second block of code creates the mobile version of the bar, which looks like this:

In this example the bar is on a page and all the links are to anchors within the page. If you use the bar across multiple pages you will need to create links between the pages on the bar by modifying the 'href=""' on each letter. In this circumstance, you will also want to add a marker for the item that is in use - this is done by adding "class="selected" " to link on the active letter as on the letter 'a' in this example:

Select please selectABCDEFGHIJKLMNOPQRSTUVWXYZ

 

<div class="az-list">
<ul><li><a class="selected" href="#a">A <span class="campl-list-indicator"></span></a></li>
<li><a href="#b">B <span class="campl-list-indicator"></span></a></li>
<li><a href="#c">C <span class="campl-list-indicator"></span></a></li>
<li><a href="#d">D <span class="campl-list-indicator"></span></a></li>
<li><a href="#e">E <span class="campl-list-indicator"></span></a></li>
<li><a href="#f">F <span class="campl-list-indicator"></span></a></li>
<li><a href="#g">G <span class="campl-list-indicator"></span></a></li>
<li><a href="#h">H <span class="campl-list-indicator"></span></a></li>
<li><a href="#i">I <span class="campl-list-indicator"></span></a></li>
<li><a href="#j">J <span class="campl-list-indicator"></span></a></li>
<li><a href="#k">K <span class="campl-list-indicator"></span></a></li>
<li><a href="#l">L <span class="campl-list-indicator"></span></a></li>
<li><a href="#m">M <span class="campl-list-indicator"></span></a></li>
<li><a href="#n">N <span class="campl-list-indicator"></span></a></li>
<li><a href="#o">O <span class="campl-list-indicator"></span></a></li>
<li><a href="#p">P <span class="campl-list-indicator"></span></a></li>
<li><a href="#q">Q <span class="campl-list-indicator"></span></a></li>
<li><a href="#r">R <span class="campl-list-indicator"></span></a></li>
<li><a href="#s">S <span class="campl-list-indicator"></span></a></li>
<li><a href="#t">T <span class="campl-list-indicator"></span></a></li>
<li><a href="#u">U <span class="campl-list-indicator"></span></a></li>
<li><a href="#v">V <span class="campl-list-indicator"></span></a></li>
<li><a href="#w">W <span class="campl-list-indicator"></span></a></li>
<li><a href="#x">X <span class="campl-list-indicator"></span></a></li>
<li><a href="#y">Y <span class="campl-list-indicator"></span></a></li>
<li><a href="#z">Z <span class="campl-list-indicator"></span></a></li>
</ul>
<div class="campl-mobile-list-layout"><label class="hidden" for="navigation-select">Select</label> <select id="navigation-select"><option value="">please select</option><option value="#a">A</option><option value="#b">B</option><option value="#c">C</option><option value="#d">D</option><option value="#e">E</option><option value="#f">F</option><option value="#g">G</option><option value="#h">H</option><option value="#i">I</option><option value="#j">J</option><option value="#k">K</option><option value="#l">L</option><option value="#m">M</option><option value="#n">N</option><option value="#o">O</option><option value="#p">P</option><option value="#q">Q</option><option value="#r">R</option><option value="#s">S</option><option value="#t">T</option><option value="#u">U</option><option value="#v">V</option><option value="#w">W</option><option value="#x">X</option><option value="#y">Y</option><option value="#z">Z</option></select></div>
</div>