11 Replies Latest reply on Apr 7, 2010 6:11 AM by whatisgood

    Navigation bar CSS over templates

    whatisgood Level 1

      Hello,

       

      I am (re)creating a page that I need some help with the navigation bars.  There are 4 main categories that are set as roll over images to navigate.  How do I make the down image stay on all the pages in that category so the viewer knows where they are.  My current solution is to have 4 seperate templates but I am sure there is a better solution.

       

      This problem multiplies b/c each category has sub menu's....

       

      someone please tell me WHAT IS GOOD...Thanks!

        • 1. Re: Navigation bar CSS over templates
          martincou Level 3

          Hi,

           

          Maybe the :active pseudo-class. The :active pseudo-class adds a style to an element that is  activated. If your tabs are lists items (li), just add that pseudo-class.

          1 person found this helpful
          • 2. Re: Navigation bar CSS over templates
            whatisgood Level 1

            is it possible to apply the psuedo class active to rollover images...a navigation bar made of rollover images with an active class being the swapped image?)

            • 3. Re: Navigation bar CSS over templates
              whatisgood Level 1

              referring to the onmouse: out and onmouse:over functions??

              • 4. Re: Navigation bar CSS over templates
                Jason404 Level 1

                Doesn't the :active pseudo-class only activate while the link is being clicked?

                 

                I have my navbars in SSI files, so that I do not have to edit every page manually when I change the links.  I am looking for a way that I can still do this, while being able to add a class to the current visited section link in the navbar, so the visitor knows what section they are in.

                 

                Would your solution work for this?

                • 5. Re: Navigation bar CSS over templates
                  Zabeth69 Level 5

                  I periodically answer this question.

                   

                  Because your menu is "persistent", at least it looks like the same menu page to page, it is easy to think that you are looking at a way to make the menu item show "persistently." This is an incorrect assessment.

                   

                  You are actually looking at menus that are contextual to the page they are sitting on. This is easy to do by giving each page body (or menu-enclosing div) a unique id AND each menu item a unique id. I code them so they are similar:

                   

                  body#contactuspage

                  ...

                  li#contactus

                   

                  Then, in the CSS for the menubar, find the hover state (if that is the state you want to mimic) and ADD code (additional selectors to that rule) so that you have a selector like this:

                   

                  body#contactuspage li#contactus that "pinpoints" or focuses on the specific menu item on its own specific page.

                   

                  /* Menu items that are open with submenus are set to MenuBarItemHover
                  with a blue background and white text */
                  ul.MenuBarHorizontal a.MenuBarItemHover, 
                  ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, 
                  ul.MenuBarHorizontal a.MenuBarSubmenuVisible,
                  body#contactuspage ul.MenuBarHorizontal li#contactus a
                  {
                       background-color: #33C;
                       color: #FFF;
                  }
                  
                  

                  Be sure to add commas between selectors (except after the last one before the rules). You will be styling the link (the a); because previous rules have set it to display:block; your entire list item should style.

                   

                  This method requires that every menu item that you want to affect get its own unique ID and that every page or enclosing container have an editable attribute, so you can put that different id on every page.

                   

                  Happy styling!

                   

                  Beth

                  • 6. Re: Navigation bar CSS over templates
                    Jason404 Level 1

                    Thanks Beth - that looks just what I was looking for.  It will take me a little while to get my head around structuring everything like that, but I am sure it won't take too long to figure out.  Cheers.

                    • 7. Re: Navigation bar CSS over templates
                      Zabeth69 Level 5

                      Have fun. It is so rewarding when you've got it all coded up and it works the way you want it to!

                       

                      Beth

                      • 8. Re: Navigation bar CSS over templates
                        martincou Level 3

                        Yeah ...

                         

                        I was wrong this time ... Sorry !

                         

                        So, I would make a class style that I would apply to the active section. I think it is the easier way to do it (without js).

                        • 9. Re: Navigation bar CSS over templates
                          Zabeth69 Level 5

                          But as the OP has the menu in an includes file, there is no way to go in to every page and apply the "active" class style contextually.

                           

                          B

                          • 10. Re: Navigation bar CSS over templates
                            whatisgood Level 1

                            I can get the active style to display correctyl on the menu bar using text but i still can't get it to work with the rollover images. 

                             

                            Is it possible to apply this same concept to the rollover images...???  so that the active state is the "swapped image"? 

                            • 11. Re: Navigation bar CSS over templates
                              Zabeth69 Level 5

                              Sure, why not? Just find the rule that has the background image applied and add your new selectors to it. Keep in mind that you will probably be styling the li, and not the a. But you will be fine if you already have background images applied successfully and add new "contextual" selectors to that rule.

                               

                              Beth