3 Replies Latest reply on May 26, 2010 9:51 AM by Zabeth69

    Spry tabbed panels - Different Hover Class for each tab

    landon_tc

      I'm setting up spry tabbed panels, and I'm wanting to use an image for each tab, with the text already on it. I've figured this much out by creating a different class for each in the spry tabbed panel css.

       

      However, I'd also like to have a second hover image for each tab. I'm having trouble figuring out how to set up separate classes for each tab's hover state.

       

      Any help?

       

      Thanks.

        • 1. Re: Spry tabbed panels - Different Hover Class for each tab
          Zabeth69 Level 5

          Rather than separate classes for hover states, you want to give your menu items unique IDs, then apply background images (in the CSS) to the various states.

           

          You can probably figure out which style selectors to use by looking at the CSS stylesheet. There is a lot of good information there in the comments.

           

          Alternatively, take a look at how Chris Convers applies images to Spry in his tutorial: http://www.adobe.com/devnet/dreamweaver/articles/spry_widgets_design.html

           

          Beth

          • 2. Re: Spry tabbed panels - Different Hover Class for each tab
            whatisgood Level 1

            help with the code...

             

            I am trying to create unique hover states and selected states for each of the tabbed menus but am having trouble....i am testing with the class:  "newstab"

             

            here is the code in the html:

             

            <ul class="TabbedPanelsTabGroup">

              <li class="newstab" tabindex="0"><img src="../images/june10menubar/news.jpg" width="110" height="60" alt="news" /></li>

                  <li class="TabbedPanelsTab" tabindex="0"><img src="../images/june10menubar/video.jpg" width="110" height="60" alt="video" /></li>

                  <li class="TabbedPanelsTab" tabindex="0"><img src="../images/june10menubar/grammar.jpg" width="110" height="60" alt="grammar" /></li>

             

                </ul>

             

            and here is the .css code I added

             

            .newstab .TabbedPanelsTabSelected {

            background-color: #00AA00;

            border-bottom: 1px solid #EEE;

            color: #FFFFFF;

            }

            • 3. Re: Spry tabbed panels - Different Hover Class for each tab
              Zabeth69 Level 5

              As I remarked to the original poster, don't use classes to distinguish different menu items. If they are truly unique instances, use IDs. If they are not unique instances (say, all the submenus), use the already-in-use classes.

               

              When Spry menus function, the Javascript swaps in and out various class names, and your class names may not actually be "in use" when you want the styles that you have set up (that rely on them) to be active.

               

              You should be able to readily identify in the SpryMenuBar...CSS stylesheet the items to alter. Read the CSS stylesheet carefully, especially the comments. Because you are adding IDs (I suggest adding them to the li, as in li#contactus, etc.), you can then use a descendant selector, as:

               

              li#contactus a {background-color: orange;}

               

              Be sure to position the new rules UNDER the existing rule for li a styling, because you want to override the original styling.

               

              Beth