Combating IE6: Drop Down Menu Plugin for WordPress “twentyten” Them

twentyten

I’m in love with the newly crafted WordPress theme “twentyten.” The code is clean and the included functions are spot-on. So, I’ve decided to start making Child Themes based on twentyten. The one problem I would run into is in Internet Explorer 6. Now, I know that everyone hates it and that we all need to move on into the future.. but.. I have clients that I really need to continue support of that legacy browser. The problem that I encountered was with the drop down menu system. The code is so beautiful and perfect, but it just uses CSS… which IE6 can’t recognize. So I decided to write a plug in (with a bit of helpful advice from some awesome geniuses) that I can install whenever I make a child of twentyten and need it to support drop downs in IE6.

WordPress Plugin Page: http://wordpress.org/extend/plugins/twentyten-ie6-menus/
DOWNLOAD from WordPress: Twentyten IE6 Menus

Here is the plugin php file: (if you don’t want to use it as a plugin.. just steal the jQuery)

<?php
/**
 * Plugin Name: Twentyten IE6 Menus
 * Author: Sara Cannon
 * Author URI: http://sara-cannon.com
 * Description: Make the menu drop down in IE6 (if you care about that sort of thing)
 * Version: 1.0
 * License: GPL2
 */
function sara_twentyten_ie6_menus_enqueue() {
 wp_enqueue_script( 'jquery' );
}
add_action( 'after_setup_theme', 'sara_twentyten_ie6_menus_enqueue' );

function sara_twentyten_ie6_menus_script() {
?>
<!--[if lte IE 6]>
<script type="text/javascript">
jQuery(document).ready( function($) {
 $('#access li').mouseover( function() {
 $(this).find('ul').show();
 });
 $('#access li').mouseleave( function() {
 $(this).find('ul').hide();
 });
 $('#access li ul').mouseleave( function() {
 $(this).hide();
 });
});
</script>
<![endif]-->
<?php
}
add_action( 'wp_footer', 'sara_twentyten_ie6_menus_script' );

Feel free to download and use and let me know if you encounter any bugs.
-sara cannon

This probably won’t mean anything to you, but I wanted to document this for my reference. Here are some of the sites I visited when initially researching how to make this plug in. There are probably many more that I hit up in my research later on but I just thought I’d throw this in here considering it is on the same subject lines.

http://www.jdmweb.com/resources/jquery_to_wordpress_plugin
http://www.devlounge.net/articles/using-javascript-and-css-with-your-wordpress-plugin
http://www.lost-in-code.com/platforms/wordpress/wordpress-plugins/wordpress-build-a-thickbox-plugin/
http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/

Post comment as twitter logo facebook logo
Sort: Newest | Oldest

Hi Sarah Great job on this script. I think it's on it's last legs as IE6 is so nearly gone. I made an upgrade to your script that will get all of the sub menu's to work up to the tertiary menu. jQuery(document).ready( function($) { $('#access li').mouseover( function() { $(this).addClass('ie6-hover-primary').children('ul').show(); }).mouseleave( function() { $(this).removeClass('ie6-hover-primary').children('ul').hide(); }); $('#access li ul li').mouseover( function() { $(this).addClass('ie6-hover-secondary').children('ul').show(); }).mouseleave( function() { $(this).removeClass('ie6-hover-secondary').children('ul').hide(); }); $('#access li ul').mouseleave( function() { $(this).hide(); }); }); Great stuff. Vish

You can delete this part: $('#access li ul').mouseleave( function() { $(this).hide(); });

Hi, Thanks a lot !!! I was searching during hours and hours, can't sleeping before solving the problem. God bless you. Thanks also to Andrew for what he added

An ie6 compatibility fix that just works like magic...Thank you so much for the time you just saved me! =] Love it!

I noticed that for menus with multiple levels, all menus would pop out when I rolled over the top level menu. Changing from this: $('#access li').mouseover( function() { $(this).find('ul').show(); }); to $('#access li').mouseover( function() { $(this).children('ul').show(); }); solved the problem. If anyone else is having this same issue, hope that helps.

Hi, I have just found your plugin. The original problem of menus not dropping down in IE6 was fixed by your plugin, so thank you for that. However, I have now found that the dropdowns are dropping down behind the content on the page, it also occurs in IE7 but not in 8 or any other browsers? Is this a well documented issue? Is there a fix for this do you know? I appreciate its not directly related to your plugin but just thought you may have come across the same problems. Thankyou. p.s (Happy new year)

I use twenty-ten a lot as a base for the sites i build, and you solved that irritating problem for me. bless you

Hi Sara, looked at Wordpress for the 1st time ever today, a new client had built his site using it. One of the things I noticed was the dropdown didn't work in IE6, people still use it so it really does matter. One visit here & ten minutes later it works -simple. Thank you !!!

Sara, I implemented this code successfully in a custom theme, in a custom post type listing, but couldn't do it in another one, in a custom menu. In the first case, I had this HTML: <div class="option-container"> <div class="option-img"> <img ... /> </div> <div class="option-text"> ... </div> </div> And this code worked perfectly: jQuery(document).ready( function($) { $('.option-container').mouseover( function() { $(this).find('.option-text').show(); }); $('.option-container').mouseleave( function() { $(this).find('.option-text').hide(); }); }); In the second case, I had this HTML (it's a simplified WP custom-menu, the actual code has many more classes and IDs): <div class="menu-container"> <ul class="menu"> Option 1 <ul class="sub-menu"> Sub-option 1 Sub-option 2 Sub-option 3 </div> And neither of these codes work: jQuery(document).ready( function($) { $('.menu-container li').mouseover( function() { $(this).find('ul').show(); }); $('.menu-container li').mouseleave( function() { $(this).find('ul').hide(); }); $('.menu-container li ul').mouseleave( function() { $(this).hide(); }); }); jQuery(document).ready( function($) { $('.menu li').mouseover( function() { $(this).find('.sub-menu').show(); }); $('.menu li').mouseleave( function() { $(this).find('.sub-menu').hide(); }); $('.sub-menu').mouseleave( function() { $(this).hide(); }); }); The error message says "Object doesn't support this property or method", but I can't tell where, or which is the difference between these two cases. Thanks for the code, and of course for any suggestion you may tell me :) Greetings, Rick

Hi Sara You are quite right that IE6 is a real pain, but with so many corporates (and others) still stuck with it we unfortunately have to work backwards. Excellent solution to the issue of twenty ten menu hover. Cheers Glennyboy

WordPress Hosting