ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   anubis5
   Member

   Hello, I hope I can explain this properly. What I am trying to do is add a jQuery mouseover fade in and out effect to the menu, using a background image.

   I was able to achieve this fine with CSS no problem, with the example code:

   .sf-menu a {
   padding:19px 15px 12px 15px;
   margin-right: 0;
   text-decoration:none;
   background: none;

   .sf-menu li {
   background: none;

   .sf-menu li:hover, .sf-menu li.sfHover,
   .sf-menu a:focus, .sf-menu ul a:focus, .sf-menu a:hover, .sf-menu a:active {
   background:url('images/button.png') repeat-x top left;
   background-color:#5085c7;
   outline: 0;
   }

   So as you can see, it start with no background, then adds a background after you hover over it, which looks and works fine. But then I decided I wanted that background to fade in and out with the mouse over, so I looked to jQuery. I'm very new to jQuery, but I implemented something that sort of works, but I'm not sure where to go with it next. Here is the code I used:

   jQuery(document).ready(function(){
   jQuery(".sf-menu li").fadeTo("fast", 0.0);
   jQuery(".sf-menu a").fadeTo("fast", 1.0);

   jQuery(".sf-menu li").hover(function(){
   jQuery(this).fadeTo("fast", 1.0);
   },function(){
   jQuery(this).fadeTo("fast", 0.0);
   });

   jQuery(".sf-menu a").hover(function(){
   jQuery(this).fadeTo("fast", 1.0);
   },function(){
   jQuery(this).fadeTo("fast", 1.0);
   });
   });

   Now I know this is the wrong way to implement it, but it starts with the whole menu structure faded out, then when you mouse over it fades in, but I'm not entirely sure how to make just the background fade in and out and not everything, including the text.

   Any thoughts or suggestions would be greatly appreciated. Thank you

   Posted 1 year ago #
2. 

   anubis5
   Member

   Here is an update:

   I found a far better way to do what I wanted. The jQuery blend effect: http://colorpowered.com/blend/

   But I've ran into one problem. It creates an image overlay for the fade effect, so when I attach it to '.sf-menu li', the fade works perfectly, however, then I loose the menu drop down on the menu mouseover, because of the overlay.

   So, I attempted to attached the blend effect to '.sf-menu a' which is working, while keeping drop down menu, but I run into all kinds of random css problems, cross browser.

   So here is my question. I don't know really anything about the menu thematic uses, but could it be possible to write a function to have the drop down menu work from the '.sf-menu a' mouseover tag instead of the '.sf-menu li' mouseover tag? I'm hoping this is making some bit of sense.

   Thank you in advance for any help.

   Posted 1 year ago #
3. 

   anubis5
   Member

   I was WAY over complicating this. But I just wanted to write down how I did this in case anyone else ever wants to add the fade effect to the thematic menu.

   First thing is first, add the blend effect to the '.sf-menu a' tag. The jQuery effect adds an overlay div with a class of '.jsblend', so add that class to your css file, and adjust it according to your '.sf-menu a'. Worked like a charm.

   I don't know why I was being an idiot with this. I was just majorly over complicating the matter. Thanks.

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.