hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : DHTML Menus....
Reply

Forum Jump

DHTML Menus....

Reply Post New Thread In Web Design and Content Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old
Corporate Member
 
Join Date: Aug 2002
Location: London, UK
Posts: 9,036

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.



Sponsored Links
  #2  
Old
Web Hosting Master
 
Join Date: May 2002
Location: UK
Posts: 2,994
In my opinion it's got to be Hiermenus http://www.webreference.com/dhtml/hiermenus/

Seen many commerical sites using these.

  #3  
Old
Corporate Member
 
Join Date: Aug 2002
Location: London, UK
Posts: 9,036
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.

Sponsored Links
  #4  
Old
Web Hosting Master
 
Join Date: May 2001
Posts: 1,005
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  
Old
Corporate Member
 
Join Date: Aug 2002
Location: London, UK
Posts: 9,036
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  
Old
Junior 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.

  #7  
Old
Corporate Member
 
Join Date: Aug 2002
Location: London, UK
Posts: 9,036
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  
Old
Web Hosting Master
 
Join Date: Jul 2002
Location: Sweden
Posts: 2,065
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  
Old
Corporate Member
 
Join Date: Aug 2002
Location: London, UK
Posts: 9,036
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  
Old
Web Hosting Master
 
Join Date: Jul 2002
Location: Sweden
Posts: 2,065
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  
Old
Texan at Heart
 
Join Date: Jul 2003
Location: Castle Pines, CO
Posts: 7,189

  #12  
Old
Corporate Member
 
Join Date: Aug 2002
Location: London, UK
Posts: 9,036
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  
Old
Texan 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

  #14  
Old
Corporate Member
 
Join Date: Aug 2002
Location: London, UK
Posts: 9,036
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  
Old
Web Hosting Master
 
Join Date: Jul 2002
Location: Sweden
Posts: 2,065
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

Reply

Related posts from TheWhir.com
Title Type Date Posted
GoDaddy Spins New 'Get Found' Service Out of Locu Acquisition Web Hosting News 2014-01-27 14:17:17


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
WHT Host Brief Email:

We respect your privacy. We will never sell, rent, or give away your address to any outside party, ever.

Advertisement:
Web Hosting News:
WHT Membership
WHT Membership



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?