Best Drop Down Menu For Your Forum Index

[ghazal]

Post HTML Suite Plugin's DEMO

*** If you are looking for an affordable hosting with great support quality, click here! ***

Hello All ... !

Hope that you are enjoying your life,

In some forums I saw a beutiful DHTML drop down menu in the header of forum, and I wonder how they can make like that,
so finally I digg it out,

In this tutorial , I will give you step by step process of making such effect...

Name: Best Drop Down Menu For Your Forum Index
Description: A Classic DHTML Drop Down Menu ... Ohh man one gona go wild for it ... !
Coding: Much easy

So lets Start...

Go to Admin CP > Themes and Styles > Template > Your Theme Template > Index Template > index > Edit >

and now find < head > tag

below it add this code,

Code:[Highlight]

<style>
/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
  
/*Style for the background-bar*/
.clBar{position:absolute; width:10; height:10; background-color:#DADCBA; layer-background-color:#DADCBA; visibility:hidden}

/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding:2px; font-family:arial,helvetica; font-size:12px; font-weight:bold}
.clLevel0{background-color:#DADCBA; layer-background-color:#DADCBA; color:black;}
.clLevel0over{background-color:#DADCBA; layer-background-color:#DADCBA; color:#000080; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#DADCBA; layer-background-color:#006699}

/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:arial,helvetica; font-size:11px; font-weight:bold}
.clLevel1{background-color:#DADCBA; layer-background-color:#FCCE55; color:#006699;}
.clLevel1over{background-color:#006699; layer-background-color:#006699; color:#FCCE55; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#DADCBA; layer-background-color:#006699}

/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:arial,helvetica; font-size:10px; font-weight:bold}
.clLevel2{background-color:#DADCBA; layer-background-color:#FCCE55; color:#006699;}
.clLevel2over{background-color:#006699; layer-background-color:#0099cc; color:#CDDBEB; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#DADCBA; layer-background-color:#006699}
</style>

Edit... ? okay

Now find < body > tag within this template (i.e. index) and below it, add the following code,

Code:[Highlight]

<script language="JavaScript1.2" src="coolmenus4.js">
/*****************************************************************************
Copyright (c) 2001 Thomas Brattli (webmaster@dhtmlcentral.com)

DHTML coolMenus - Get it at coolmenus.dhtmlcentral.com
Version 4.0_beta
This script can be used freely as long as all copyright messages are
intact.

Extra info - Coolmenus reference/help - Extra links to help files ****
CSS help: http://coolmenus.dhtmlcentral.com/projects/coolmenus/reference.asp?m=37
General: http://coolmenus.dhtmlcentral.com/reference.asp?m=35
Menu properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=47
Level properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=48
Background bar properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=49
Item properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=50
******************************************************************************/
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
</script>
<script language="JavaScript1.2" src="menu.js"></script>

Now its time to download a zip file,


  coolmenus4.zip (Size: 13.28 KB / Downloads: 13)
Downloaded by :mactadvi, black, Mithokey, pumas09, McStormify, peakz, H0AX

After Downloading it,, Unzip it to your Forum Root/ directory,

NOTE: IT IS VERY NECESSARY THAT YOU SHOULD KEEP THESE FILES IN THE SAME ROOT DIRECTORY

Now Refresh your forum homepage...

and you will see some thing like this,

SCREENSHOT:
   

O man, One gona go wild of that.....

Point to Remember: That you can edit URLs by editing the menu.js file . These URLs are present in the 1/3rd of botom of that file.

Thankyou

Enjoy..!