davidw
02-12-2007, 10:00 PM
This should be a fairly easy modification to use - I had been using it for some time now and have decided not to use it anymore but thought someone else may want to use it.
Basically, it is a replacement navigation for the portal.
Step 1: Create the template in your style [ admincp => styles & templates => style manager => drop down All Style Options and choose Add New Template ]
Call it something like adv_portal_javanav (doesn't matter - you'll need it later).
Add this code in the template - change where appropriate (Sections, links, link titles)
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display= 'none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<table width="100%">
<tr>
<td class="tcat"><span class="smallfont"><strong>Site Navigation</strong></span></td>
</tr>
</table>
<dl id="menu">
<dt onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');"> Section 1</dt>
<dd id="smenu1" onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
<ul>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
</ul>
</dd>
<dt onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');"> Section 2</dt>
<dd id="smenu2" onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');">
<ul>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
</ul>
</dd>
<dt onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');"> Section 3</dt>
<dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');">
<ul>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
</ul>
</dd>
<dt onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');"> Section 4</dt>
<dd id="smenu4" onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');">
<ul>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
</ul>
</dd>
</dl>
Step 2: Add new CMPS module [ admincp => vBa CMPS => Add Module => [Template] ]
Module Title Site Navigation
Column Left (or your choice)
Display Order 1 (or whatever number)
Active Yes
Update All Pages Yes (unless you want to manually only set this on the home page, then choose no and edit your Home page and activate this module there)
Template to Include javanav (this is what comes after adv_portal_ when you created your tempalte (adv_portal_javanav for example)
Use Module Shell Template No (if you choose Yes here, you will most likely have to add <tr><td> before the code and </td></tr> after the code.)
Set your usergroup permissions and click save.
Step 3: You may need CSS help. If it doesn't act right, do this:
Go to your admincp => Styles & Templates => Style Manager => same style you edited before but choose Main CSS from the dropdown [All Style Options]
At the very bottom, under Additional CSS Definitions, scroll to the bottom of the top box and enter this code after everything else...
dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; }
#menu { width: 175px; }
#menu dt { cursor: pointer; background: #FFFFFF; height: 20px; line-height: 20px; margin: 2px 0; border: 1px solid gray; text-align: left; font-weight: bold; }
#menu dd { position: absolute; z-index: 100; left: 8em; margin-top: -1.4em; width: 15em; background: #FFFFFF; border: 1px solid gray; }
#menu ul { padding: 1px; }
#menu li { text-align: left; font-size: 85%; height: 18px; line-height: 18px; }
#menu li a, #menu dt a { color: #000; text-decoration: none; display: block; }
#menu li a:hover { text-decoration: underline; }
#mentions { font-family: verdana, arial, sans-serif; position: absolute; bottom : 200px; left : 15px; color: #000; background-color: #ddd; }
#mentions a { text-decoration: none; color: #222; }
#mentions a:hover { text-decoration: underline; }
Basically, it is a replacement navigation for the portal.
Step 1: Create the template in your style [ admincp => styles & templates => style manager => drop down All Style Options and choose Add New Template ]
Call it something like adv_portal_javanav (doesn't matter - you'll need it later).
Add this code in the template - change where appropriate (Sections, links, link titles)
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display= 'none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<table width="100%">
<tr>
<td class="tcat"><span class="smallfont"><strong>Site Navigation</strong></span></td>
</tr>
</table>
<dl id="menu">
<dt onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');"> Section 1</dt>
<dd id="smenu1" onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
<ul>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
</ul>
</dd>
<dt onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');"> Section 2</dt>
<dd id="smenu2" onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');">
<ul>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
</ul>
</dd>
<dt onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');"> Section 3</dt>
<dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');">
<ul>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
</ul>
</dd>
<dt onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');"> Section 4</dt>
<dd id="smenu4" onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');">
<ul>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
<li><a href="http://www.yoursite.com/link.php">Link</a></li>
</ul>
</dd>
</dl>
Step 2: Add new CMPS module [ admincp => vBa CMPS => Add Module => [Template] ]
Module Title Site Navigation
Column Left (or your choice)
Display Order 1 (or whatever number)
Active Yes
Update All Pages Yes (unless you want to manually only set this on the home page, then choose no and edit your Home page and activate this module there)
Template to Include javanav (this is what comes after adv_portal_ when you created your tempalte (adv_portal_javanav for example)
Use Module Shell Template No (if you choose Yes here, you will most likely have to add <tr><td> before the code and </td></tr> after the code.)
Set your usergroup permissions and click save.
Step 3: You may need CSS help. If it doesn't act right, do this:
Go to your admincp => Styles & Templates => Style Manager => same style you edited before but choose Main CSS from the dropdown [All Style Options]
At the very bottom, under Additional CSS Definitions, scroll to the bottom of the top box and enter this code after everything else...
dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; }
#menu { width: 175px; }
#menu dt { cursor: pointer; background: #FFFFFF; height: 20px; line-height: 20px; margin: 2px 0; border: 1px solid gray; text-align: left; font-weight: bold; }
#menu dd { position: absolute; z-index: 100; left: 8em; margin-top: -1.4em; width: 15em; background: #FFFFFF; border: 1px solid gray; }
#menu ul { padding: 1px; }
#menu li { text-align: left; font-size: 85%; height: 18px; line-height: 18px; }
#menu li a, #menu dt a { color: #000; text-decoration: none; display: block; }
#menu li a:hover { text-decoration: underline; }
#mentions { font-family: verdana, arial, sans-serif; position: absolute; bottom : 200px; left : 15px; color: #000; background-color: #ddd; }
#mentions a { text-decoration: none; color: #222; }
#mentions a:hover { text-decoration: underline; }