jQuery Navigation - need help with positioning and accordion behavior

Question

The sidebar navigation here: http://dev.southernlivingplants.com/in_the_garden needs some TLC.

There are a couple of issues that I am trying to resolve and could use some assistance:

1. The accordion action works fine but the single line item links (that do not accordion) do not link correctly to their pages. What is preventing that?

2. With an accordion open (like The Collection) if you mouse over the parent link below it Find your Zone, it highlights the entire section before it.

3. Is there a way to keep a section open while on a specific page?

here is the code:

The HTML

<ul id="menu" class="menu noaccordion">
<li><a class="m1" href="#">the collection</a>
    <ul>
        <li><a href="http://dev.southernlivingplants.com/shrubs/">shrubs</a></li>
        <li><a href="http://dev.southernlivingplants.com/groundcovers_grasses/">groundcovers/<br />grasses</a></li>

        <li><a href="http://dev.southernlivingplants.com/trees/">trees</a></li>
        <li><a href="http://dev.southernlivingplants.com/tropicals/">tropicals</a></li>
        <li><a href="http://dev.southernlivingplants.com/fall_bulbs/">fall bulbs</a></li>
        <li><a href="http://dev.southernlivingplants.com/spring_bulbs/">spring bulbs</a></li>
        <li><a href="http://dev.southernlivingplants.com/annuals/">annuals</a></li>
        <li><a href="http://dev.southernlivingplants.com/perennials/">perennials</a></li>

    </ul>
</li>
<li><a class="m2" href="http://dev.southernlivingplants.com/find_your_zone">find your zone</a></li>
<li><a class="m3" href="#">in the garden</a>
    <ul>
        <li><a href="http://dev.southernlivingplants.com/care_tips/">care tips</a></li>
        <li><a href="http://dev.southernlivingplants.com/color_guide/">color guide</a></li>

        <li><a href="http://dev.southernlivingplants.com/common_pests/">common pests</a></li>
    </ul>
</li>
<li><a class="m4" href="http://dev.southernlivingplants.com/where_to_buy">where to buy</a></li>
<li>
    <a class="m5" href="#">about us</a>
    <ul>
        <li><a href="http://dev.southernlivingplants.com/history">history</a></li>
        <li><a href="http://dev.southernlivingplants.com/media_room/">media room</a></li>
        <li><a href="http://dev.southernlivingplants.com/events">events</a></li>
        <li><a href="http://dev.southernlivingplants.com/botanical_gardens">botanical gardens</a></li>
        <li><a href="http://dev.southernlivingplants.com/testimonials">testimonials</a></li>
    </ul>
</li>
<li><a class="m6" href="http://dev.southernlivingplants.com/video/">plant videos</a></li>
<li><a class="m7" href="http://dev.southernlivingplants.com/contact_us">contact us</a></li>
</ul>   

The Javascript:

function initMenus() {
    $('ul.menu ul').hide();
    $.each($('ul.menu'), function(){
        $('#' + this.id + '.expandfirst ul:first').show();
    });
    $('ul.menu li a').click(
        function() {
            var checkElement = $(this).next();
            var parent = this.parentNode.parentNode.id;

            if($('#' + parent).hasClass('noaccordion')) {
                $(this).next().slideToggle('normal');
                return false;
            }
            if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                if($('#' + parent).hasClass('collapsible')) {
                    $('#' + parent + ' ul:visible').slideUp('normal');
                }
                return false;
            }
            if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#' + parent + ' ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
                return false;
            }
        }
    );
}
$(document).ready(function() {initMenus();});

The CSS:

ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 10em;
  float: left;

}

ul.menu a {
  display: block;
  text-decoration: none;
  font-size: 15px; 
  color: #54301A;   
}

ul.menu li {
  margin-top: 1px;
  border-bottom: 1px solid #54301A;
}

ul.menu li a {
 /* background: #f8f2e3; */
  color: #000;  
  padding: 0.5em;
}

ul.menu li a:hover {
  background: #f8f2e3;
}

ul.menu li ul li { 
  border-bottom: 1px dotted #54301A; 
 }

ul.menu li ul li a {
  /* background: #f8f2e3; */
  color: #000;
  padding-left: 15px;
}

ul.menu li ul li a:hover {
  background: #f8f2e3;
 /* border-left: 5px #000 solid; */
  padding-left: 15px;
}

Thanks!

Answer 1

http://jsfiddle.net/JVwTB/

• Removed the third if block, and return false;

• Added > to some of your CSS rules

Answer 2

Here are the answers to your issues:

1) The return false; statement in the following code is preventing the normal behavior:

if($('#' + parent).hasClass('noaccordion')) {
            $(this).next().slideToggle('normal');
            return false;
        }

2) Add clear: left; to the following CSS selector ul.menu li

3) Yes, this is possible using Javascript, but requires a little bit of work :)

Answer 3

Wish I had a clearer answer, but it looks like your .click() function is consuming the click event, and not passing it on to the element itself. Usually this is done explicitly via a call to stopPropagation(), but since you're not doing that here, I would think the event would still trigger the href.

Maybe you could explicitly redirect the browser in your javascript near the if statement if($('#' + parent).hasClass('noaccordion')) ... as a workaround.