We use cookies to help make our site work properly and to analyze how our site is used. Some are optional, but none contain your personal information, and we don't use any for ads. You can view our cookies policy, manage your cookie preferences, or consent and dismiss this banner by clicking agree:

Agree
ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Problems With jQuery and Nested Menus

November 03, 2008 12:50pm

Subscribe [2]

  • #1 / Nov 03, 2008 12:50pm

    aaronvegh

    9 posts

    Hi there,
    I’m trying to implement a vertical folding navigation tool. I have my items set out as categories in EE, and my code on the page looks like this:

    {exp:weblog:categories style="nested" parent_only="no" class="head"}
      {category_name}
    {/exp:weblog:categories}

    Now, I want each “parent” category to be the main link; click on it, and the children slide down, pushing the other parents down to make room.

    My jQuery looks like this:

    jQuery().ready(function(){

    jQuery('#nav_categories').accordion({
    header: '#ul li a',
    event: 'click',
    active: false,
    alwaysOpen: false,
    clearStyle: true,
    autoHeight: false
    });
    });

    What I end up with is all my categories splayed out, all on top of each other (I can’t seem to set the initial state to hidden). However, if you click on those headings, in rather unpredictable ways, the subcategories fold up. So while it’s a dog’s breakfast right now, the jQuery is firing, and an accordion effect is occurring.

    The problem seems to be that I can’t format my list output to match what this jQuery script needs. Ideally I’d like my parent categories to be formatted as <h2>‘s, and the subcategories to be in their own div. But I don’t think that’s possible.

    Any advice on what to look at next would be greatly appreciated!

    Cheers,
    Aaron

  • #2 / Nov 03, 2008 1:00pm

    Andy Harris

    958 posts

    If you can post a link to the actual page that’d be handy.

  • #3 / Nov 03, 2008 2:22pm

    aaronvegh

    9 posts

    Sorry, it’s on my Mac, and I haven’t posted it to a public facing server! Here’s the HTML and I’ll attach a screenshot:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>MDR Associates | Office Furniture</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="http://localhost/mdrsite/index.php?css=mdr/site_css.v.1225517949" type="text/css">
        [removed][removed]
        [removed][removed]
[removed][removed]
        [removed]
    jQuery().ready(function(){
        
        // second simple accordion with special markup
        jQuery('#nav_categories').accordion({
            header: '#ul > li a',
            event: 'click',
            active: false,
                        alwaysOpen: false,
                       clearStyle: true,
                       autoHeight: false
        });
});
    [removed]
    </head>
    <body>
        <div id="wrapper">
            <div id="topline">
                <a href="http://localhost/mdrsite/images/interface/logo.png">http://localhost/mdrsite/images/interface/logo.png</a>
                <a href="http://localhost/mdrsite/images/interface/contactline.png">http://localhost/mdrsite/images/interface/contactline.png</a>
            </div>
<div id="broadcast">
        <a href="http://localhost/mdrsite/images/interface/broadcast1.jpg">http://localhost/mdrsite/images/interface/broadcast1.jpg</a>
    </div>
    <div id="bodycap"></div>
    <div id="bodyarea">
        <div id="navigation">
        <div class="navigator">
            <a href="http://localhost/mdrsite/images/interface/navhead_products.jpg">http://localhost/mdrsite/images/interface/navhead_products.jpg</a>
            <ul id="nav_categories" class="head">
    <li>
                <a href="#">Desks</a>
            
        <ul>
            <li>
                <a href="#">Premium Laminate Desks</a>
            </li>
            <li>
                <a href="#">Laminate Desks</a>
            </li>
            <li>
                <a href="#">Veneer Desks</a>
            </li>
            <li>
                <a href="#">Reception Desk Laminate</a>
            </li>
            <li>
                <a href="#">Reception Desk Veneer</a>
            </li>
        </ul>
</li>
    <li>
                <a href="#">Seating</a>
            
        <ul>
            <li>
                <a href="#">Task Seating</a>
            </li>
            <li>
                <a href="#">Soft Seating</a>
            </li>
            <li>
                <a href="#">Other Seating</a>
            </li>
        </ul>
</li>
    <li>
                <a href="#">Specialty</a>
            
        <ul>
            <li>
                <a href="#">Health Care Furniture</a>
            </li>
            <li>
                <a href="#">Dormitory Furniture</a>
            </li>
            <li>
                <a href="#">Other</a>
            </li>
        </ul>
</li>
    <li>
                <a href="#">Systems</a>
            
        <ul>
            <li>
                <a href="#">Panel Systems</a>
            </li>
            <li>
                <a href="#">Desk Systems</a>
            </li>
        </ul>
</li>
    <li>
                <a href="#">Tables</a>
            
        <ul>
            <li>
                <a href="#">Conference & Boardroom Tables</a>
            </li>
            <li>
                <a href="#">Fixed Table Systems</a>
            </li>
            <li>
                <a href="#">Height Adjustable Tables</a>
            </li>
            <li>
                <a href="#">Training Tables</a>
            </li>
        </ul>
</li>
</ul>

        </div>
        
        <div class="navigator">
            <a href="http://localhost/mdrsite/images/interface/navhead_about.jpg">http://localhost/mdrsite/images/interface/navhead_about.jpg</a>
            <ul>
                <li><a href="#">Who We Are</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
        </div>
        
        <div id="content">
            <a href="http://localhost/mdrsite/images/interface/home_header.jpg">http://localhost/mdrsite/images/interface/home_header.jpg</a>
            Tap our years of office furniture consulting experience, and unlock your workers’ potential. Here’s how:
            
        </div>
    </div>
<div id="footer">
                Copyright © <?=date("Y", time())?> MDR Associates. Your use of this site constitutes agreement with our terms of use.
            </div>
        </div>
    </body>
    </html>

  • #4 / Nov 03, 2008 5:15pm

    aaronvegh

    9 posts

    Okay, I’ve posted this site to a public-facing server:

    http://innoveghtive.com/clients/mdrsite/index.php/mdr/

    Looking forward to any help that may be offered!

    Cheers,
    Aaron

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases

© Packet Tide, All Rights Reserved. Legal Notices

Username

Password

Forgot password?
or Register