How to convert any nested multi-level menu to one that uses external menu list file?

**George59** · 07-14-2009, 02:22 AM

Hello Everybody,

Can someone tell me a method and syntax for converting a CSS/javascript based multi-level menu package with nested menu list to one that uses external menu list file?

I found so many multi level menu packages on this and other websites that uses nested menu list but I only found one that uses external file (on this website, the smooth one) but it cannot display UTF-8 characters because of some ajax issues.

In generally speaking I don't even understand why most of the menu scripts here and on other websites are written for nested menu list instead of external one, it is crazy!!!

Every time the menu changes, you have to update as many webpages with the new menu items as many pages your website has, if you have only 5, that's cool, but if you have more than 5 why not update only one external menu file and get cup of coffee?

George59

**C55inator** · 07-14-2009, 09:19 PM

Not quite sure if I understand what you're saying... Are you asking how to give all of your pages links to a single CSS or Javascript file?

Just take this:
<style>
css styles
</style>
<script>
scripts
</script>

copy and paste the contents of the style tag into a blank text file, call it "style.css" and put it in the same directory as your html pages. Copy and paste the contents of the script tags into a blank text file, and call it "script.js".

then, change the script and style tags so they look like this.

<style>
@import url(style.css);
</style>
<script src="script.js">
</script>

this makes sure that any changes you make to script.js and style.css will be implemented in any page that has those modified tags.

**George59** · 07-14-2009, 10:21 PM

I might have not been clear about what I want to be external.

What I meant is that the emphasis is on the long list of weblinks of a multi level menu that you can nest into the <body> of EACH web page that you want the menu to be available from- which in case of a large website that list can be quite long;
OR
Have the same long url list located in another external file and each webpage has just a few lines of reference codes to the external menu list and in case you added or deleted pages from the website, you ONLY have to update one single menu file versus going into each (several hundreds) webpages and update the menu list that way.

Here is an example for a nested menu list, just look at the source code and see it for yourself:
http://www.pumi.org/geza/leigerber-geza/menu.html

The menu list that you see in that source code is already too long to consider using it in 10 pages not even 100 pages if I think of the wasted time I would have to spend when I change anything in the menu.

The menu list on this page starts with this code:

<ul class="menu" id="menu">
<li>

<li><a href="http://www.auto.bme.hu" class="menulink">Home</a></li>

<li><a href="#" class="menulink">Magunkról</a>

and ends with this:

<li><a href="http://www.auto.bme.hu/humor/humor.html" class="menulink">Humor</a></li>

</li>
</li>
</ul>

Well, this is my dilemma.

By the way, thank you for explaining how to convert nested CSS style into external one, I didn't know that either, your explanation is quite simple and right on target! Thanks!

**George59** · 07-19-2009, 09:06 AM

C55Inator,

Menu script package, that I have, has already a separate style.ccs and script.js the only problem is, that the long menu list has to be included in the BODY of all pages of the website, similar to this list:

--------------------------------------------------
<ul class="menu" id="menu">
<li>
<li><a href="http://www.auto.bme.hu/tortenelem/tortenelem.html" class="menulink">História ></a>
<ul>
<li><a href="http://www.auto.bme.hu/tortenelem/bmetort.html" class="menulink">BME története</a></li>
...
...
...
</li>
</ul>
----------------------------------------------------------

All I need to know how to modify the script, so that it will look for this list in a single, external html file?

George59

**Total_me** · 07-20-2009, 04:54 AM

Okey.. You need the script?
I will give you all menu wiych you wanted:
That incert in head:
create 3 files, index.html, style.css, menu.js.
in style.css

Code:

/* body {margin:25px; font:11px Verdana,Arial; background-image:url('your_image.png')} */
body {margin:0px 0px; padding:0px; text-align:center; font:11px Verdana,Arial;}
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:2px}
ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menu ul li a:hover {background-color:#c5c5c5}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(your_image.png); width:134px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(your_image.png);}
/* ul.menu .sub {background:#d1d1d1 url(your_image.png) 136px 8px no-repeat} */
/* the gray plain button with arrow is replaced with nice button WITH ARROW! line above replaced with following two lines. */
ul.menu .sub {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(your_image.png) url(your_image.png) 136px 8px no-repeat; width:134px}
ul.menu .sub:hover, ul.menu .menuhover {background:url(your_image.png) url(your_image.png) 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}

Now open menu.js

Code:

var menu=function(){
	var t=15,z=50,s=6,a;
	function dd(n){this.n=n; this.h=[]; this.c=[]}
	dd.prototype.init=function(p,c){
		a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
		for(i;i<l;i++){
			var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
			h.onmouseover=new Function(this.n+'.st('+i+',true)');
			h.onmouseout=new Function(this.n+'.st('+i+')');
		}
	}
	dd.prototype.st=function(x,f){
		var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
		clearInterval(c.t); c.style.overflow='hidden';
		if(f){
			p.className+=' '+a;
			if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
			if(c.mh==c.offsetHeight){c.style.overflow='visible'}
			else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
		}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
	}
	function sl(c,f){
		var h=c.offsetHeight;
		if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
			if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
			clearInterval(c.t); return
		}
		var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
		c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
		c.style.height=h+(d*f)+'px'
	}
	return{dd:dd}
}();

