Monday, July 18, 2011

Using an Iframe for Navagation Bar

On my website I have a set of drop down menus running below the header. It looks nice and it works. One problem I have with it though, is the difficulty in editing. It's basically the same code on every webpage, but I have to edit it on every webpage if I want to make changes. There are programs that will edit multiple text files at once, but I can't install them on lab computers.

I'd thought of making a single body container page, and loading content in an iframe. The problem with that is that we have only a single URL in that case. We lose the back button, we lose the ability to book mark, and all we gain is ease of editing. Ease of editing for the web designer shouldn't come at a cost to the end user, so that method is out.

Then today I started thinking about the opposite. What about having an iframe in each page that would load just the menu? I'd have to use javascript, because a link clicked in an iframe normally only loads in that iframe as opposed to the container document. However, a quick google search brought me to someone who had the same problem. And the solution was given! And it doesn't require javascript! Meaning it can't be disabled.

Javascript is almost ubiquitous, but some people do have it disabled, so using it to make the basics of a website is dangerous. But simply changing the target on a link will let it reload the parent document. No javascript, no chance at being easily broken.

Edit (12:51 pm):
Several problems were run into. First, IE doesn't allow iframes to have transparent backgrounds unless you put in a proprietary attribute of allowtransparency="true". And I ended up having to use javascript to change the height of the iframe when you hover your mouse. This keeps links under the extrended height clickable when the drop down menus are hidden, but lets you drop them down in the first place.

However, each problem has been fixed, and success have occurred! To test this, I removed the Virtual Career Fair project from the navigation menu. Removed it just once, and it's gone entirely. Amazing how much easier that is than removing it from all 30ish pages.

No comments:

Post a Comment