09-01-2009, 09:54 PM
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,
Edit... ? okay
Now find < body > tag within this template (i.e. index) and below it, add the following code,
Now its time to download a zip file,
[attachment=160]
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:
[attachment=159]
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..!
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,
[attachment=160]
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:
[attachment=159]
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..!
