Results 1 to 15 of 15

Thread: DHTML Menus....

  1. #1
    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 out
    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.

  2. #2
    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.

  3. #3
    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.

  4. #4
    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.

    Regards
    WHO AM I? CLICK HERE!

  5. #5
    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.

  6. #6
    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.

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

  8. #8
    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

  9. #9
    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.

  10. #10
    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

  11. #11
    Join Date
    Jul 2003
    Location
    Castle Pines, CO
    Posts
    7,189

  12. #12
    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.

  13. #13
    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

  14. #14
    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.

  15. #15
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •