How to make an easily updateable multilevel menu for 100 web pages?

**George59** · 07-28-2009, 05:28 AM

Hi,
I need to make a multi level menu for a website that has at least 100 web pages.

I would like to be able to update the menu (in case I need to add, rename or delete any menu item) quickly just by editing ONE menu list file that contains all items of the menu.

I found a nice HTML/CSS multi-level menu that does not uses javascript, and I was wondering if someone could take a peek at it and show me how can I implement it in the fashion that I described above.

Here is the link to the code:
http://www.cafewebmaster.com/web2-st...kground-images

and here is the demo:
http://www.cafewebmaster.com/demo/cs...eb2_style.html

(I have already asked the same question to the author, but he only responds to questions once a month and if I have a follow up question, I have to wait another month for that answer.)

So, I know how to extract the style info into a .css file, that is not the problem, what I'd like to know how to "extract" the menu list info from that html code into an external .htm file, so that that would be the only file I need to modify in case the menu itself has to be changed.

My sub question is related to the main problem but it might give answer to that one, I don't know:

I've tested at least 7-10 multi level menus, and they all have the basic structure, link to style, javascript, and the "internal" menu list.

Is it possible to xref a menu html file with all the codes and styles into another html document using either frames, iframes, table, so that if it is possible, that would solve my problem, and all I would have to do to add one of those frame or table element to all 100 homepages where that frame would only include the xref to the complete menu package?

George

**kaos** · 07-30-2009, 03:45 AM

I've had a problem just like that... I solved it by using an iframe.

create a HTML document (menu.html) with only your menu on it. Then, insert this code where you want it:

HTML Code:

<iframe src="http://www.yourdomain.com/menu.html" frameborder="0" scrolling="no" height=390 width=188>

This way, you only have to edit 'menu.html' to edit the content on your menu.

**George59** · 07-30-2009, 06:31 AM

kaos,

thank you for the tip, it's almost perfect, the only problem is that I have to set the height of the iframe too high in order to avoid clipping off the bottom section of the menu. You can see the result here:
http://www.kutya.info/test/FINAL_wit...file/index.htm

If I set the frame hight to 300 pixels, it works, but that creates too much dead (unuseable) space right below the menu.

Is there an iframe tag of some sort or any other trick that would make the iframe not limit the "movement" of a pull down menu but would allow it?

George

**Beverleyh** · 07-30-2009, 02:24 PM

Have you thought about using a php include? It's what I use on my sites - here's one with a drop-down menu to demonstrate: http://www.jemcon.org/
I only have to change one file that contains the menu and it reflects across the entire site.

Here's a simple tutorial that will help you: http://www.tizag.com/phpT/include.php

**kaos** · 07-30-2009, 08:06 PM

Try making the height of the iframe as high as you need, then bake the background of the page in the iframe transparent.

**George59** · 07-31-2009, 03:48 AM

Beverly: Thanks for the php solution, it worked!
http://www.kutya.info/test/FINAL_wit...file/index.php
(actually as the tutorial is also explains it, the php code is not visible in the source code because the xref-ed code becomes visible instead.)

Also, thanks for the link to the Tizag tutorial website, it's really useful, speaks plain English and explains things covering all possible angles within a subject.