Sunday, December 10, 2006

How to create a single navigation menu/bar/frame

Creating a navigation on Google Pages could be a pain. You realize that its a big pain once your site has blown up and you need to change a navigational link. You would have to open each and every page of your site and manually update the link. There is a work around for this, may be not the best one. You could use iframe tag to get out of this situation.

These are the the steps I follow to overcome this common navigational problem. Using this method I can make any update just to single file and all other pages would be updated automatically.

  • create a file with .htm (or .html) which would have the navigational links.For demonstration purpose I choose menu.html then I open this menu.html in any text editor say notepad in this case and type the following content and save the file

Menu :: href="home" target="_parent" Home | href="browsetricks" target="_parent" Browse tricks |

  • then upload menu.htm to your Google pages account.
  • In Google pages open the page in which you want this navigational menu (screen shot)

  • Then select the section where you would like the navigational unit in screen shot I refer to with a red arrow as Navigation unit section. And then click on Edit HTML link towards the bottom of the page(in screen shot I refer to it with a pointing arrow as click here
  • This should bring up a new inner window (screen shot 2). Here in the code I would use iframe tag to include the menu.html page. (sourcecode of menu.html)

<iframe src="menu.html" frameborder="0" height="40" width="100%" />

note of following points. In the href tag I have used # instead of the actual page. Remember to provide the right link for the same.

You would need to repeat this process of adding iframe tag in all the pages where you want to see the navigational menu.

In case you need to alter/modify/update your navigational menu you would need to make those changes in menu.html file on your computer and then upload the same to your Google Pages account.

hope fully would update this article depending on response I receive from you folks. Please leave a comment if you find this useful or suggest me the kind of change you would like to see.

This is another contribution to my website

powered by performancing firefox


Post a Comment