Announcement

Collapse
No announcement yet.

Menubar in I-frame

Collapse
This topic is closed.
X
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Menubar in I-frame

    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!
    Last edited by navaldesign; 02-18-2006, 10:57 AM.
    Navaldesign
    Logger Lite: Low Cost, Customizable, multifeatured Login script
    Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
    DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
    Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!


  • #2
    Re: Menubar in I-frame

    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?
    Beth
    A Child's Palace - Pinata Palace - Moxie Enterprises

    SEO and Marketing Tools
    SEO - The Basics

    Comment


    • #3
      Re: Menubar in I-frame

      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.
      Navaldesign
      Logger Lite: Low Cost, Customizable, multifeatured Login script
      Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
      DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
      Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

      Comment


      • #4
        Re: Menubar in I-frame

        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!
        Beth
        A Child's Palace - Pinata Palace - Moxie Enterprises

        SEO and Marketing Tools
        SEO - The Basics

        Comment


        • #5
          Re: Menubar in I-frame

          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.
          Navaldesign
          Logger Lite: Low Cost, Customizable, multifeatured Login script
          Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
          DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
          Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

          Comment


          • #6
            Re: Menubar in I-frame

            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!
            Beth
            A Child's Palace - Pinata Palace - Moxie Enterprises

            SEO and Marketing Tools
            SEO - The Basics

            Comment


            • #7
              Re: Menubar in I-frame

              No worries, if you need help just post again, in the General Support area.
              Navaldesign
              Logger Lite: Low Cost, Customizable, multifeatured Login script
              Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
              DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
              Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

              Comment


              • #8
                Re: Menubar in I-frame

                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.
                www.photosc.blogspot.com
                www.slodental.com


                Comment


                • #9
                  Re: Menubar in I-frame

                  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
                  Navaldesign
                  Logger Lite: Low Cost, Customizable, multifeatured Login script
                  Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
                  DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
                  Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

                  Comment


                  • #10
                    Re: Menubar in I-frame

                    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
                    Trish
                    www.Limebrook.com
                    www.MountainWalk.co.uk
                    www.MyBeardedDragons.co.uk
                    www.TucsonForBeginners.com
                    www.Pets4kids.info

                    Comment


                    • #11
                      Re: Menubar in I-frame

                      Yes, thank you.
                      CarbonTerry
                      Semper Fi
                      Still green...still mean......just not as lean

                      Red Hawk Archery
                      Zone 5 Photo
                      My USMC

                      Comment


                      • #12
                        Re: Menubar in I-frame

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

                        Thanks very much !!!

                        Ram

                        Comment


                        • #13
                          Re: Menubar in I-frame

                          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!

                          Comment


                          • #14
                            Re: Menubar in I-frame

                            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.
                            Navaldesign
                            Logger Lite: Low Cost, Customizable, multifeatured Login script
                            Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
                            DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
                            Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

                            Comment


                            • #15
                              Re: Menubar in I-frame

                              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

                              Comment

                              Working...
                              X