WordPress.org

1. Steven Jones
   Member
   Posted 3 years ago #

   Hi,

   I've been helping someone try to change the menu on their website, it works in Firefox but not in IE 6 or 7.

   http://www.tynevalleycycling.co.uk/

   There's the website, the two hovers that we're looking at here are "About TVCC" and "Racing" - the rest are just normal links so they're alright.

   Any help would be greatly appreciated.

   Steve

2. zeniph
   Member
   Posted 3 years ago #

   double check you have the javascript in place to assign the class "sfhover" to the LI's as you hover over them.

   Firefox supports LI:hover. IE6 doesnt. IE7 does but in a buggy kind of way. So to achieve the same effect for IE you need to dynamically assign and remove the class.

   the CSS for the drop downs is on line 1658
   

   #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
   left: auto;
   }

3. Steven Jones
   Member
   Posted 3 years ago #

   Zeniph,

   Thanks for the quick reply - I'm not sure which Javascript I should be using to do this - I'm not really very experienced with it at all.

   Is there a way to do this without JS or is there a certain package I have to import?

   Cheers,
   Steve

4. kapiljain.in
   Member
   Posted 3 years ago #

   This well explained article might help you.

   http://www.alistapart.com/articles/horizdropdowns/

5. zeniph
   Member
   Posted 3 years ago #

   I see you've added the suckerfish javascript code.

   better to use this jquery javascript. Main benefit (apart from introducing you to jquery) is that this code will fire as soon as HTML has loaded. Your existing javascript uses onload which wont fire until everylast image and external resource has loaded.

   <script type="text/javascript">
   jQuery(document).ready(function() {
   
   	jQuery("#nav LI").hover(
         function () {
           jQuery(this).addClass("sfhover");
         },
         function () {
          jQuery(this).removeClass("sfhover");
         }
       );
   });
   </script>

6. Steven Jones
   Member
   Posted 3 years ago #

   Can I just replace the Javascript and it will still work or will this require modification of the CSS as well?

   Appreciate your help so far.

   Thanks,
   Steve

7. zeniph
   Member
   Posted 3 years ago #

   yes, both do the same thing - they add and remove the class "sfhover" on hover

   since your using jquery already (other pluggins would have installed it) you may as well make use of it!

8. lbrocka
   Member
   Posted 2 years ago #

   Hi,
   I'm trying to help someone get a drop down to work in ie6. Link to test site compasstest

   I have added zeniph's script in head section of header.php, but no change. I'm probably doing something wrong.

   Any help, much appreciated!

   Thanks,
   Lori

Topic Closed

This topic has been closed to new replies.