Anyone have any pointers about how to get an unordered list with multiple levels to work?

Our current template is:

<ul class="indentedNav">
<tmpl_loop page_loop>
        <li class="level<tmpl_var page.relDepth>">
            <a href="<tmpl_var page.url>">
            <tmpl_if page.isCurrent>
        <span class="selectedMenu"><tmpl_var page.menuTitle></span>
    <tmpl_else><tmpl_var page.menuTitle></tmpl_if>
            </a>
        </li>
</tmpl_loop>
</ul>

 This won't be truly semantic though, as the list elements at level 2 won't be children of the navigation element ahead of them.

Thanks,

Matthew

--- (Edited on 2/22/2007 11:30 am [GMT-0600] by artiswork) ---

Without touching on the template logic building a valid nesting unordered list works pretty simply.

<ul class="indentedNav">
     <li><a>Element 1</a>
           <ul>
                 <li><a>Nested Element 1<a/></li>
                 <li><a>Nested Element 2</a></li>
            </ul>
    </li>
    <li><a>Element 2</a></li>
</ul>

For it to validate xhtml 1.0 strict you just need to have the nested UL inside the LI.

Then you can access it through the descendant selector:

.indentedNav li {#style info#}

.indentedNav li ul li {#style info#}

And so on. Though that does get sticky as the second rule will be applied to all list items from the second level on. You can fix that with continuing levels of specificity or through the typical id or class means.

I may have a good example of a tiered navigation template logic but it's from 6.7 and won't validate but it could be a good start. Just let me know if that would help and I'll post it. 

--- (Edited on 2/22/2007 3:46 pm [GMT-0600] by philadev) ---

Try this out. It's pretty close.

----------------- 

<tmpl_if session.var.adminOn>
<tmpl_var controls><br />
</tmpl_if>

<tmpl_if displayTitle>
    <h2><tmpl_var title></h2>
</tmpl_if>
<tmpl_if description>
    <p><tmpl_var description></p>
</tmpl_if>

<tmpl_loop page_loop>

<tmpl_if __FIRST__>
    <tmpl_loop page_loop>
        <tmpl_loop page.depthDiff_loop>
        </li></ul>
            <tmpl_if __last__>
            </li>
            </tmpl_if>
        </tmpl_loop>

    <tmpl_if Page.isRankedFirst>
    <ul>
    </tmpl_if>
   
    <li>
    <tmpl_var page.menuTitle>

        <tmpl_unless page.hasChild>
            <tmpl_unless page.isRankedLast>
            </li>
            </tmpl_unless>
        </tmpl_unless>

        <tmpl_if __LAST__>
            <tmpl_loop page.indent_loop>
            </li>
            </ul>
            </tmpl_loop>
        </tmpl_if>

    </tmpl_loop>
</tmpl_if>

<tmpl_if __FIRST__>
    <tmpl_if page.relativeDepthIs0>
    </li></ul>
    </tmpl_if>
</tmpl_if>

</tmpl_loop>

-------------

I got a real good start from the post below and made a few edits to get it to nest properly:

http://www.plainblack.com/webgui/dev/discuss/unordered-list-with-navigation-template?pn=3

It's almost perfect with one small problem leaving off an </li> in the middle as below at Media, About Us and Procedures & Policies.

<h2>Semantic Nav Test</h2>
<ul>
    <li> Department of Example
        <ul>
            <li> Images
                <ul>
                    <li> stylemanager
                        <ul>
                            <li> Logo </li>
                            <li> Banner </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li> Documents </li>
            <li> Media
            <li> About us
            <li> Contact Us </li>
            <li> Programs & Services
                <ul>
                    <li> Qwer Tyui Opas dfgh jklz xcvb nm </li>
                </ul>
            </li>
            <li> Procedures & Policies
            <li> Forms </li>
            <li> FAQs
                <ul>
                    <li> Questions Group Title </li>
                </ul>
            </li>
            <li> Settings </li>
            <li> Staging </li>
        </ul>
    </li>
</ul>

--- (Edited on 2/23/2007 11:42 am [GMT-0600] by philadev) ---

You do understand what you're doing right, and why this is a difficult problem? You have a flat array of data, that you want to turn into a hierarchical structure.

It is possible to do it. Just not easy.

I'll have our design guy explain how. 

--- (Edited on March 1, 2007 9:36 am [GMT-0600] by JT) ---

--- (Edited on March 1, 2007 9:58 am [GMT-0600] by JT) ---