5 Replies Latest reply on Jan 21, 2007 8:30 PM by Newsgroup_User

    Folder tab type navigation bar

    P-C-Surgeonz
      I would like to create a folder type tab navigation bar using the symbol rollover buttons. What I would like to see is when a user does a 'mouse over' on the nav buttons, the folder tab button receiving the 'mouse over' overlaps over some of the other nav buttons, and when it is clicked, again it is shown on the web page as overlapping onto the other nav buttons. I can get this effect to work without any problem, but when I do a 'mouse over' on a nav button that is currently being overlapped, it displays on top of the original overlapping button. What I would like to see is to have an over lapped button displayed on a web page after being clicked on, and when a user does a 'mouse over' on a button next to the overlapping button, it displays its effect on a layer behind the overlapping button, and when clicked on, it becomes the overlapping button. I tried to make this work with making individual button symbols from the navbar, and also using the entire navbar as the symbol but couldn't get the effect correct. Do I create this effect with a swap image instead? I'm sorry if this is a confusing question, but couldn't come up with an easier way to explain.
        • 1. Re: Folder tab type navigation bar
          Level 7
          See if this helps:
          http://www.playingwithfire.com/tool_tips/magic_tabs.html

          --
          Al Sparber - PVII
          http://www.projectseven.com
          Extending Dreamweaver - Nav Systems | Galleries | Widgets
          Authors: "42nd Street: Mastering the Art of CSS Design"

          • 2. Re: Folder tab type navigation bar
            P-C-Surgeonz Level 1
            Thanks for the tutorial link. I was very impressed with the tab bar. I not only learned some Fireworks techniques, but will try out some of these tricks on my own website. Although this was an excellent tutorial, it didn't tell me how to create a 'mouse over' effect once these .gif images are created. I still have alot to learn w/Fireworks, but it looks like I am supposed to add the individual navbar images to the different pages of my website. And it doesn't look like I would be able to create any 'mouse over' effects with this technique. Am I right or did I miss something?
            • 3. Re: Folder tab type navigation bar
              Level 7
              P-C-Surgeonz wrote:

              > Thanks for the tutorial link. I was very impressed with the tab bar. I not only
              > learned some Fireworks techniques, but will try out some of these tricks on my
              > own website. Although this was an excellent tutorial, it didn't tell me how to
              > create a 'mouse over' effect once these .gif images are created. I still have
              > alot to learn w/Fireworks, but it looks like I am supposed to add the
              > individual navbar images to the different pages of my website. And it doesn't
              > look like I would be able to create any 'mouse over' effects with this
              > technique. Am I right or did I miss something?

              Changing the look of the tabs on mouseover defeats the tab metaphor,
              IMHO. You could change the look of the text on the tab instead, as
              you'll see here:

              http://www.projectseven.com/products/tools/tabpanel/demo/index.htm


              --
              Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
              --------------------------------------------------------------
              http://www.projectseven.com
              Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
              CSS Newsgroup: news://forums.projectseven.com/css/
              --------------------------------------------------------------
              • 4. Re: Folder tab type navigation bar
                P-C-Surgeonz Level 1
                Thanks for the suggestion. I do have a couple of questions regarding the web page you sent a link for: Is any of this page done with Flash? I noticed that when you click on a tab the page doesn't change only the tabs and info below it. Quite clever and impressive. Will this effect work only in IE or other browsers as well? Will it work with Macs? Is this program imported and used in Fireworks when working with images/buttons/navbars or Dreamweaver when setting up the web pages?
                • 5. Re: Folder tab type navigation bar
                  Level 7
                  There is no flash involved and if you look at the right hand bar it will
                  show you which browsers are supported.
                  :)
                  It is a Dreamweaver extension
                  alex

                  P-C-Surgeonz wrote:
                  > Thanks for the suggestion. I do have a couple of questions regarding the web
                  > page you sent a link for: Is any of this page done with Flash? I noticed that
                  > when you click on a tab the page doesn't change only the tabs and info below
                  > it. Quite clever and impressive. Will this effect work only in IE or other
                  > browsers as well? Will it work with Macs? Is this program imported and used in
                  > Fireworks when working with images/buttons/navbars or Dreamweaver when setting
                  > up the web pages?
                  >