and atleast index.html

HTML Code:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Menu</title>
<link rel="stylesheet" href="http://www.pumi.org/geza/leigerber-geza/style.css" type="text/css" />
<script type="text/javascript" src="http://www.pumi.org/geza/leigerber-geza/script.js"></script>

<style type="text/css" media="screen">
@import "style.css"; /* Mostly just text styling. */

body {
	margin:0px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
	text-align:center; /* Hack for IE5/Win */
	}
	
#menu {
	width:912px;
	margin:0px auto; /* Right and left margin widths set to "auto" */
	/* text-align:left; */ /* Counteract to IE5/Win Hack */
	}
</style>

</head>
<body>
<!-- <body text="#000000" bgcolor="#330033" link="#330033" vlink="#330033" alink="#330033"> -->

<body background="your_image.png">

<ul class="menu" id="menu">
	<li>

  <li><a href="#" class="menulink">Home</a></li>
	
		<li><a href="#" class="menulink">Magunkról</a>
			<ul>
				<li><a href="#l" class="menulink">História</a>

					<ul>
						<li><a href="#" class="menulink">BME</a></li>
						<li><a href="#" class="menulink">Tanszék</a>
							<ul>
								<li><a href="#" class="menulink">Kund Ede</a></li>
								<li><a href="#" class="menulink">Jurek Aurél</a></li>
							</ul>

						</li>
						<li><a href="#" class="menulink">Autómérnök-Képzés</a>
							<ul>
								<li><a href="#" class="menulink">Kétlépcsös Képzés</a></li>
								<li><a href="#" class="menulink">Kifutó Tanterv</a></li>
							</ul>
						</li>

						<li><a href="#" class="menulink">Hadmérnök-Képzés</a></li>
						<li><a href="#" class="menulink">Nékosz Mérnökkollégiumai</a></li>
					</ul>	
				<li><a href="#l" class="menulink">Munkatársak</a></li>
				<li><a href="#" class="menulink">Oktatás</a></li>
				<li><a href="#" class="menulink">Kutatás</a></li>
				<li><a href="#" class="menulink">Fotó Album</a></li>

				<li><a href="#" class="menulink">Hírek</a></li>
				<li><a href="#" class="menulink">Sajtófigyelö</a></li>
				<li><a href="#" class="menulink">Címünk</a></li>
				<li><a href="#" class="menulink">Aktualitások</a></li>
				<li><a href="#" class="menulink">Támogatóink</a></li>
			</ul>

		
		<li><a href="#" class="menulink">Hallgatóknak</a>
			<ul>
				<li><a href="#" class="menulink">Oktatási Segédletek</a></li>
				<li><a href="#" class="menulink">Hirdetmények</a></li>
				<li><a href="#" class="menulink">Tdk</a></li>

				<li><a href="#" class="menulink">Diákságok</a></li>
				<li><a href="#" class="menulink">Állásbörze</a></li>
		  </ul>
  </li>
		
		<li><a href="#" class="menulink">Tanfolyamok</a></li>
		
		<li><a href="#" class="menulink">Másokról</a>
			<ul>

				<li><a href="#" class="menulink">Magyar Automobilizmus</a></li>
				<li><a href="#" class="menulink">Sajtótájékoztatók</a></li>
				<li><a href="#" class="menulink">Autós média</a></li>
				<li><a href="#" class="menulink">Autósport</a></li>
				<li><a href="#" class="menulink">Nosztalgiaplakátok</a></li>
				<li><a href="#" class="menulink">Oldtimers</a></li>

				<li><a href="#" class="menulink">Linkek</a></li>
			</ul>
		</li>
		
		<li><a href="#" class="menulink">Humor</a></li>
		
		</li>
	</li>
</ul>
</body>
</html>

I hope it helped

**George59** · 07-21-2009, 12:50 AM

Total Me,

Thank you for the scripts, would you please, help me to figure out this one? Currently I did and still do have a style.css, script.js and index.htm file with the original menu package, what is the difference now?

The solution that I am looking for would have an extra (and external) menu.htm file that contains only the url links of the menu itself:

style.css
script.js
index.htm (which is an example page that shows the menu)
menulist.htm (which contains only the url links of the menu)

George59

**Total_me** · 07-21-2009, 06:03 AM

Hmm.. I can't find the problem cause im not pro, I'm new.. Not long time ago started to try program so.. I think i will look up somewhere

Can you attract these your files? I would like to look.
Or why don't you do like: index.php and in it your menu file include.

PHP Code:


<?php require"menu.htm"; //At BODY in the place where should be menu. ?>

So if it won't help please give me files to look up

I hope I helped.

Thread: How to convert any nested multi-level menu to one that uses external menu list file?

Thread Tools

Search Thread

How to convert any nested multi-level menu to one that uses external menu list file?

Bookmarks

Bookmarks

Posting Permissions