Southern Illinois University Edwardsville Logo
Apply to SIUE
Information Technology Services
Information Technology Services
Institutional Header

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

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

black 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

red 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

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

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

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

back to previous

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

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

facebookoff twitteroff vineoff linkedinoff flickeroff instagramoff googleplusoff tumblroff foursquareoff socialoff