Skip navigation
Currently Being Moderated

Spry menu bar questions

Jun 28, 2013 10:28 PM

http://www.wbmdesign.com/law/test.html

http://www.wbmdesign.com/law/SpryAssets/

 

If I wanted to apply a CSS transition (GRADUAL background color change) as the mouse is hovered over a tab, which class would I add that to? Currently it changes to a gradient white to gray color instantly.

 

ul.MenuBarHorizontal

 

ul.MenuBarActive

 

ul.MenuBarHorizontal li

 

ul.MenuBarHorizontal ul

 

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible

 

ul.MenuBarHorizontal ul li

 

ul.MenuBarHorizontal ul ul

 

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible

 

ul.MenuBarHorizontal ul

 

ul.MenuBarHorizontal a

 

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

 

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

 

ul.MenuBarHorizontal a.MenuBarItemSubmenu

 

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu

 

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

 

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover

 

ul.MenuBarHorizontal iframe

 

ul.MenuBarHorizontal li.MenuBarItemIE

 

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu:hover {

 
Replies
  • Currently Being Moderated
    Jun 29, 2013 1:03 AM   in reply to DerricksArk

    Have a look at

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">

    <style>

    ul.MenuBarHorizontal a {

      transition: background-color 0.5s ease;

      background-color: red;

    }

    ul.MenuBarHorizontal a:hover {

      background-color: green;

    }

    </style>

    </head>

     

    <body>

    <ul id="MenuBar1" class="MenuBarHorizontal">

      <li><a href="#">Item 1</a></li>

      <li><a href="#">Item 2</a></li>

      <li><a href="#">Item 3</a></li>

      <li><a href="#">Item 4</a></li>

    </ul>

    <script src="SpryAssets/SpryMenuBar.js"></script>

    <script>

    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

    </script>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 29, 2013 8:16 AM   in reply to DerricksArk

    Just an FYI... Spry has been "abandoned" by Adobe because, as others will attest, it has "outlived its usefulness". There are jquery and CSS alternatives available now.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 29, 2013 3:28 PM   in reply to DerricksArk

    To get CSS level 3 transitions to work in X-browsers, you'll need to add vendor prefixes for Webkit, Mozilla & Opera.

    http://css3.bradshawenterprises.com/transitions/

     

    It goes without saying CSS transitions don't work in lesser browsers like IE7,8,9.

    If you need support for pre-IE10 users, you could use a bit of jQuery like this.

    http://jsfiddle.net/NancyO/JWsaC/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 29, 2013 4:44 PM   in reply to Nancy O.

    I totally agree with Nancy on this one. Go with jQuery.  There is a vary good reason that Adobe dropped support for Spry in Dramweaver CC - jQuery won. It's better.

     

    --
    Lawrence Cramer - *Adobe Community Professional*
    http://www.Cartweaver.com
    PHP & ColdFusion Shopping Cart for Adobe Dreamweaver

    Stay updated:
    http://www.facebook.com/cartweaver
    http://www.twitter.com/cartweaver
    http://blog.cartweaver.com

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2013 9:01 AM   in reply to DerricksArk

    There are litterally hundreds of jQuery plugins available.  And you can roll your own.

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points