Menubar in I-frame

navaldesign · #1 02-17-2006, 11:56 PM

Suppose you have built your site, with 20, 30 or more pages. Then you find out that you must add another section, or eliminate one, or simply change one of the links in your menu buttons. Well, you have to edit all pages, and then republish them. Unless you only have one, single page with your menu in it.

The same goes also for footers and headers. Changing them in a single page and have all your site automatically updated, would save you a lot of time and nerves.
Let’s see how BV can do this with the help of i-frames. The small tutorial here is just some gathering together information posted long time ago by Pablo and Pilotchip.

Let’s start by creating a page for our menubar. The same procedure goes also for navigation bars, Go menus, headers, footers, and anything else that has to appear in more than one pages.
Create the menubar page. Create and place the menubar (or nav bar or footer or header) in the exact position where you want it to appear in the rest of your pages. Establish the links as you would have done normally, BUT SET THE "TARGET" TO "TOP".

In my own pages, I have this menu and header page: http://www.navaldesign.info/Italiano/menu_ita.html

Now, we will put our menu page OVER the other pages. But we first have to make the background transparent, so it won’t cover the page content. To do this, copy the following code:

<style type="text/css">
body {background-color: transparent}
</style>

Then go in Page html, click on “Between Head” tag, and paste the code in the window.
Save your page with an obvious name like “menu”. Then go on and PUBLISH IT.

IMPORTANT!! DON’T “ center in browser ” THE Menu Page

Now let’s go to the next step. Put the menu in the other pages.

Create your pages exactly as you want them to appear. Leave space for the menubar. If this helps you, temporarily copy- paste the menu in the page, so you have a reference on how your page will appear with the menu in place, then, before saving, delete the menu. In coping the menu in the page, don’t use the right click “paste”, nor the “Edit” >”Paste” command from the Toolbar. Use the Paste icon in the Toolbar. This will paste whatever you have copied in the same exact position where it was in the provenience page.

My own index page is made this way. The index page is:

http://www.navaldesign.info

and the page without the menu and the header is

http://www.navaldesign.info/Tips/homepage_ita.html

Now let’s see how we put the menu in our page. Of course this will only happen when we preview or publish the page.

In your page, create an I-frame. It has to be big enough to contain the whole menu. I usually make it the same size as my whole page, but you can make it the same size of your menu or header etc.
Double click the frame, to edit it, and make it non scrollable, and with no border. Give it as default URl, the menu page URL, so when the page loads, it will automatically load the menubar in the i-frame. Put the frame INFRONT OF ALL THE OTHER PAGE CONTENT. If you have followed the procedure as described, the I-frame is already infront of all the other stuff.
Please note that at this point the I-frame covers all or part of your page. Don’t worry, now we are going to make it transparent.
To do this, you need to copy the following code:

allowtransparency="true" background-color="transparent"

Right click on the I-frame, chose Object HTML, click on “Inside Tag” and paste the above code in the window. At this point your i-frame has become transparent. Attention! Transparency is only visible in Preview or when published. In the original BV screen, it appears whte, SO IF YOU WANT TO EDIT THE PAGE, PUT THE FRAME IN THE BACK, EDIT, THEN BRING THE FRAME INFRONT AGAIN, AND SAVE THE PAGE. Publish it.

As you can see, following the same steps for all your pages, and copying – pasting the I-frame in all your pages, you now have one single page with your menubar – or header or whatever else – and it appears in All your pages. Whenever in the future you want to update or change your menubar, you only have to edit the menu page and re-publish it. You're done!

Bethers · #2 03-26-2006, 07:38 PM

Question - if I figure out how to do this :) - the iframe is static, correct? So, if I put the footer in an iframe, all pages have to be the same length? I definitely see the advantage of the header and menubar, but I know that all my pages won't be the same length, so I probably should stick with the iframe only for header and navigation?

