Forums

help needed with custom autonav template

Permalink
Hi there,

I'm trying to create a custom template for my autonav that uses a slightly different structure then the core template. The custom nav needs divs with enclosed hrefs for subitems instead of <li>

This is the code that needs to be rendered by the template:
<ul class="main-menu">
            <li><a class="main-link" href="/">home</a></li>
            <li>
                <a class="main-link sub-menu-trigger" href="/team">team</a>
                <div class="sub-menu font3">
                    <a href="/portfolio01.html">member1</a>
                    <a href="/portfolio03.html">member2</a>
                    <a href="/portfolio05.html">member3</a>
                </div>
            </li>
            <li><a class="main-link" href="/about.html">about</a></li>
       </ul>



This is what i ended up, but it doesn't work, i still have some code wrong or missing:

//*** Step 2 of 2: Output menu HTML ***/
if (count($navItems) > 0) {
    echo '<ul class="main-menu signature-leon">'; //opens the top-level menu
    foreach ($navItems as $ni) {
        echo '<li class="' . $ni->classes . '">'; //opens a nav item
        echo '<a class="main-link font3bold ' . $ni->classes . '" href="' . $ni->url . '" target="' . $ni->target . '">' . $ni->name . '</a>';
        if ($ni->hasSubmenu) {
            echo '<div class="sub-menu font3">'; //opens a dropdown sub-menu
        } else {
            echo '</li>'; //closes a nav item
            echo str_repeat('</div></li>', $ni->subDepth); //closes dropdown sub-menu(s) and their top-level nav item(s)
        }
    }
    echo '</ul>'; //closes the top-level menu
} else if (is_object($c) && $c->isEditMode()) { ?>
Viewing 15 lines of 17 lines. View entire code block.


Can someone help me getting this to work properly?
That would be great!
buurvrouw
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi buurvrouw,

What is this Auto-Nav supposed to look like?

What parent page are the member pages children of?
buurvrouw replied on at Permalink Reply
buurvrouw
Hi MrKDilkinton,

Thanks for looking into this. The pages are parent of the home-page. The nav is to be used as the main nav.
Here's an example of a working template with the menu:http://www.hutspott.nl/test/index.html...

This is how the structure s compared to the core nav template:

needed structure:       
       <ul>
            <li><a>mainlink</a></li>
            <li>
                <a>mainlink met sublevel</a>
                <div class="sub-menu">
                    <a>sublink</a>
                    <a>sublink</a>
                    <a>sublink</a>
                </div>
            </li>
            <li><a>mainlink</a></li>
       </ul>
core nav structure:
       <ul>
Viewing 15 lines of 24 lines. View entire code block.


As you can see there is an extra div in the sublevels and the links of the sublevels are not placed in li's. I'm having difficulties in getting this done in the template.
A little help would be very much appreciated :-)
MrKDilkington replied on at Permalink Reply
MrKDilkington
@buurvrouw

The member1, member2, member3 pages are child pages of team?

Will team be the only page where the children need to wrapped in a div?
buurvrouw replied on at Permalink Reply
buurvrouw
Yes, that's right the member1, member2, member3 are childpages of 'team'.
But team is not the only page with child pages. The template should function with the default autonav behavior to scan for all available childs.

From the previous posted sample page page, this is the code in the html template. That's what i'm trying to achieve with autonav:

<ul class="main-menu signature-leon">
            <li><a class="main-link font3bold" href="index.html">home</a></li>
            <li>
                <a class="main-link font3bold sub-menu-trigger" href="#">portfolio</a>
                <div class="sub-menu font3">
                    <a href="portfolio01.html">fluid / 4 column</a>
                    <a href="portfolio03.html">fluid / 3 column</a>
                    <a href="portfolio05.html">fluid / multi column</a>
                    <a href="portfolio04.html">spaced / 4 column</a>
                    <a href="portfolio02.html">spaced / 3 column</a>
                </div>
            </li>
            <li><a class="main-link font3bold" href="about.html">about</a></li>
            <li><a class="main-link font3bold" href="journal.html">journal</a></li>
            <li>
Viewing 15 lines of 24 lines. View entire code block.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@buurvrouw

This should match the code you provided in your last reply:
//*** Step 2 of 2: Output menu HTML ***/
if (count($navItems) > 0) {
    echo '<ul class="main-menu signature-leon">'; //opens the top-level menu
    foreach ($navItems as $ni) {
        if ($ni->level == 1 && !$ni->hasSubmenu) {
            echo '<li class="' . $ni->classes . '">';
            echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . ' main-link font3bold">' . $ni->name . '</a>';
        } elseif ($ni->level == 1) {
            echo '<li class="' . $ni->classes . '">';
            echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . ' main-link font3bold sub-menu-trigger">' . $ni->name . '</a>';
        } elseif ($ni->level == 2) {
            echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '</a>';
        }
        if ($ni->hasSubmenu) {
            echo '<div class="sub-menu font3">';
Viewing 15 lines of 26 lines. View entire code block.
buurvrouw replied on at Permalink Reply
buurvrouw
Yes, this is working !
Thank you for your help on this MrK, very much appreciated.
Cheers!!