MyBB Codes
Best Drop Down Menu For Your Forum Index - Printable Version

+- MyBB Codes (http://www.mybbcodes.com)
+-- Forum: Mods Database (/forumdisplay.php?fid=4)
+--- Forum: Tutorials for 1.4.x (/forumdisplay.php?fid=29)
+--- Thread: Best Drop Down Menu For Your Forum Index (/showthread.php?tid=207)


Best Drop Down Menu For Your Forum Index - ghazal - 09-01-2009 09:54 PM

Hello All ... !

Hope that you are enjoying your life, Smile

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, Smile

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

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 Rolleyes

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,

<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,

<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..... Tongue

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..! Cool


RE: Best Drop Down Menu For Your Forum Index - Rafael - 09-28-2009 11:52 AM

Wich one is better DHTML or CSS, I ve heard that CSS is much better than DHTML Huh


RE: Best Drop Down Menu For Your Forum Index - ghazal - 09-28-2009 12:31 PM

(09-28-2009 11:52 AM)Rafael Wrote:  Wich one is better DHTML or CSS, I ve heard that CSS is much better than DHTML Huh

I personally likes CSS. DHTML may make errors while loading.


RE: Best Drop Down Menu For Your Forum Index - fasfasfasf - 10-08-2009 09:47 AM

Big GrinBig GrinBig GrinBig Grin


RE: Best Drop Down Menu For Your Forum Index - ghazal - 10-10-2009 12:37 AM

(10-08-2009 09:47 AM)fasfasfasf Wrote:  Big GrinBig GrinBig GrinBig Grin

Any Comments Huh


RE: Best Drop Down Menu For Your Forum Index - loveit - 12-28-2009 07:29 AM

I've been looking this everywhere !
tyty


RE: Best Drop Down Menu For Your Forum Index - naqshbandios_limra - 01-05-2010 12:21 PM

Thats coool


RE: Best Drop Down Menu For Your Forum Index - shaks786 - 01-05-2010 07:11 PM

what do you mean when you say "find tag"?
thank you


RE: Best Drop Down Menu For Your Forum Index - exdiogene - 01-17-2010 10:00 AM

(01-05-2010 07:11 PM)shaks786 Wrote:  what do you mean when you say "find tag"?
thank you

I have corrected "Ghazal" post so you can see the tags names.


RE: Best Drop Down Menu For Your Forum Index - Chandy - 03-19-2010 01:55 AM

Very nice one thx


RE: Best Drop Down Menu For Your Forum Index - Bane95 - 04-24-2010 02:33 AM

I think this topic circulating around the internet Sad


RE: Best Drop Down Menu For Your Forum Index - mactadvi - 09-10-2010 03:40 PM

yes this i slooking really cool and i am going to add this to my forum.


RE: Best Drop Down Menu For Your Forum Index - FusionLord - 09-10-2010 06:45 PM

test comment
testcomment number2


RE: Best Drop Down Menu For Your Forum Index - pumas09 - 01-18-2011 12:31 AM

THANKS im gonna used this !


RE: Best Drop Down Menu For Your Forum Index - _Un!corn - 08-08-2011 09:14 AM

w0w.. Its CoOoLLL Smile


RE: Best Drop Down Menu For Your Forum Index - roode - 09-14-2011 05:25 AM

thanks ...


RE: Best Drop Down Menu For Your Forum Index - metonator - 04-29-2014 05:44 AM

wow! that's a good idea!


RE: Best Drop Down Menu For Your Forum Index - 16minuteslate - 05-22-2017 10:55 AM

this is great