Dropline Menu in WordPress

2 Views

Right, the big problem here is that I have a fix html format that WP generates from the wp_list_pages(‘title_li=’); function. It’s a pile of nested lists. Now I wish to style that as a dropline menu with hover functionality.

http://hedag.openskin.org/?page_id=286 You can see what I’ve managed up to now there, I’m using z-index to try and overlay the current subnav with the one from the hovered subnav. Now I’ve read up on the z-index and I don’t think it’s possible to get it working using only css because the seperate “children” lists are in different stacking contexts.

Read More

So now my attempt is to remove it using jquery when you hover over another one of the main navigation elements. Would any of you be kind enough to either

  1. tell me what’s wrong with my z-index/css stuff and fix it that way (preferred, it’d be pretty cool) or
    2. fix my jquery code so it’d work, I’m loading it in the <head> tag.

Current jQuery code: 

<script>
    jQuery(document).ready(function($) {
        $('ul#nav>li').hover( function () {
            if ($(window).width() > 767) {
                $('ul#nav>li.current_page_item .children').hide();
                $('ul#nav>li.current_page_ancestor .children').hide();
            }
        });
    });
    jQuery(document).ready(function($) {
        $('ul#nav>li').mouseleave( function () {
            if ($(window).width() > 767) {
                $('ul#nav>li.current_page_item .children').show();
                $('ul#nav>li.current_page_ancestor .children').show();
            }
        });
    });
</script>

Using jQuery the menu now works as intended, it’d still be interesting to find a purely css solution to this as I’m fairly sure nested lists are a pretty standard navigation scheme and droplines are often the best option. One other thing that might be interesting to solve is getting the sub-nav to be left or right aligned with the parent ul and not the parent li.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. The tricky thing about the CSS z-index property is that it’s only applied to elements with a position specified in your stylesheet: either relative, absolute or fixed.

    Looking at the source code on the page you linked, you should be able to style this with a pure-CSS solution. You only really need to use JavaScript if you want to support old versions of Internet Explorer. 

    ul li{ /* your top-level list */}
ul li ul{ display:hidden; position:relative; }
ul li:hover ul{ display:block; }
ul li.over ul{ /* if you want to support old versions of IE */ }

    For accessibility, you can use left:-9999px in place of display:hidden. There’s a detailed writeup of this technique here: http://www.htmldog.com/articles/suckerfish/dropdowns/ and at the bottom of the page you’ll find an example of a horizontal nav menu, if that’s what your final design calls for.