Results 1 to 15 of 15
Thread: DHTML Menus....
-
09-14-2003, 10:49 AM #1Web Hosting Master
- Join Date
- Aug 2002
- Location
- London, UK
- Posts
- 9,039
DHTML Menus....
Hi,
Im looking around at DHTML menus and just thought I would ask you to post your favorite ones, both free and paid....
I myself am looking for a nice menu which works the same as this one:
http://simplythebest.net/scripts/dhtml_script_116.html
Vertical dropdown style, but Im having a hard time finding one which appeals to me, so help me outMatt Wallis
United Communications Limited
High Performance Shared & Reseller | Managed VPS Cloud | Managed Dedicated
UK www.unitedhosting.co.uk | US www.unitedhosting.com | Since 1998.
-
09-14-2003, 11:19 AM #2Web Hosting Master
- Join Date
- May 2002
- Location
- UK
- Posts
- 2,997
In my opinion it's got to be Hiermenus http://www.webreference.com/dhtml/hiermenus/
Seen many commerical sites using these.
-
09-14-2003, 11:24 AM #3Web Hosting Master
- Join Date
- Aug 2002
- Location
- London, UK
- Posts
- 9,039
Nice script, but i need it to work like the example I posted (cascading drop down)
Matt Wallis
United Communications Limited
High Performance Shared & Reseller | Managed VPS Cloud | Managed Dedicated
UK www.unitedhosting.co.uk | US www.unitedhosting.com | Since 1998.
-
09-14-2003, 02:28 PM #4Web Hosting Master
- Join Date
- May 2001
- Posts
- 1,006
I think what you are looking for is the "Smart Folding Menu Tree"
You can download/copy it from:
http://www.dynamicdrive.com/dynamicindex1/index.html
There are about a dozen types of dropdown menus, scroll down and select "Smart Folding Menu Tree" it's almost at the bottom of the page.
RegardsWHO AM I? CLICK HERE!
-
09-14-2003, 02:32 PM #5Web Hosting Master
- Join Date
- Aug 2002
- Location
- London, UK
- Posts
- 9,039
Hmm - nope, I need it like the example I posted in my original post (not like a folder/file system). Thanks for your input though!
Matt Wallis
United Communications Limited
High Performance Shared & Reseller | Managed VPS Cloud | Managed Dedicated
UK www.unitedhosting.co.uk | US www.unitedhosting.com | Since 1998.
-
09-14-2003, 07:34 PM #6Junior Guru Wannabe
- Join Date
- Dec 2001
- Location
- Vancouver
- Posts
- 49
Here is a free one:
http://www.youngpup.net/?request=/co...deOutMenus.xml
It's clean and simple to set up but only supports one level of menu.
Here is a paid one:
http://www.milonic.com/
£22.99 for a single domain license for commercial use. It supports mult-level menu and has many styles to choose from.
-
09-14-2003, 07:41 PM #7Web Hosting Master
- Join Date
- Aug 2002
- Location
- London, UK
- Posts
- 9,039
Im already using the YP one elsewhere
This menu has to be in the virtical position as my original example shows, and all the sliding needs to be downwards, not left->left.Matt Wallis
United Communications Limited
High Performance Shared & Reseller | Managed VPS Cloud | Managed Dedicated
UK www.unitedhosting.co.uk | US www.unitedhosting.com | Since 1998.
-
09-15-2003, 10:28 AM #8Web Hosting Master
- Join Date
- Jul 2002
- Location
- Sweden
- Posts
- 2,059
I got this off of 1stpage2000, hope it helps. It can be customized, I have done so myself, so...
Code:<style> <!-- DIV.clTop{position:absolute; width:170} DIV.clSub{position:absolute; left:10; width:170} #divCont{position:relative; left:100; top:0; height:400; width:170;} A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; font-weight:bold; color:black} A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; color:black} #divMain{position:absolute} //--> </style> <script language="JavaScript"> /******************************************************************************** Copyright (C) 1999 Thomas Brattli This script is made by and copyrighted to Thomas Brattli at www.bratta.com Visit for more great scripts. This may be used freely as long as this msg is intact! ********************************************************************************/ /************************************************************************************ This script is a "foldout" menu script, all the "foldouts" will stay outfolded in older browsers. Works in ie4+ and ns4+. To change where the menu appears change the left and top values of the divCont in the stylesheets, it's currently placed relative so you can place this menu in tables or similar if you want. Change the text colors and size in the A.clMain and A.clSubb classes. ************************************************************************************/ /************************************************************************************ Change this to false if you want all the submenus to get unfold when you foldout a new one. ************************************************************************************/ var stayFolded=false /************************************************************************************ Browsercheck ************************************************************************************/ var n = (document.layers) ? 1:0; var ie = (document.all) ? 1:0; var browser=((n || ie) && parseInt(navigator.appVersion)>=4) /************************************************************************************ Making cross-browser objects ************************************************************************************/ function makeMenu(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style') this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document'); this.height=n?this.ref.height:eval(obj+'.offsetHeight') this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop; this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt return this } function b_showIt(){this.css.visibility="visible"} function b_hideIt(){this.css.visibility="hidden"} function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;} function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y} /************************************************************************************ Initiating the page. Just add to the arrays here to get more menuitems and add divs in the page ************************************************************************************/ function init(){ oTop=new Array() oTop[0]=new makeMenu('divTop1','divCont') oTop[1]=new makeMenu('divTop2','divCont') oTop[2]=new makeMenu('divTop3','divCont') oTop[3]=new makeMenu('divTop4','divCont') oTop[4]=new makeMenu('divTop5','divCont') oTop[5]=new makeMenu('divTop6','divCont') oSub=new Array() oSub[0]=new makeMenu('divSub1','divCont.document.divTop1') oSub[1]=new makeMenu('divSub2','divCont.document.divTop2') oSub[2]=new makeMenu('divSub3','divCont.document.divTop3') oSub[3]=new makeMenu('divSub4','divCont.document.divTop4') oSub[4]=new makeMenu('divSub5','divCont.document.divTop5') oSub[5]=new makeMenu('divSub6','divCont.document.divTop6') for(i=0;i<oSub.length;i++){ oSub[i].hideIt() } for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } } /************************************************************************************ This is the function that changes the sub menus to folded or unfolded state. ************************************************************************************/ function menu(num){ if(browser){ if(!stayFolded){ for(i=0;i<oSub.length;i++){ if(i!=num) oSub[i].hideIt() } for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } } oSub[num].vis()?oSub[num].showIt():oSub[num].hideIt() for(i=1;i<oTop.length;i++){ if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height) else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) } } } //Initiating the menus onload, if it's a 4.x+ browser. if(browser) onload=init; </script> </HEAD> <BODY bgcolor="white"> <!--************************************************************************************ Replace your links with the # inside the a tags to get links. ************************************************************************************--> <div id="divCont"> <div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain">[choice 0]</a><br> <div id="divSub1" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> <a href="#" class="clSubb">-Sub 3</a><br> <a href="#" class="clSubb">-Sub 4</a><br> </div><br> </div> <div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain">[choice 1]</a><br> <div id="divSub2" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> </div><br> </div> <div id="divTop3" class="clTop"><a href="#" onclick="menu(2); return false" class="clMain">[choice 2]</a><br> <div id="divSub3" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> <a href="#" class="clSubb">-Sub 3</a><br> </div><br> </div> <div id="divTop4" class="clTop"><a href="" onclick="menu(3); return false" class="clMain">[choice 3]</a><br> <div id="divSub4" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> </div><br> </div> <div id="divTop5" class="clTop"><a href="" onclick="menu(4); return false" class="clMain">[choice 4]</a><br> <div id="divSub5" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> <a href="#" class="clSubb">-Sub 2</a><br> <a href="#" class="clSubb">-Sub 3</a><br> <a href="#" class="clSubb">-Sub 4</a><br> <a href="#" class="clSubb">-Sub 5</a><br> </div><br> </div> <div id="divTop6" class="clTop"><a href="" onclick="menu(5); return false" class="clMain">[choice 5]</a><br> <div id="divSub6" class="clSub"> <a href="#" class="clSubb">-Sub 1</a><br> </div><br> </div> </div>
"Stop flame-wars - Report a post"
The original Kitty Lizard
-
09-15-2003, 10:43 AM #9Web Hosting Master
- Join Date
- Aug 2002
- Location
- London, UK
- Posts
- 9,039
Thats not bad!
I have some flashy versions of that, but the reason I posted this thread is because I needed a much simpler version as my php was having some major conflicts with some of the tricky code.
I think I can build on this one - thanks RF!Matt Wallis
United Communications Limited
High Performance Shared & Reseller | Managed VPS Cloud | Managed Dedicated
UK www.unitedhosting.co.uk | US www.unitedhosting.com | Since 1998.
-
09-15-2003, 10:46 AM #10Web Hosting Master
- Join Date
- Jul 2002
- Location
- Sweden
- Posts
- 2,059
No problem I found it easy to configure, and I have a different one with a bullet image as well. It's very neat and tidy.
"Stop flame-wars - Report a post"
The original Kitty Lizard
-
09-15-2003, 12:56 PM #11Texan at Heart
- Join Date
- Jul 2003
- Location
- Castle Pines, CO
- Posts
- 7,189
What about this one:
http://www.dynamicdrive.com/dynamici...menu/index.htm
Very easy to configure. I used it @ http://www.merchantaccounts4less.com
-
09-15-2003, 12:58 PM #12Web Hosting Master
- Join Date
- Aug 2002
- Location
- London, UK
- Posts
- 9,039
That slides out to the side, I need it to slide up and down
Matt Wallis
United Communications Limited
High Performance Shared & Reseller | Managed VPS Cloud | Managed Dedicated
UK www.unitedhosting.co.uk | US www.unitedhosting.com | Since 1998.
-
09-15-2003, 01:05 PM #13Texan at Heart
- Join Date
- Jul 2003
- Location
- Castle Pines, CO
- Posts
- 7,189
OK - sorry. I did not click on one of those links.
What about this one:
http://www.dynamicdrive.com/dynamici...switchmenu.htm
Or posisbly something like:
http://www.dynamicdrive.com/dynamici...pmenuindex.htm
-
09-15-2003, 01:08 PM #14Web Hosting Master
- Join Date
- Aug 2002
- Location
- London, UK
- Posts
- 9,039
That first one is nice, thanks.
Matt Wallis
United Communications Limited
High Performance Shared & Reseller | Managed VPS Cloud | Managed Dedicated
UK www.unitedhosting.co.uk | US www.unitedhosting.com | Since 1998.
-
09-16-2003, 02:30 AM #15Web Hosting Master
- Join Date
- Jul 2002
- Location
- Sweden
- Posts
- 2,059
And the sliding is done by positioning the different divs. Should be possible to just change the positioning to get it working. If you can't get it to work, I'll have a loook at it.
"Stop flame-wars - Report a post"
The original Kitty Lizard