MyBB Community Forums - [Tutorial] Best Drop Down Menu For Your Forum Home...

Pages: 1 2

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

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

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 ([email protected])

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,

CLICK HERE to download...

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,

Snapshot:
[attachment=13461]

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

Point to Remeber: 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

Ghazal Heart

That might be useful for me in the future. Nice Find.

(2009-04-12, 03:07 AM)Pow-Mia Wrote: [ -> ]Glad you approve, it is an Good Find. even if its patronizing in a constructive way

I can't believe you're still doing this - especially since the PMs I sent you this morning.
It is not necessary for you to follow Chasingu and post in all the threads he does.

Quit it or you'll find yourself on a little break from these forums.

@ ghazal: Nice work there. Sorry about this happening in your thread.

(2009-04-12, 03:18 AM)Ryan Loos Wrote: [ -> ]Sorry about this happening in your thread.

Thanks Rhino, But I didnot understand this sentence Undecided

Ryan and Pow Mia , I again didnot know what is the matter, ??
Can you explain me in more details, ??
Thanks ghazal

@ghazal: Never mind. It has nothing to do with you. Smile

Thank you for this tutorial.

Pow mia pm'd me today in which he told me some happenings going on their in mien thread and in one of his thread,

Is this happened today or I am walking in the black streets

As I said, it has nothing to do with you. I am not here to gossip.

If someone wants to PM you that is their business.

Rhino I was very disturb when he PM'ed me, he said that some one deleting threads and posts without any warning...

So I am now feeling well when you reply to this thread

Thankyou rhino, so nice of you Smile

I like the idea of this drop down menu, but I'm not prepared to register to something just to get the needed file for it. can't you just attach the file here?

Pages: 1 2