navaldesign · #3 03-26-2006, 07:55 PM

No, make your pages the lenght you want using three different i frames: one for header, one for footer, and one for navigation. This way you can put the footer frame as low as you want. Or you can have one for header and navigation, and one for footer.

Bethers · #4 03-26-2006, 08:00 PM

I have to think seriously about these - as it appears se's still ignore content within iframes - and I was considering using all text links in navigation for the se's - if I decide to use the buttons, then it wouldn't matter - so much to think about!

navaldesign · #5 03-26-2006, 08:13 PM

Wrong! here we deal with i frames: the final html code is as all the content is present at the page: and of course, the three pages, with the nav bar, the header and the footer, ARE EXISTING PAGES of yor site, so the content is there.

Bethers · #6 03-26-2006, 08:49 PM

Thank you for explaining that - I guess my project tomorrow is to figure out how to do this :)

I am not bilingual - and this is all certainly a foreign language to me - but I will get it!

navaldesign · #7 03-26-2006, 08:58 PM

No worries, if you need help just post again, in the General Support area.

satneC · #8 03-29-2006, 04:58 PM

Hi,

if on page I put iframe IN FRONT as instructions apply (move to front command) in pre-view I se only the menu page. If I put it to BACK (move to back command) in pre-view I se page as it should be, menu page + page that I make. I have put this code allowtransparency="true" background-color="transparent" in iframe html.
Help please. Idea is to good to be left out.

navaldesign · #9 03-29-2006, 05:56 PM

You only see the I frame cover the page in BV. In preview, as well as when published, you will see it ok. Have a look at the examples in the main post: the i frame covers ALL the page, but it has a transparent background, so you only see my header and the menu. I only have ONE menu and ONE header, combined in one single page, for ALL my pages (aprox 70). If you need further help plese do not post here, but in the General Support Forum

limebrook1 · #10 03-30-2006, 08:04 PM

Navaldesign - you have converted me! This is an excellent way to handle the menus on my ever growing site! Thank you so much!

Don't know what we would do without you!

Regards

CarbonTerry · #11 04-04-2006, 05:16 AM

Yes, thank you.

Ramkumar · #12 08-31-2006, 11:00 PM

Excellent information. Truly educative. This is exactly what I was looking for.

Thanks very much !!!

Ram

scottv · #13 09-07-2006, 08:14 PM

I'm confused a bit. Do you create the drop down menu from the Navigation Bar or do you get rid of it and create an I-Frame from the Menu Bar? How does the Navidation Bar and Menus Bar differ?

Newbie here...so be easy on me!
Thanks!

navaldesign · #14 09-07-2006, 08:23 PM

In BlueVoda, by Nav Bar we intend the usual static (exept for the mouseover effect) navigation bar. By Menubar we intend the dynamic bar (when you mouse over one button, the submenu bar appears). the choice is yours. The Iframe will work with both.

Menubar, or Nav Bar, whatever you choose, are placed in a page of their own (eventually, if you want, you can have also your header and / or footer in the same page). Then, in EACH of your pages, you must have an Iframe, transparent, as explained in the tutorial, linked to the page of the Menubar. The i frame is positioned ABOVE the rest of your page objects, so when you load the page, the menubar appears on top of the page content.

Ofcourse, the Iframe content will only appear after you have published your pages.

scottv · #15 09-09-2006, 01:57 AM

Now, can you have a transparent form for the menu bar to been seen through a background form that is a dark template that is copied as an image?

thxs,

scottv

navaldesign · #16 09-09-2006, 08:19 AM

I'm not sure what you mean. If you mean that you want a background UNDER your menubar, simply place the background in the main page or in the same page of the menubar, UNDER the menubar itself.

If you mean something else, please clarify.

asirimarco · #17 09-12-2006, 12:57 AM

this is the greatest idea since sliced bread - thank you for many hours of time saved - wish i'd have known about it from the begining
thankx again ann