Information Technology Services

Cascade Tutorials

Navigation Box Source Codes

The following boxes and elements are the basic options available for navigation in the left and or right columns of your SIUE Cascade web pages.

The code for the individual boxes is listed after an example of each box below.

The code can by copied and pasted into the 'HTML Source Editor' of your column component file(s) to create more boxes.

After you have copied and pasted the code, you can then go in and edit the links and box title.

If you have any questions about this process, you can contact us.

---------------------

Red/Grey Box

<dl class="redGrey">
<dt>Red/Grey Link Box</dt>
<dd><a href="#">Black Box Link #1 </a> <br />
<a href="#">Black Box Link #2 </a><br />
<a href="#">Black Box Link #3 </a><br />
<a href="#">Black Box Link #4 </a></dd>
</dl>

---------------------

Black Link Box

<dl>
<dt>Black Link Box </dt>
<dd><a href="#">Black Box Link #1 </a> <br />
<a href="#">Black Box Link #2 </a><br />
<a href="#">Black Box Link #3 </a><br />
<a href="#">Black Box Link #4 </a></dd>
</dl>

---------------------

Red Link Box

<dl class="red">
<dt>Red Link Box</dt>
<dd><a href="#">Red Box Link #1 </a><br />
<a href="#">Red Box Link #2 </a> </dd>
</dl>

---------------------

Single Link With Border

<h2 style="position: absolute; left: -200em; top:-20em;">Main Navigation</h2>
<ul class="border">
<li><a href="#">Single Link with Border</a></li>
<li><a href="#">Single Link with Border</a></li>
</ul>

---------------------

Single Link Without Border

<h2 style="position: absolute; left: -200em; top:-20em;">Main Navigation</h2>
<ul>
<li><a href="#">Single Link without Border</a></li>
<li><a href="#">Single Link without Border</a></li>
</ul>

---------------------

Content Box

<dl class="text">
<dt>Text Box Header </dt>
<dd><strong>Content Box</strong><br />
Testing Information Here is a block of information with some links below. <a href="#">Link #1</a>, <a href="#">Link #2 </a></dd>
</dl>

---------------------

Back To Previous Page Single Link Box

<ul class="border">
<li><a href="javascript:history.go(-1)">Back to Previous Page</a></li>
</ul>

---------------------