After you have built your site and have five or six pages going, you quickly realize how difficult it is to update every page when you change your menu. In this tutorial I will show you how to quickly and easily update your site to a more dynamic nature so that you can just update one file to change your menu on every page. This will help you greatly if you decide to change a file’s name or add another page to your site, this way you will not have to go through every one of your pages to update your links.
First thing that you need to do is compile a list of every site that you want added to your menu. Do not worry if you miss one as this method will allow you to quickly and easily add more as you go along. Next you need to create a file on your server, preferably in the root of the file structure, and name it “menu.html”. Make sure to pay close attention to the target= “_top” tag it will be of use later and is very important. Next you will insert the following code Keep in mind spaces have been added to assist your viewing you can not copy and paste this code:
< html >< head >
< title >my menu < /title >
< /head>< body >
< a href = “index.html” title = ” HomePage” target = “_top” > Home Page < /a >
< a href = “aboutus.html” title = ” AboutUs” target = “_top” > About Us < /a >
< a href = “products.html” title = ” Products” target = “_top” > Products < /a >
< a href = “links.html” title = ” Links” target = “_top” > Links < /a >
< /body >< /html >
Save your menu.html file to your server, now we will need to visit all the pages on your site to add this new menu to each page. One you have done this you will not have to ever do it again! We are going to utilize the embed tag for this method. On each page that you want your menu to show, you will need to position as such. I recommend doing it directly after the < body > tag. Once you have selected the first page you want to add your menu to lets insert the iFrame tag that will be needed for this action.
< iframe src = “mymenu.html” width= “100%” height= “50” align= “center” scrolling= “no” >< /iframe >
Do you see where it says height= “50” ? This attribute will allow your menu to be sized in pixel measurements. Making it 75 will equal 75 pixels in height. You many need to play with this so that it can meet your specific needs. After you save the file, then go to your live page and click the refresh button, once you so so you should now see your menu created with a iFrame embedded in HTML. The next step will be for you to repeat your efforts by embedding the iFrame code on each page that you would like the menu to be on. If you would like to make your menu links images than instead of the regular text links make some buttons in paint or find some free buttons online and make your code look like the following:
< head >< title >my menu < /title >
< /head>< body >
< a href = “index.html” title = ” HomePage” target = “_top” >< img src= “homebutton.gif” >< /a >
< a href = “aboutus.html” title = ” AboutUs” target = “_top” >< img src= “aboutus.gif” >< /a >
< a href = “products.html” title = ” Products” target = “_top” >< img src= “products.gif” >< /a >
< a href = “links.html” title = ” Links” target = “_top” >< img src= “links.gif” >< /a >
< /body >< /html >
If you store your pictures underneath a specific folder then be sure to reflect the path as such. For example instead of just “homebutton.gif” it should be “pics/homebutton.gif”. I hope this article has helped you with your search for a way to create a dynamic HTML menu using iFrames.
