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)

[code]
<?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’ );
[/code]

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/

11 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>