Forum Post Menu

This script adds an accordion style menu with links to forum topics that once clicked will open the forum post in another content box area (see screenshot below) to make it easier to organize important posts. This is the same menu system that I'm using on my Help site home page.

Features include:

• A link that will restore the original content message from inside the menu box
• Accordian style menu that only allows one open topic header at a time
• Links to forums posts open the topic inside the content box area
• Using the middle mouse button on a link will open the topic in a new tab
• Icons will highlight new or updated posts - they automatically clear after two months have passed.

The Code (Menu)

<style type="text/css">
/* A few IE bug fixes */
* ul#contentMenu, ul#contentMenu li ul { margin: 0; padding: 0; }
* html ul#contentMenu li a { height: 100%; }
* html ul#contentMenu ul li { margin-bottom: -1px; }
* html ul#contentMenu ul li a { height: 100%; margin: 2px auto; }

/* Some list and link styling */
ul#contentMenu { list-style-type: none; margin: 0px 5px; cursor: pointer; width: 200px; }
ul#contentMenu ul li { border: 0px; margin: 2px 5px 2px 20px; list-style-type: disc; position: static;}
ul#contentMenu ul li a { display: block; border: transparent 2px solid; padding: 0px; }
ul#contentMenu ul li a:hover { display:block; background: #333333; border: #333333 2px solid; padding: 0px; }
h5.head { width:100%; font-size: 10pt; cursor:pointer; margin:0px; }
h5:hover { background: #333333; border: 0px; }
h5.selected { background: #00496c; }

#contentMenu .new { list-style-type:none; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/new.gif) no-repeat; margin-left:0px; padding-left:22px; }
#contentMenu .update { list-style-type:none; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/update.gif) no-repeat; margin-left:0px; padding-left:22px; }

/* Header Link Styling */
h5.head {margin:0px;}
 .MessageSignature, .MessageToonContainer1 { display: none; }
</style>

<div id="preload" style="display: none;"></div>
<script type="text/javascript">
var contentMenuSpeed = 300;
var nummon = 2;  // keep new/update labels for 3 months (this month + 2 more)

// *****************************
// Don't Change Anything Below
//*****************************
$(document).ready(function() {
  // make accordion
 $('#contentMenu h5').click(function(){
  var active = $(this).html();
  $(this).toggleClass('selected').next().toggle(contentMenuSpeed);
  $('#contentMenu h5').each(function(){
   if ($(this).html()!=active) {
    $(this).removeClass('selected').next().hide(contentMenuSpeed);
   }
  });
 }).next().hide();

 // restore welcome message
$('h5.restoreWelcome').click(function(){
 $('#contentBox').hide();
 $('#contentMessage').show();
});

// load content and display
 $('#contentMenu a').click(function(){
  $(this).parent().addClass('selected');
  var instLink = $(this).attr('href');
  var toLoad = instLink.substring(instLink.lastIndexOf('/Guild.aspx'), instLink.lastIndexOf('#')) + ' td.MessageBodyCell1';
  instLink = instLink.substring(instLink.lastIndexOf('#') + 1, instLink.length);
  $('#preload').load(toLoad, function(){
   var content = $('#preload td.MessageBodyCell1 a[name=' + instLink + ']').closest('.MessageBodyCell1');
   if (content.length){
    $('#contentBox').html( content.html() ).show();
    $('#contentMessage').hide();
   }
  });
  return false;
 });

// Mark Link as new or updated depending on the class
// n0409 = new on 04/09 and u0309 = updated on 03/09
 var tmp, linu, limon, liyr, newyr, now = new Date(),
  nowmon = now.getMonth() + 1, // months are stored as zero based numbers (Jan = 0, Dec = 11)
  nowyr = now.getFullYear() - 2000; // just need the last two digits
 $('#contentMenu li').each(function(){
  tmp = $(this).attr('class');
  if (tmp && tmp !== '') {
   linu = tmp.substring(0,1);
   limon = parseInt(tmp.substring(1,3),10);
   liyr = parseInt(tmp.substring(3,5),10);
   newyr = (limon + nummon > 12 && limon + nummon - 12 >= nowmon && (liyr + 1) == nowyr) ? true : false;
   if ( (liyr == nowyr && limon + nummon >= nowmon) || newyr ) {
    tmp = (linu == 'n') ? 'new' : 'update';
    $(this).addClass(tmp);
   }
  }
 });
});
</script>
<!--
*****************************
 Edit the HTML below!
***************************** -->

<div>
<h5 class="head restoreWelcome">&nbsp;CONTENT MESSAGE</h5>
<ul id="contentMenu">

<!-- Add new topic header blocks below
********************************* -->

<li style="position: static;">
<h5 class="head">TOPIC HEADER 1</h5>
 <ul style="display: none;">
  <li class="n0509"><a href="URL TO POST">Topic 1: Post 1</a></li>
  <li class="u0509"><a href="URL TO POST">Topic 1: Post 2</a></li>
 </ul>
</li>

<li style="position: static;">
<h5 class="head">TOPIC HEADER 2</h5>
 <ul style="display: none;">
  <li><a href="URL TO POST">Topic 2: Post 1</a></li>
  <li><a href="URL TO POST">Topic 2: Post 2</a></li>
</ul>
</li>

<li style="position: static;">
<h5 class="head">TOPIC HEADER 3</h5>
 <ul style="display: none;">
  <li><a href="URL TO POST">Topic 3: Post 1</a></li>
  <li><a href="URL TO POST">Topic 3: Post 2</a></li>
 </ul>
</li>

<!-- Add new topic header blocks above
********************************* -->
</ul>
<hr>
<center><img style="vertical-align: middle;" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/new.gif"> <span style="font-size: 75%;">New Post</span> <img style="vertical-align: middle;" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/update.gif"> <span style="font-size: 75%;">Updated Post</span>
</center>
</div>

The Code (Content Box)

<div id="contentBox"></div>
<div id="contentMessage">
<h2>This is my content message</h2>
This is my content message text... Put whatever you want here.
</div>

Adding this Code

• Pick a page and add two free form text/HTML type content boxes. The "Menu" code should be placed in a side zone while the "Content Box" code should be placed into the center zone (or even inside the Welcome message like I did, but make sure you have the same message for everyone).
• When adding this code, make sure you do so while in HTML mode ().

Customizing

CSS

• The CSS for this content menu took a lot of tweeking to make it look right, so if you want to change something try changing one thing at a time to make sure that it doesn't mess up completely.
• Content Menu Width: Adjust the width of the menu, by changing the width in "ul#contentMenu" from 200px to the size you desire.
• Header Selected Color: When a (topic) header is selected, the CSS that sets the color is "h5.selected". Change the background color to match your site. The default color in the CSS is "#00496c;" which is a light blue color
• Hover Color: When you hover over a topic header or topic, there is a color change to help you see where you are pointing. I would recommend making both the topic header and topic hover colors the same to keep from distracting users, but you can do whatever you want.
  
  
  • Change the topic header hover color in the CSS class "h5:hover" - the default background color is "#333333;"
  • Change the topic hover color in the CSS class "ul#contentMenu ul li a:hover" - the default background and border color here is "#333333;".

• Notifications Icons: You can replace the bullets that mark each topic with an icon that shows if the topic is new or has been updated. The script rounds to the nearest month because I didn't bother making it figure out how many days have passed. So basically it adds the icon for 2 months from when you set the date on it, starting from the 1st of the month... I may change it in the future, but I wasn't that worried about exact dates.
  
  
  • Replace the New icon () URL (in orange) in the CSS class "#contentMenu .new". Make sure the new icon is around 20 x 20 pixels or you'll have to adjust the padding-left size (in red) to align it with the other bullets.
    
    #contentMenu .new { list-style-type:none; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/new.gif) no-repeat; margin-left:0px; padding-left:22px; }
  • Replace the Updated icon () URL (in orange) in the CSS class "#contentMenu .update". Make sure this icon is also around 20 x 20 pixels or adjust the padding-left (in red) accordingly.
    
    #contentMenu .update { list-style-type:none; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/update.gif) no-repeat; margin-left:0px; padding-left:22px; }

Adding Topics

• Restore Content Message Link: The topmost topic header is actually the link to restore the original Content Message. You only need to edit the title in teal to display the title of the message. Also leave the "&nbsp;" to the left of the title as it aligns it with the other topic headers.
  
  <h5 class="head" onclick="restoreContent()">&nbsp;CONTENT MESSAGE</h5>
• Template to add a topic block: Add new topics by adding the template below:
  

  <li style="position: static;">
  <h5 class="head">TOPIC HEADER 1</h5>
   <ul style="display: none;">
    <li class="n0509"><a href="URL TO POST">Topic 1: Post 1</a></li>
    <li class="u0509"><a href="URL TO POST">Topic 1: Post 2</a></li>
   </ul>
  </li>
  

• Template to add more topics: Edit or add additional topics within the topic header using this format:
  
  <li class="n0509"><a href="URL TO POST">Topic 1: Post 1</a></li>
• Topic Header Title: Replace the Topic Header title (in teal) between the <h5> tags
  
  <h5 class="head">TOPIC HEADER 1</h5>
• Notification Icons: The new or updated icon can be added by adding a class to the <li>. The class is broken down as follows:
  
  class="n0509"
  
  • The 'n' at the beginning tells the script to pick the 'new' icon (). Replacing it with a 'u' tells the script to use the 'upated' icon ()
  • The four numbers (0509) that follow the 'n' or 'u' tell the script that the post was made on 05/09, or May 2009. It will then continue the replace the bullet with the new or updated icon for two months - it will stop on 0809 (August 1st, 2009). Don't include the slash between the month and year.
  • If you don't add a class to the <li> tag, then it will not add an icon.
• Forum Post URL: The URL you put into the "URL TO POST" should be the post link you see at the top of every post in the forums. The link should contain the full URL including the post number (#40826777):
  

  http://guildportal.com/Guild.aspx?GuildID=258012&TabID=2168224&ForumID=1235441&TopicID=8245530&Page=1#40826777

  This is necessary as the content box will only contain that one post and not the entire topic.
• Topic Title: Basically replace the text in green with the title of the post.

Topic Icon Key

• This may not be necessary, but it's basically showing the icon and saying if it means the topic is new or updated at the bottom of the menu. If you notice the Updated icon only has "UPD" on it LOL.. you try to fit the word updated and make it readable on a 20 x 20 icon LOL.
• Anyway, you can edit/remove this if you want. It's the HTML at the bottom of the menu code:
  
  <hr>
  <center><img style="vertical-align: middle;" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/new.gif"> <span style="font-size: 75%;">New Post</span> <img style="vertical-align: middle;" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/update.gif"> <span style="font-size: 75%;">Updated Post</span>
  </center>

Edit (9/7/2009): Fixed the script so it once again works with IE.
Edit (11/18/2009): Updated code so now the subdomain of guildportal doesn't cause problems loading the content ( http://subdomain.guildportal.com/Guild.aspx.... )
Edit (1/12/2010): Fixed the notification icon calculations, it wasn't showing any icons for new/updated posts across the new year. Revised code is highlighted in blue.
Edit (3/1/2010): Fixed the code again.. apparently my math mojo was bad LOL. Now the icons will show across the new year properly. The revised code from Jan was replaced and new code is now highlighted in green.
Edit (9/14/2010): FIxed a problem with the new and updated icons still showing up. Cleaned up the code a tiny bit as well.
Edit (6/6/2011): Updated to fix a problem with the icons not showing up with the recent update of jQuery.
Edit (6/16/2011): Oops, I had the menu code looking for "instruct" instead of "contentMenu"
Edit (6/17/2011): LOL more bug fixes, thanks TimelordDC!

Updated the script and some of the HTML because apparently I'm still really bad at math LOL.

Hi Pinstripesc!

Sorry, I've been busy and must have missed this question, did you ever get this working?

Updated to fix the new/updated icons that stopped working with the new version of jQuery.

Hi TimelordDC!

Oops, I think when I fixed the code last week, I used the wrong ID in the code... I've used "instruct" instead of "contentMenu". It's fixed in the code above.